This is a migrated thread and some comments may be shown as answers.

Filtering Doesn't Work Using a Template

1 Answer 655 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Alex asked on 05 Jun 2014, 09:55 PM
I have a column called Due that contains a date from the server. On the client I use SetValAndColorForDue() to change the date to a the number of hours from today and I change the color to either Red or Black.

When I implement SetValAndColorForDue in the grid { field: "Due", title: "Due", width: 100, template: '#=SetValAndColorForDue(Due)#' , as seen below, the filtering doesn't work at all. I can see the filter options just that when I filter by the output nothing happens.      

function SetValAndColorForDue(dueDate) {
    var a = moment();
    var b = moment(dueDate);
    var duration = a.diff(b, 'hours');         
    if (duration > 24){
        return "<font color=\"red\">" + duration + " </font>";
    else {
        return duration;

The grid: Focus on the BOLD code below.
$(document).ready(function () {
               var selectedCaseID = 43;            
                   height: 600,
                   columns: [
                       { field: "Status", title: "Status", width: 100 },
                       { field: "FullName", title: "Full Name", width: 220 },
                       { field: "Due", title: "Due", width: 100, template: '#=SetValAndColorForDue(Due)#' },                    
                   selectable: "row",
                   pageable: {
                       info: true
                   }, // enable paging
                   filterable: true, // enable filtering
                   sortable: true, // enable sorting                 
                   //toolbar: ["create", "save", "cancel"], // specify toolbar commands
                   dataSource: {
                       serverPaging: true,
                       serverSorting: true,
                       serverFiltering: true,
                       pageSize: 50,
                       schema: {
                           data: "d.Data", // web methods return JSON in the following format { "d": <result> }. Specify how to get the result.
                           total: "d.Total",
                           model: { // define the model of the data source. Required for validation and property types.
                               id: "InvestigationID",
                               fields: {
                                   InvestigationID: { type: "string" },
                                   Status: { type: "string" },
                                   FullName: { type: "string" },
                                   Priority: { type: "string" },
                                   Created: { type: "string" },
                                   Due: { type: "string" },
                                   LastActivityDate: { type: "string" },
                                   LastActivityBy: { type: "string" }
                       transport: {
                           read: {
                               url: "/InvestigationDesign.aspx/Investigations", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.
                               contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON
                               type: "POST" //use HTTP POST request as the default GET is not allowed for web methods
                           parameterMap: function (data, operation) {
                               if (data.models) {
                                   return JSON.stringify({ products: data.models });
                               } else if (operation == "read") {
                                   //Page methods always need values for their parameters
                                   data = $.extend({caseid: selectedCaseID, sort: null, filter: null }, data);
                                   return JSON.stringify(data);
               var grid = $("#grid").data("kendoGrid");
               // Handles double click of grid.
               $("#grid").on("dblclick", "tr.k-state-selected", function () {
                   var model = grid.dataItem(;
         "Investigation/DefaultAngularTest.aspx?invID=" + model.InvestigationID, "_blank");

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 09 Jun 2014, 08:00 AM
Hi Alex,

Please avoid posting duplicate forum threads and support tickets. In case you really need to do so, please mention it explicitly in at least one of the two threads. Thank you.


Filtering is performed over the original data item value (which is a date in your case, but the field type is defined as a string). If you expect the filtering to work over the customized table cell value (number of hours), then I am afraid it cannot work that way out-of-the-box. You will need to have the number of hours as part of the server datasource to achieve the desired behavior. An alternative approach is to use custom filtering UI with a numeric textbox ...

... and then handle the submitted numeric argument serevr-side for correct filtering.

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question