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

Passing / reading a value on the dropdown list

5 Answers 492 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Philip
Top achievements
Rank 1
Philip asked on 17 Mar 2017, 09:17 PM

I'm totally stuck

I have a simple dropdownlist 

<input class="span-full" data-role="dropdownlist" data-bind="events: {open: getProps }, value: '+ __cols[n].name +' ">

That I want to tie to a open event

getProps: function(e){
             console.log(e.sender);
}

When I click on the dropdown list I need to find out it's id or value is? How do I do that?

Something like?

getProps: function(e){
            // Find out whom I am

             console.log("Hello me" + value);
}

 

5 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 20 Mar 2017, 07:03 AM
Hello Philip,

In the DropDownList's open event handler you can access the widget's instance through the event data (e.sender) and then get the selected item's value by calling the widget's value method:
e.sender.value();

or the selected item's text by calling the text method:
e.sender.text();


Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Philip
Top achievements
Rank 1
answered on 20 Mar 2017, 12:14 PM

Thanks so much for your response. 

I tried both of those evens and I'm getting a black (empty) response from. I'm passing in the value (which is dynamic) like so. 

<input class="span-full" data-role="dropdownlist" data-bind="events: {open: getProps }, value: '+ __cols[n].name +' ">

Is there something I'm doing wrong there?

0
Ivan Danchev
Telerik team
answered on 22 Mar 2017, 11:26 AM
Hello Philip,

I am not sure what the value of  __cols[n].name is, but here's a sample dojo, in which getting the value and text works as expected. Initially 2 is set as a value (selectedProduct), which selects the item with text Chang (its ProductID is 2), on open the values are not empty and subsequent selection and re-opening of the dropdown correctly logs the corresponding item's text and value. Could you reproduce the issue in the dojo example and link it back for further review?

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Philip
Top achievements
Rank 1
answered on 22 Mar 2017, 07:11 PM

hey guys,

 

Thanks so much for the feedback and examples. I think this is a case of my question not being clear enough. Anyhow, I was able to figure out what I needed to do by using the dynamically creating a new bind property using this method:

 

kendo.data.binders.widget.entity = kendo.data.Binder.extend({
            init: function (element, bindings, options) {
              let en = bindings.entity.path;
              element.entity = en;
            },
            refresh: function () {}
        });

 

I found it digging through the docs. The issue I was trying to solve was passing a variable (in this case called "entity" to my function "getProps")

 

<select class="span-full" id="drop-down-list" data-name="'+ __cols[n].name +'" data-value="" data-type="'+__cols[n].type+'" data-role="multiselect" data-bind="events: {open: getProps }, source:odata_dd_'+__cols[n].type+', entity: '+ __cols[n].type +'" data-text-field="Name" data-value-field="Name"></select>

getProps: function(e){
                let _entity = e.sender.entity; <-- this is what I needed 
                let  data = grabNavRecords(_entity);
                data.then((res) => {
                    this.set('odata_dd_'+_entity, res.value);
                }, function(err){
                    console.log('failed');
                });

            }

 

Anyhow, I got it working now. Thanks again

0
Ivan Danchev
Telerik team
answered on 24 Mar 2017, 11:36 AM
Hi Philip,

Thank you for getting back to us. I am glad you managed to find the correct approach with using custom MVVM binding for your scenario.

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Philip
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Philip
Top achievements
Rank 1
Share this question
or