'Kendo UI grid with template column and filtering

I have a kendo grid in which I need to show a column with concatenated values. Obviously, I need to choose a row template or a template field in a columns attribute.

{
    title: "StreetID-STREETNAME", 
    filterable: true, 
    template: "#: strID#-#: strName #" 
},

But after running it I am not able to see any filter icon on the particular grid column.

Any clue or link will help me in a great way. After lot of R&D I couldn't see any live examples using template columns with a filtering.

jquerykendo-uikendo-grid


Solution 1:[1]

This shows how you can customize a grid filter.

http://demos.telerik.com/kendo-ui/web/grid/filter-menu-customization.html

In the grid configuration:

{
    field: "City",
    width: 130,
    filterable: {
        ui: cityFilter
   }
},

Filter UI function:

function cityFilter(element) {
    element.kendoDropDownList({
        dataSource: cities,
        optionLabel: "--Select Value--"
    });
}

Solution 2:[2]

Check out this sample. Copy and paste the code below and save it as index.html.

<!DOCTYPE html>
<html>
<head>
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <style>
        .photo {
            width: 140px;                    
        }
        .details {
            width: 400px;
        }                
        .title {
            display: block;
            font-size: 1.6em; 
        }
        .description {
            display: block;
            padding-top: 1.6em;
        }
        .employeeID {
            font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            font-size: 50px;
            font-weight: bold;
            color: #898989;
        }
        td.photo, .employeeID {
            text-align: center;
        }
        .k-grid-header .k-header {
            padding: 10px 20px;
        }
        .k-grid td {
            background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
            background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            padding: 20px;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: { 
                            url: "http://demos.kendoui.com/service/Northwind.svc/Employees"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                EmployeeID: { type: "number" },
                                Title: { type: "string" }
                            },
                            id: "EmployeeID"
                        }
                    }
                },
                columns: [
                    { field: "Title", width: 400 }, 
                    { field: "EmployeeID" }
                ],
                rowTemplate: kendo.template($("#rowTemplate").html()),
                height: 430,
                filterable: true
            });
        });
    </script>
</head>
<body>
    <div id="grid"></div>

    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr>
            <td class="details">
                <span class="title">#: Title #</span>
                <span class="description">Name : #: FirstName# #: LastName#</span>
                <span class="description">Country : #: Country# </span>
            </td>
            <td class="employeeID">
                #: EmployeeID #
            </td>
        </tr>
    </script>
</body>
</html>

You need to customize it. Hope this helps you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 CarenRose
Solution 2 CarenRose

Related Questions