fill the filter values of a column by it's own values in kendo

Question

I have a kendo grid which is filled with some JSON data, in the filter window in the grid, you can select a condition Type and then fill the condition value text box and then filter the grid based on your selection.

now I have a column that is filled with just four or five different value. I want to make the condition value field of the filter section to become a drop-down list and instead of writing those values to select them, I want to choose them from the list. ( I mean in the filter section of the grid column, not in the column itself.)

I read an article which was like what I wanted, but it had added those values in the code, I should notify you that those fields are not the same each time, so I can't write those value in the filter by hard coding.

even something like this one is very similar to what I wanted ( Filter Condition Created For 'City' Field ), but it's using a different source for getting the condition drop-down values, not grid column itself.

in addition, I can't use JSON data, I must use the information from the kendo grid.

thanks in advance.

score 3 · Accepted Answer · answered Jun 25 '17 at 10:32

I found the solution to my problem at last...

after binding the grid to the data source, by setting a loop on the data source of the grid, I take data of one column of the grid and push it to an array, then I set the filter on that column to the array.

 <script type="text/javascript">

        var arrayName = [];

        $(function () {
            var productsDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "api/products",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        type: 'GET'
                    },
                    parameterMap: function (options) {
                        return kendo.stringify(options);
                    }
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    model: {
                        fields: {
                            "Id": { type: "number" }, 
                            "Name": { type: "string" },
                            "IsAvailable": { type: "boolean" },
                            "Price": { type: "number" }
                        }
                    }
                },
                error: function (e) {
                    alert(e.errorThrown);
                },
                sort: { field: "Id", dir: "desc" },
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

            productsDataSource.read(); 

            $("#report-grid").kendoGrid({

                dataSource: productsDataSource,
                dataBound:
                function (e) {
                    var data = $("#report-grid").data("kendoGrid").dataSource._data;
                    for (i = 0; i < data.length; i++) {
                        arrayName.push(data[i].Name);
                    }
                }, 
                autoBind: false,
                scrollable: false,
                pageable: true,
                sortable: true,
                filterable: { extra: false },
                reorderable: true,
                columnMenu: true,
                columns: [
                    { field: "Id", title: "No", width: "130px" },
                    { field: "Name", title: "ProductName", filterable: { ui: SystemFilter } },
                    {
                        field: "IsAvailable", title: "Available",
                        template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
                    },
                    { field: "Price", title: "Price", format: "{0:c}" }
                ]
            });

            function SystemFilter(element) {
                element.kendoDropDownList({
                    dataSource: arrayName,
                    optionLabel: "--Select Name--"
                })
            };

        });

Worked for me. However, i was using a custom dropdown list for grid-column which i added outside grid on data bound, i called my function to fill dropdown like SystemFilter($('#myDropdown')) — Atta H., Mar 13 '19 at 15:00

score 0 · Answer 2 · answered Jun 20 '17 at 18:05

0

One way that I like to do this is to create a list of my values and add that list to ViewData, which then gets passed to the View.

public IEnumerable<ModelName> GetTypes()
{
    //Get data from the table you store your values in.
    return dbContext.TypesTable.OrderBy(f => f.Name);
}

public ActionResult YourView()
{
    IEnumerable<ModelName> types = GetTypes();
    ViewData["MyTypes"] = types;
    return View();
}

Then in your grid add a ForeignKey column and set it to look at the ViewData you set earlier.

@(Html.Kendo().Grid<ViewModelName>()
    .Name("GridName")
    .Columns(columns =>
    {
        columns.ForeignKey(c => c.RecipientType, (System.Collections.IEnumerable)ViewData["MyTypes"], "TypeId", "Name");
    })
)

This column will now display the Name of your value for the current records. Then when you go to edit or add a record, this field will display as a dropdown with all of the possible values.

answered Jun 20 '17 at 18:05

ShawnOrr

1,249
1
12
24

thanks for your answer, but I want to add distinct values of a column to the filter section of the column as a drop-down list, not in the grid itself. – Farzad Karimi Jun 21 '17 at 04:34
I see what you're asking for now. However, this code will still do what you want. The filter will use the items you provide in the ViewData and show as a dropdown. – ShawnOrr Jun 21 '17 at 17:51
OK, how i must fill the ViewData with the data of one column of the grid ? – Farzad Karimi Jun 23 '17 at 03:34
In my example above, I'm selecting the values out of my database with the `GetTypes()` method and into the IEnumerable object called 'types'. Then I store my ViewData with that object like this `ViewData["MyTypes"] = types`. This is assuming you have these "four or five different values" stored in a separate table. That way you can use the unique id field from that table as the foreign key column in your grid, like I've done above. Also if you could update your original post with the name of your column and what the possible values for this column are. That may help with any confusion. – ShawnOrr Jun 23 '17 at 17:40
I don't want to fill the column of grid separately, the grid will get filled completely at first with a method, then I want to fill the filter section of that column ( for example with the name of 'status' ) with data that filled to that column, not any other source. I want to get the data from the grid. – Farzad Karimi Jun 24 '17 at 04:12

fill the filter values of a column by it's own values in kendo

2 Answers2