Kendo Input with big dataSource

Question

I have create a Kendo Grid, and a custom Form for selected row of grid. Using AngularJS, i stored to 'formData' variable the selected row data. For example

$scope.fromData = {   uid: guid,   id:  guid,   name: string,   otherEntityId: guid }

Now in my form i have a KendoDropDown input for the 'otherEntityId'. Using dataTextField and dataValueField, i want to look in other datasource and based to foreign key display other property.

      dataTextField: "Name",
      dataValueField: "otherEntityId",

For example i have one entity person with { id: guid, name: string, cityId: guid} And another entity cities with { name: string, id: guid }

Where the first cityId is the same of second entity id.

In my form this works, i have the id from the first datasource and in my input i display the name based to id, its like 'look up' field.

The problem is that the datasource of my second entity is too large, and i cannot load at once.

I want an mechanism that, for every selection of row in grid, the input will send a request with filter in datasource like

dataSource.filter = { field: dataValueField, operator: "eq", value: $scope.formDataItem[dataValueField] };

And when the user click to see more options of dropdownlist input i want to have other filter with 'startswith' like

dataSource.filter = { field: dataTextField, operator: "startswith", value: getInput().text() };

How can do it? How can change the filters of datasource on open event?

GomuGomuNoRocket GomuGomuNoRocket · Accepted Answer · 2017-04-21T11:59:39

I use the filtering event. So.. when i initiliaze value i have in datasource filter with guid so can load only one item and when the filtering event called i change filters and works fine.

     $scope.options.filtering = function (e) {

            e.preventDefault();
            if (prevText.length >= minLength) {
                delete dataSource.filter;
                dataSource.filter = { field: dataTextField, operator: "startswith", value: getInput()._prev};
                getInput().setDataSource(dataSource);
            }
            else
                getInput().setDataSource({ data: [] });

    }

Kendo Input with big dataSource

1 Answers