Filtered options contain HTML

6 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Mar 2015

    Posted 21 Sep 2020 Link to this post

    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

  2. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 23 Sep 2020 Link to this post

    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:

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Chris
    Chris avatar
    5 posts
    Member since:
    Mar 2015

    Posted 23 Sep 2020 in reply to Anton Mironov Link to this post

    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)

  4. Georgi
    Admin
    Georgi avatar
    698 posts

    Posted 25 Sep 2020 Link to this post

    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

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

  5. Chris
    Chris avatar
    5 posts
    Member since:
    Mar 2015

    Posted 25 Sep 2020 in reply to Georgi Link to this post

    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.

  6. Georgi
    Admin
    Georgi avatar
    698 posts

    Posted 25 Sep 2020 Link to this post

    Hello Chris,

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

    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:

    I hope this helps.

     

    Regards,
    Georgi
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top