Passing / reading a value on the dropdown list

6 posts, 0 answers
  1. Philip
    Philip avatar
    8 posts
    Member since:
    Mar 2017

    Posted 17 Mar 2017 Link to this post

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

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1749 posts

    Posted 20 Mar 2017 Link to this post

    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.
  3. Philip
    Philip avatar
    8 posts
    Member since:
    Mar 2017

    Posted 20 Mar 2017 in reply to Ivan Danchev Link to this post

    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?

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1749 posts

    Posted 22 Mar 2017 Link to this post

    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.
  5. Philip
    Philip avatar
    8 posts
    Member since:
    Mar 2017

    Posted 22 Mar 2017 in reply to Ivan Danchev Link to this post

    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

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1749 posts

    Posted 24 Mar 2017 Link to this post

    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.
Back to Top