Highlight matched values with JSP syntax

[Marcus]

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

[Marcus]

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

[T. Tsonev]

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

 

 

[Marcus]

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.

[Marcus]

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.