Filter local Kendo datasource based on other attri

Question

I have a LOCAL Kendo datasource which has the following values:

var dataSourceSearchOperators = new kendo.data.DataSource({
    data: [
    { OPERAND: "=", DATATYPE: "num", INFO: "Equal", OPERATOR: "eq" },
    { OPERAND: "<>", DATATYPE: "num", INFO: "Not Equal", OPERATOR: "nq" },
    { OPERAND: ">", DATATYPE: "num", INFO: "Greater Than", OPERATOR: "gt" },
    { OPERAND: "CW", DATATYPE: "text", INFO: "Contains Word", OPERATOR: "contains" },
    { OPERAND: "CP", DATATYPE: "text", INFO: "Contains Partial", OPERATOR: "" },
    { OPERAND: "NC", DATATYPE: "text", INFO: "Does Not Contain", OPERATOR: "" },
    ],
});

I have a dropdownlist bound to a remote Kendo datasource and I want to set up filtering on that remote datasource based on the selected value's DATATYPE from the local one. Both datasources share the common attribute DATATYPE. I am basically filtering the results for a second DDL. For example:

DDL1 selected value is <>. Then only show me the values in DDL2 (the remote datasource is filtered) with DATATYPE='num'.

I don't want to use the cascade functionality. (using javascript).

Thanks!

Answer 1

You just need to watch for the select event on your dropdown. When the value changes, get the operator from the selected item, build a filter object out of it, and pass it into DataSource.filter() on your remote datasource.

Working jsFiddle.

var dataSourceSearchOperators = new kendo.data.DataSource({
    data: [
    { OPERAND: "=", DATATYPE: "num", INFO: "Equal", OPERATOR: "eq" },
    { OPERAND: "<>", DATATYPE: "num", INFO: "Not Equal", OPERATOR: "neq" },
    { OPERAND: ">", DATATYPE: "num", INFO: "Greater Than", OPERATOR: "gt" }
    ]
});

var dataSourceToFilter = new kendo.data.DataSource({
    data: [
        { value: 1 },
        { value: 2 },
        { value: 3 },
        { value: 4 }
    ],
    schema: {
        model: {
            value: { type: "number" }
        }
    }
});

var onFilterOperatorSelected = function (selectEvent) {
    var operator = selectEvent.sender.dataItem(selectEvent.item.index()).OPERATOR;
    var filter = {
        field: "value",
        operator: operator,
        value: 2
    };
    dataSourceToFilter.filter(filter);
};

$("#operators").kendoDropDownList({
    dataSource: dataSourceSearchOperators,
    dataTextField: "INFO",
    dataValueField: "OPERAND",
    select: onFilterOperatorSelected
});

$("#list").kendoListView({
    dataSource: dataSourceToFilter,
    template: "<li>${value}</li>"
});