This is a migrated thread and some comments may be shown as answers.

How to use filter within an observalble object?

2 Answers 377 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Florian
Top achievements
Rank 1
Florian asked on 01 Nov 2012, 12:46 PM
Hello,

how can I use the filter in a declarative notation? I am using a dropDownList the following way:

<select data-role="dropdownlist" data-text-field="Name" data-value-field="Id" data-bind="source: data, value: myId" data-source="{filter: {field:'Id', operator:'eq', value:'this.myId'}}"></select>

Within JavaScript:
var viewModel = kendo.observable({
data:[{Id:"1", Name:"a"}, {Id:"2", Name:"b"}, {Id:"3", Name:"c"}, ],
myId:2
});
kendo.bind($("#example"), viewModel);

But this does not work! How can I reference the myId parameter within the viewModel?
The filter works if I hardcode a value (e.g. if I write '2' instead of 'this.myId')

-----------------------------------

I added a short sample with 2 select widgets. The options of the second select widget are dependent on the first select widget.
But this sample does not work.
Can you tell me why?

http://jsfiddle.net/hollomey/fJH8P/18/

How can I filter the options of the 2nd select widget dependent on the selection value of the 1st one?
And how can I make the 2nd select widget to change automatically when a different selection is made in the 1st select widget?
And is it possible to code this sample with a filter on the dataSource?

-----------------------------------

In the next sample I use a change event in the 1st select widget. But the alert-box shows always the value from the previous selection, never the current one. And the close event hangs up the application...
There is also an update problem with the 2nd select widget when changing the selection multiple times...
What's wrong with this code?

http://jsfiddle.net/hollomey/fJH8P/26/

Thanks for your help
Florian

2 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 06 Nov 2012, 12:30 PM
Hi Florian,

I have already replied to your questions in the support thread that you have submitted on the same subject. I will paste my reply here as well so the other users who are interested in the subject could read it.

The recommended approach to implement such scenario is through the cascadeFrom option or by manually filtering the DataSource (if you need a more customized filtering). This is demonstrated in cascading drop down example.

Here is a jsFiddle that demonstrates the scenario - http://jsfiddle.net/valchev/fJH8P/50/

Regarding the filter initialization, data-attributes are used to define the configuration options and cannot be changed dynamically. In other words the change of the this.myId value will not affect the DataSource after the initialization of the widget. It is recommended to initialize the dataSource through JavaScript and pass only the variable name as a data-source attribute.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Florian
Top achievements
Rank 1
answered on 07 Nov 2012, 11:40 AM
Here is a complete working solution concerning my topic: "How to use dynamic filter in a declarative notation?"

http://jsfiddle.net/hollomey/fJH8P/74/

The sample shows:
a) Applying a filter on a dataSource depending on a selected value
b) Changing the displayed text of a selection widget depending on a selection

Florian
Tags
MVVM
Asked by
Florian
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Florian
Top achievements
Rank 1
Share this question
or