Filtering Doesn't Work Using a Template

[Alex]

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;

               $("#grid").kendoGrid({
                   height: 600,
                   columns: [
                       "InvestigationID",
                       { field: "Status", title: "Status", width: 100 },
                       { field: "FullName", title: "Full Name", width: 220 },
                       "Priority",
                       "Created",
                       { field: "Due", title: "Due", width: 100, template: '#=SetValAndColorForDue(Due)#' },
                       "LastActivityDate",
                       "LastActivityBy"
                   ],
                   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(grid.select());
                   window.open("Investigation/DefaultAngularTest.aspx?invID=" + model.InvestigationID, "_blank");
               });

           });

[Dimo]

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 ...

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns-filterable-ui

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

Regards,
Dimo
Telerik