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.

Answer 1

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--"
                })
            };

        });

Answer 2

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.