Filtering a Grid's Template Column based on DropDownList value in ToolBar

[Shawn]

Hello,

On my grid's toolbar I have a drop-down list box.  Within my grid I have a template column that displays the aggregate of three other columns.  When the user selects a value from the drop-down list box I want to filter the grid based on the value that's in the template column.  How do I achieve this?

        @(Html.Kendo().Grid<Models.GridData>()
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.ColumnA).Width(110).HeaderHtmlAttributes(new { style = "text-align: center;" }).Filterable(false);
                columns.Bound(c => c.ColumnB).Width(110).HeaderHtmlAttributes(new { style = "text-align: center;" }).Filterable(false);
                columns.Bound(c => c.ColumnC).Width(110).HeaderHtmlAttributes(new { style = "text-align: center;" }).Filterable(false);
                columns.Bound("").ClientTemplate("#=calculateField(data)#").Title("Total").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(110).Filterable(false);
            })
            .ToolBar(toolbar =>
            {
                toolbar.ClientTemplateId("GridToolbarTemplate");
            })
...

 

Here's the code for "GridToolbarTemplate"

<script id="GridToolbarTemplate" type="text/x-kendo-template">
    <div style="float:left;">
        <button class="k-button k-grid-add">New Item</button>
    </div>
    <div style="float:right;">
        <label class="category-label" for="category">Threshold:</label>
        @(Html.Kendo().DropDownList()
                        .Name("thresholds")
                        .OptionLabel("All")
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Events(e => e.Change("thresholdChange"))
                       .BindTo(new List<SelectListItem>()
                        {
                            new SelectListItem() {
                                Text = "3", Value ="3"
                            },
                            new SelectListItem() {
                                Text = "4", Value ="4"
                            },
                            new SelectListItem() {
                                Text = "5", Value ="5"
                            }
                        })
                        .ToClientTemplate()
        )
    </div>
</script>

 

The following is my JavaScript for the toolbar and the template column:

function calculateField(data) {
    var result = data.ColumnA + data.ColumnB + data.ColumnC;
    return result;
}

$(function () {
    var grid = $("#Grid");
    grid.find(".k-grid-toolbar").on("click", ".k-grid-add-row", function (e) {
        e.preventDefault();
        grid.data("kendoGrid").dataSource.read();
    });
});

function thresholdChange() {
    var value = this.value(),
        grid = $("#Grid").data("kendoGrid");

    if (value) {
        grid.dataSource.filter({ field: "Total", operator: "gte", value: parseInt(value) });
    } else {
        grid.dataSource.filter({});
    }
}

 

Your help is appreciated.  Thanks.

Shawn A.

 

 

 

[Viktor Tachev]

Hi Shawn,

In order for a filter to be applied to the Grid the value entered in the filter is matched to the underlying data in the dataSource. However, in this scenario the calculated column is not bound to any field and the value in it is calculated client-side. 

For using the built-in Grid filtering for that column I would suggest couple of approaches. The first option is to create a ViewModel and include the calculated field to it. The data in that field will be calculated server-side before the data is returned to the Grid. 

Another option is to use the jQuery Grid widget and define a schema.parse function. This way an additional field can be added to the server response and the result passed to the Grid. The dojo below outlines this approach:

• https://dojo.telerik.com/AREvEWih/2

Regards,
Viktor Tachev
Progress Telerik

[Shawn]

Hello Viktor,

Thanks for your reply!  You suggestion to use a ViewModel worked for me.  Thanks!

Regards,

Shawn A.