CODEWITHSUNDEEP
jquerykendo-uikendo-gridkendo-asp.net-mvc
John S.
John S.

Reputation: 31

How to Filter one column that contains 2 fields. Kendo Grid JQuery

Hello I have a Kendo Grid that takes in 2 fields FirstName and LastName. I am using a custom Template that concatenates both of these field together to create a function called formatName. This template creates a column in the grid called Name which has FirstName and LastName Field. My question is when i put in filterable property in the name column it only searches for First Name. How can i set the filterbox to search for both firstName and LastName fields. Im not sure how kendo will read both field because i can only put FirstName or LastName but not both?

  $("#grid").kendoGrid({
        autoBind: true,
        dataSource: {
            data: tempData,
            pageSize: 5
        },
        filterable: {
            mode: "row"
        },
        columns: [
            { title: "Name", field: "FirstName", template: formatName, width: "250px", filterable: { cell: { showOperators: false } } },],
        
    });
}

var tempData = [{
    FirstName: "John",
    LastName: "Doe"
},
{
    FirstName: "Jane",
    LastName: "Sally"
    },];


export function formatName(data: any) {
    return "<b>" + data.LastName.toUpperCase() + "</b>, " + data.FirstName.toUpperCase();
}

Upvotes: 1

Views: 558

Answers (1)

Martin D.
Martin D.

Reputation: 2110

The column filter will only search in the field the column is bound to. You could add a FullName property to your model and bind the column it.

$("#grid").kendoGrid({
    autoBind: true,
    dataSource: {
        data: tempData,
        pageSize: 5
    },
    filterable: {
        mode: "row"
    },
    columns: [
        { title: "Name", field: "FullName", template: formatName, width: "250px", filterable: { cell: { showOperators: false } } },],
    
});
}

var tempData = [{
   FirstName: "John",
   LastName: "Doe",
   FullName: "John Doe"
},
{
   FirstName: "Jane",
   LastName: "Sally",
   FullName: "Jane Sally"
},];


export function formatName(data: any) {
    return "<b>" + data.LastName.toUpperCase() + "</b>, " + data.FirstName.toUpperCase();
}

Upvotes: 1

Related Questions