Distinct values in a dropdownlist from a shared data source

[Sachin]

I am new to kendo and I am in a situation where I have a kendo grid bound to a data source and I need to add a custom filter to it. 

The filter should have a dropdownlist that has distinct values from the column "Issuer".  How can I achieve this without making another server call to get distinct Issuer values. I want to bind the dropdownlist to the existing data source which already has all the data. Please suggest.

Here's my code:

$("#DivGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "/DataView/GetData",
                            dataType: "json"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                            else if (options) {
                                var kendoString = kendo.stringify(options);
                                return { models: kendoString };
                            }
                        }
                    },
                    pageSize: 10,
                    schema: {
                        model: {
                            tranId: "id",
                            fields: {
                                tranId: { editable: false, nullable: false },
                                issuer: { editable: false },

                                dateAdded: { editable: false, type: "date" }                            

                            }
                        }
                    }
                },
                filterable: true,
                columns: [              
                    {

                        field: "tranId",
                        title: "TranId",
                        width: "30px",
                    },
                    {
                        field: "issuer",
                        title: "Issuer",
                        width: "50px",
                    },
                    {
                        field: "dateAdded",
                        title: "Created Date",
                        format: "{0:MM-dd-yyyy hh:mm:ss}",
                        width: "40px",
                    },
                ],
                dataBound: function (e) {
                    //something
                },
                pageable: {
                    alwaysVisible: false,
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 3
                },              
            });

[Veselin Tsvetanov]

Hello Sachin,

If no server filtering or paging is applied to the items in the Grid DataSource, you could retrieve them using the data() method of the DataSource object. Then you could get the unique values and pass them as a DataSource for the filter DropDownList in question. All that should happen in the Grid dataBound event handler, when all items are already available in the Grid:

dataBound: function (e) {
  e.sender.unbind('dataBound');
  var dataSource = e.sender.dataSource;
  var data = dataSource.data();
  var ddlSource = [];
  for(var i = 0; i < data.length; i++) {
    var currentIssuer = data[i].issuer;
    if (!ddlSource.includes(currentIssuer)) {
      ddlSource.push(currentIssuer);
    }
  }
  $('#dropdown').kendoDropDownList({
    dataSource: {
      data: ddlSource
    },
    optionLabel: "Select issues to filter",
...

The filtering logic itself should be implemented in the DropDownList change event handler:

change: function(e) {
  var selected = e.sender.value();
  var grid = $("#DivGrid").getKendoGrid();
  var gridDataSource = grid.dataSource;
  var filter;

  if (selected) {
    filter = {
      field: "issuer",
      operator: "eq",
      value: selected
    };
  } else {
    filter = {};
  }

  gridDataSource.filter(filter);
}

Here you will find a Dojo sample implementing the above.

Regards,
Veselin Tsvetanov
Progress Telerik