Filtered options contain HTML

[Chris]

Hello everyone,

I have an interesting dilemma.

 

I have a  database column that contains HTML.  I have encoded set to false and it appears as it should on the grid.

The issue is I have a filter on the row set to contains and whenever you type in the filter box it is displaying the html instead of the text within the html. Ex:  <h1>Test</h1> instead of just Test

I understand why this is happening but I was wondering if anyone had a way to "encoded: false" on the filter dropdown "results" so that the filtered suggestions would only contain text and not the HTML tags

[Anton Mironov]

Hi Chris,

Thank you for the provided details.

Indeed this behaviour is expected because the grid dataSource utilizes the data for the filter and the filterable ui. It is possible to provide your own filterable.cell.template and use the widget's capabilities to render templates, for example here is a runnable Dojo with a DropDownList that contains HTML in its data. Just using the "#=#" syntax renders the values as HTML:

https://dojo.telerik.com/@bubblemaster/EHaBeTIQ

filterable: {
              cell: {
                enabled: true,
                delay: 1500,
                template:function(args){
                  args.element.kendoDropDownList({
                    dataSource: args.dataSource,
                    optionLabel:"--Select--",
                    dataTextField: "name",
                    dataValueField: "name",
                    valuePrimitive: true,
                    template: "#=name#",
		    valueTemplate:"#=name#"
                  });
                }
              }
            },

However, to avoid other issues I would recommend the following:

1. Try to avoid keeping the HTML attributes in the DataBase. It is always followed by problems when using the data in the Front End part of the application. If the improvements for the table property in the DataBase is now difficult to be made, try to create a new property, where only he needed data is represented and follow the second step of my responce.

2. In order to achieve the needed behavior try using the column.template property. This approach will work for both the field and the filter values. Here is an example:

  columns: [ {
    field: "name",
    template: "<strong>#: name # </strong>",filterable: {
            cell: {
              operator: "contains",
              suggestionOperator: "contains"
            }
          } 
  }]

The full implementation of the approach above could be found in the following dojo example:

• https://dojo.telerik.com/irePOwuR

Give the above approach a try, and let me know if it works for you, or we should look for another solution.

Kind Regards,
Anton Mironov
Progress Telerik

[Chris]

Thanks for the reply I will look at this but I am not sure it is exactly what I am looking for.  My field is a rich text field that I want to be able to use contains to filter.

The cell renders just fine without HTML showing.  That is not the issue.  

 

The issue is when using the filter in the dropdown for suggested results/autocomplete on the filter it displays the html.

 

(see the attached pics)

 

Will your template solution do this?  I don't have an option on how the data is stored. (SharePoint)

[Georgi]

Hello Chris,

Generally speaking, storing html in the database is not a good idea. Furthermore, a best practice is to html encode everything before displaying it.

As for the filter, even if the html is not escaped and the browser renders the elements, on data level the html characters are still present. Which means that it will confuse your clients as they will filter the "Test" value, but underneath the value is " <h1>Test</h1>" which means that their search will result in no matches.

What I would suggest is to map the data from the SharePoint and remove all HTML elements from it. Then if you still want to style something, use some layout configuration to customize the appearance of the displayed data.

 

Regards,
Georgi
Progress Telerik

[Chris]

You are not answering my question.

We can have a philosophical debate about database design and best practices in another forum.  This has been done for decades on dynamically generate websites so I am not sure your statement holds water on whether this is a good idea.  Regardless as I mentioned I have no control over what is stored in the database or how it is stored for that matter in this instance. 

To your point of Encoding it before it is displayed.  I am displaying it properly.  That is not the issue.

I want to be able to hide the html in the suggestions generated by the filter. The equivalent of your "encode: false" on the grid cell.   If this is not possible then just say so.

If your suggestion is that I strip out all the html before displaying it in a grid then you would lose all formatting for that cell.  That defeats the purpose of having the html in the cell in the first place.  And before you suggest creating a template for the cell that is not possible either as the data is freeform text from a rich text field and is not uniform across every row.

[Georgi]

Hello Chris,

The short answer is yes, you can avoid encoding the values using a template handler as shown in the following sample:

• https://dojo.telerik.com/OnedIPEl

However, the issue I mentioned earlier still remains, when the user types "Test" he will expect all records which appear with the same value to match, however, on data level they are "<h1>Test</h1>", thus the filter will not work as expected. If you test the above you will notice that once you type "j" nothing matches.

To avoid this misbehavior I would suggest you to create a drop down instead of the autocomplete as shown in the following sample:

• https://dojo.telerik.com/ivUqAzOS/2

I hope this helps.

 

Regards,
Georgi
Progress Telerik