Filter Flexgrid with HTML Content column and skip HTML Tags

Filter Flexgrid with HTML Content column and skip HTML Tags

Posted by: webworx on 22 February 2018, 7:44 pm EST

• 

  webworx

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 February 2018, 7:44 pm EST

  Hi, i have an urgent issue. When we filter a cloumn with html Content, we also match tags like “” and so on. Is it possible to filter only plain text and not the html elements?

  Best regards, Asmo

• 

  webworx

  • Post Options:
  • Link
    Copy

  Posted 22 February 2018, 7:48 pm EST

  Here is some code which use to filter. We have integrated the filter as a row under the cloumn headers.

  this.inWorkingInstructions = new wjcInput.ComboBox(document.createElement(‘div’), {
  
  placeholder: ‘’,
  
  textChanged: (s, e) => {
  
  this.updateFilter(‘workingInstructions’, s.text);
  
  }
  
  });
  
  ChecklistEditingComponent.stopPropagation(this.inWorkingInstructions);
  
  this.watchFocus(this.inWorkingInstructions, ‘workingInstructions’);

  ---

  private updateFilter(part: string, value: any) {
  
  if (this.isDirty()) {
  
  this._utils.displayWarningMessages(‘message.editmode.active’, true);
  
  return;
  
  }

      if (this.filter[part] !== value) {
          // update filter
          this.filter[part] = value;
  
          // reschedule update
          if (this.toFilter) {
              clearTimeout(this.toFilter);
          }
          this.toFilter = setTimeout(() => {
              // refresh view, keep focused element
              let focused = <HTMLElement>document.activeElement;
              this.cvPaging.refresh();
              this.grid.autoSizeRows(0, this.grid.rows.length, false);
              setTimeout(() => {
                  if (focused) {
                      focused.focus();
                  }
              }, 300);
          }, 600);
      }
  
  
  }
  

  ---

  private handleFilters(item: any) {
  
  let ftNumbering = this.filter.numbering;
  
  if (ftNumbering && item.numbering.toLowerCase().indexOf(ftNumbering.toLowerCase()) < 0) {
  
  return false;
  
  }

      let ftDefinitionName = this.filter.definitionName;
      if (ftDefinitionName && item.definition.name.toLowerCase().indexOf(ftDefinitionName.toLowerCase()) < 0) {
          return false;
      }
  
      let ftpositionCfi = this.filter.positionCfi;
      if (ftpositionCfi) {
          if (item.positionCfi !== null) {
              if (item.positionCfi.toString().toLowerCase().indexOf(ftpositionCfi.toLowerCase()) < 0) {
                  return false;
              }
          } else {
              return false;
          }
      }
  
      let ftEngineItemDescription = this.filter.engineItemDescription;
      if (ftEngineItemDescription) {
          if (item.engineItemDescription !== null) {
              if (item.engineItemDescription.toString().toLowerCase().indexOf(ftEngineItemDescription.toLowerCase()) < 0) {
                  return false;
              }
          } else {
              return false;
          }
      }
  
      let ftWorkingInstructions = this.filter.workingInstructions;
      if (ftWorkingInstructions) {
          if (!isUndefined(item.workingInstructions) && item.workingInstructions !== null) {
              let filteredWorkingInstructions = item.workingInstructions
                  .filter((workingInstruction) => workingInstruction.content.indexOf(ftWorkingInstructions) > -1);
              if (filteredWorkingInstructions.length === 0) {
                  return false;
              }
          } else {
              return false;
          }
      }
  
      let ftTechDefinition = this.filter.techDefinition;
      if (ftTechDefinition) {
          if (!isUndefined(item.workingInstructions) && item.workingInstructions !== null) {
              let filteredWorkingInstructions = item.workingInstructions
                  .filter((workingInstruction) => {
                      let filteredDocumentLinks = workingInstruction.documentLinks
                          .filter((documentLink) => {
                              return (documentLink.name.indexOf(ftTechDefinition) > -1 ||
                              documentLink.tooltip.indexOf(ftTechDefinition) > -1 ||
                              documentLink.url.indexOf(ftTechDefinition) > -1);
                          });
                      return filteredDocumentLinks.length !== 0;
              });
              if (filteredWorkingInstructions.length === 0) {
                  return false;
              }
          } else {
              return false;
          }
      }
  
      let ftMeasurements = this.filter.measurements;
      if (ftMeasurements) {
          if ((!isUndefined(item.measurements) && item.measurements !== null) ||
              (!isUndefined(item.assignedFindings) && item.assignedFindings !== null)) {
              let hasFindings = true;
              if (!isUndefined(item.assignedFindings) && item.assignedFindings !== null) {
                  let filteredFindingss = item.assignedFindings
                      .filter((workingInstruction) => {
                          let hasMtuCode = true;
                          if (workingInstruction.mtuCode === null) {
                              hasMtuCode = false;
                          } else {
                              hasMtuCode =  workingInstruction.mtuCode.toString().indexOf(ftMeasurements) > -1;
                          }
  
                          let hasPssCode = true;
                          if (workingInstruction.mtuCode === null) {
                              hasPssCode = false;
                          } else {
                              hasPssCode = workingInstruction.pssCode.toString().indexOf(ftMeasurements) > -1;
                          }
                          return (workingInstruction.description.indexOf(ftMeasurements) > -1 ||
                              hasMtuCode ||
                              hasPssCode ||
                              workingInstruction.tag.indexOf(ftMeasurements) > -1);
                      });
                  if (filteredFindingss.length === 0) {
                      hasFindings = false;
                  }
              }
  
              let hasMeasurements = true;
              if (!isUndefined(item.measurements) && item.measurements !== null) {
                  let filteredMeasurements = item.measurements
                      .filter((measurement) => {
                          return (measurement.measurementMaximum.indexOf(ftMeasurements) > -1 ||
                          measurement.measurementMinimum.indexOf(ftMeasurements) > -1 ||
                          measurement.unit.indexOf(ftMeasurements) > -1);
                      });
                  if (filteredMeasurements.length === 0) {
                      hasMeasurements = false;
                  }
              }
  
              if (!hasFindings && !hasMeasurements) {
                  return false;
              }
          } else {
              return false;
          }
      }
  
      return true;
  }
  

• 

  webworx

  • Post Options:
  • Link
    Copy

  Posted 23 February 2018, 1:27 am EST

  Hi, i have solved it.

  In the compare of the filter value and the html Content value i use this method in order to get the plain text from the html column.

  public stripHtml(html) {
  
  // Create a new div element
  
  let temporalDivElement = document.createElement(‘div’);
  
  // Set the HTML content with the providen
  
  temporalDivElement.innerHTML = html;
  
  // Retrieve the text property of the element (cross-browser support)
  
  return temporalDivElement.textContent || temporalDivElement.innerText || ‘’;
  
  }