Highlight matched values with JSP syntax

5 posts, 0 answers
  1. Marcus
    Marcus avatar
    4 posts
    Member since:
    Apr 2016

    Posted 21 Apr Link to this post

    Hi all,

    I just started evaluating Kendo UI for JSP and I am very impressed by the quality of your concept.

    I have implemented the Autocomplete, ComboBox and DropDownList tags successfully, but I would like to highlight matches of the input value with the list items.

    My first try was to provide an extra field in the response data with embedded HTML markup, but that is being converted into entities: <em> becomes &lt;em&gt;. Is there a way to turn this kind of conversion off?

    To be sure, I found the example for client side formatting:

    String template = "<span class=\"k-state-default\" style=\"background-image: url(../resources/web/Customers/#:data.customerId#.jpg\"></span>" +
                      "<span class=\"k-state-default\"><h3>#: data.contactName #</h3><p>#: data.companyName #</p></span>";
     
    String valueTemplate = "<span class=\"selected-value\" style=\"background-image: url(../resources/web/Customers/#:data.customerId#.jpg\") ></span>" +
            "<span>#:data.contactName#</span>";
    %>
     
    <div class="demo-section k-content">
        <h4>Customers</h4>
        <kendo:dropDownList name="customers" headerTemplate="<%=headerTemplate%>" template="<%=template%>" valueTemplate="<%=valueTemplate%>"

    However, I've not managed to transfer this into JSP syntax.

    Could you please help me with this?

     

    Best regards

  2. Marcus
    Marcus avatar
    4 posts
    Member since:
    Apr 2016

    Posted 22 Apr in reply to Marcus Link to this post

    Sorry, just noticed I inserted the wrong example for client-side highlighting.

    It was meant to be this one:

    <script>
      $(document).ready(function () {
       var data = [
          "Albania",
          "Andorra",
          ... (other countries) ...
          "United Kingdom",
          "Vatican City"
        ];
        $("#countries").kendoAutoComplete({
          dataSource: data,
          filter: "startswith",
          placeholder: "Select country...",
          separator: ", ",
          template: $.proxy(kendo.template("#= formatValue(data, this.val()) #"), $("#countries"))
        });
      });
      function formatValue(itemText, text) {
        var textMatcher = new RegExp(text, "ig");
        return itemText.replace(textMatcher, function(match) {
          return "<strong>" + match + "</strong>";
        });
      }
    </script>

     

    How would I prepare a template in JSP syntax for client-side highlighting using remote data?

     

    Best regards

  3. UI for ASP.NET AJAX banner
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 26 Apr Link to this post

    Hi,

    Please accept my apologies for the delayed response.

    The example can be adapted to JSP by invoking the JavaScript function from the template as follows:
    <script>
    function formatValue(itemText, text) {
       var textMatcher = new RegExp(text, "ig");
       return itemText.replace(textMatcher, function(match) {
         return "<strong>" + match + "</strong>";
       });
     }
    </script>

    <kendo:autoComplete name="countries" filter="startswith" template="#= formatValue(data, $('\#countries').val()) #">
       ...
    </kendo:autoComplete>


    The client-side code remains without modifications. The template now invokes it with the only caveat that the # symbol must be escaped.
    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Marcus
    Marcus avatar
    4 posts
    Member since:
    Apr 2016

    Posted 26 Apr in reply to T. Tsonev Link to this post

    Hi, I'll try that.

    But more important was my first question:

    Is there a way of passing HTML tags within the data from the server to prepare highlighting there?

    I'm sure you provide some sort of attribute that suppresses the conversion of angular brackets to entities?

     

    Thanks for your help.

  6. Marcus
    Marcus avatar
    4 posts
    Member since:
    Apr 2016

    Posted 26 Apr in reply to Marcus Link to this post

    Just by chance, I ran across the option I was looking for:

    <kendo:grid-column encoded="false">
    </kendo:grid-column>

    If set to false, the 'encoded'-Attribute allows HTML-Tags within the remote data provided to pass untampered.

    This is important, since using templates seems to deactivate sorting and filtering for the column.

     

    Thank you, we can close this thread now.

Back to Top
UI for ASP.NET AJAX banner