0

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!

ripsin
  • 273
  • 2
  • 7
  • 19

1 Answers1

0

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>"
});
CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138
  • This was not exactly what I was looking for, but I managed to use the select event as you mentioned to do my filter. This was a helpful example. The only part I am stuck on is applying the filter to dropdown2 which is populated by datasource2 (my local datasource showing all) based on the current value in dropdown1 (remote datasource). If you look at my example, I want to get the 'DATATYPE' from dropdown1 and apply it to dropdown2 results. Hope that makes sense. – ripsin Oct 28 '13 at 08:08
  • Wouldn't that be basically the same thing? If DDL2 is bound to a DataSource, lets call it `ddl2DataSource` then you would just do: `ddl2DataSource.filter({ field: 'DATATYPE', operator: 'eq', value: ddl1SelectedItem.DATATYPE });` right? Or am I missing something else? Can you put all this into a jsFiddle or jsBin as an example? – CodingWithSpike Oct 28 '13 at 23:53
  • I apologize if this is not as optimized as possible, but here you can see what I'm working with. If you have suggestions how I can make it less complicated as well, that would be awesome too. Thanks for your help, looking forward to your reply. [JSFiddle link](http://jsfiddle.net/ripsin/pKFH6/) – ripsin Oct 29 '13 at 09:32