Inline dropdownlist in a datagrid - bind data source

[Sanjay]

Hi

Have defined a dropdownlist

 

        var itemCodeFilterDropDownList = new DropDownList

        {            

            AllowFiltering = true,

            Id = "saleItemFilterCodeDropDown",

            Filtering = "onFilteringItemCode",

            Placeholder = "Select",

            ActionBegin = "addQuery"

        };

This is part of inline editor in a datagrid

 <e-grid-column field="ItemCode" headerText="Code" width="150" validationRules="@(new {required = true})" headerTextAlign="Left" textAlign="Left" editType="dropdownedit" id="dropDownEditFilter" 

                           edit="@(new {@params = itemCodeFilterDropDownList})">

 </e-grid-column>

During edit mode on entry of 2 or characters want to look up the item.

function onFilteringItemCode(ex) {

    if (ex.text !== '' && ex.text.length >= 2)

    {

        var item = document.getElementById("saleItemFilterCodeDropDown");

        var dataManager = new ej.data.DataManager({ url: "/Sale/ProductList", adaptor: new ej.data.UrlAdaptor })

            .executeQuery(new ej.data.Query().where('ItemCode', 'startswith', e.text))

            .then((e) => {

                item.dataSource = e.result;

               

            });     

    }

}

The issue is "item" is null. How do I get access to the dropdownlist element and update the datasource.

Thanks

Sanjay

[Thavasianand Sankaranarayanan]

Hi Sanjay, 

Thanks for contacting Syncfusion support. 

From your code we, found that you have incorrectly taken the instance for the dropDownList. So, please change the instance code like as below code snippet to access all the properties of the dropDownList inside the dataManager “then” function, 

  function onFilteringItemCode(ex) { 

        if (ex.text !== '' && ex.text.length >= 2) { 

            var item = this; // DropDownList instance 

            var dataManager = new ej.data.DataManager({ url: "/Sale/ProductList", adaptor: new ej.data.UrlAdaptor }) 

                .executeQuery(new ej.data.Query().where('ItemCode', 'startswith', e.text)) 

                .then((e) => { 

                    item.dataSource = e.result; 

                }); 

        } 

    } 

Regards, 

Thavasianand S. 

[Sanjay]

Thank you very much.

This is now working.

Thanks again

Sanjay

[Thavasianand Sankaranarayanan]

Hi Sanjay, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.