Passing / reading a value on the dropdown list

[Philip]

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);
}

 

[Ivan Danchev]

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

[Philip]

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?

[Ivan Danchev]

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

[Philip]

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

[Ivan Danchev]

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