how to clear combobox datasource

[Athiwat]

Both code behind and js, i tried to set datasource to null and empty array but the combobox still have items.

[Athiwat]

update my code 

<ej:ComboBox ID="cbxSaleSourceCode" runat="server" Width="100%" CssClass="txt" AllowFiltering="true" 

                                            ClientSideOnFiltering="simpleFiltering" ClientSideOnChange="saleSourceCodeChange"></ej:ComboBox>

<ej:ComboBox ID="cbxSaleBatch" runat="server" Width="100%" CssClass="txt"></ej:ComboBox>

my js

function saleSourceCodeChange() {

            if ($('#<%= cbxSaleSourceCode.ClientID %>').ejComboBox("model.value") == null ||

                $('#<%= cbxSaleSourceCode.ClientID %>').ejComboBox("model.value").trim() == "") {

                var ds = [];

                $('#<%= cbxSaleBatch.ClientID %>').ejComboBox({

                    dataSource: ds

                });

                $('#<%= cbxSaleBatch.ClientID %>').val('');

                $('#<%= cbxSaleBatch.ClientID %>').ejComboBox("model.value") = "";

                return;

            }

                

            ShowLoading();

            $.ajax({

                type: "POST",

                url: "WebService/BatchWS.asmx/GetList",

                datatype: "json",

                contentType: "application/json; charset=utf-8",

                data: JSON.stringify({sourceCode : $('#<%= cbxSaleSourceCode.ClientID %>').ejComboBox("model.value")}),

                success: ej.proxy(function (data) {

                    HideLoading();

                    $('#<%= cbxSaleBatch.ClientID %>').ejComboBox({

                        dataSource: data.d.data,

                        fields: {

                            value: "Code",

                            text: "CombindedNameTH"

                        },

                        allowFiltering: true,

                        filtering: simpleFiltering,

                    });

                }, this),

                eror: function (xmlhttprequest, textstatus, errorthrown) {

                    HideLoading();

                    swal("Can not get Batch!");

                    console.log("error: " + errorthrown);

                }

            });

        }

after cbxSaleSourceCode has datasource   i can not bind new datasource too

[Prince Oliver]

Hi Athiwat, 

 

Thank you for contacting Syncfusion Support. 

 

Based on your shared code, we have prepared a sample to set dataSource as empty for ComboBox through AJAX call to webservice. Also, we have emptied the dataSource during button click. Please refer to the below code 

 

<ej:ComboBox ID="cbxSaleSourceCode" runat="server" Width="300px" DataTextField="countryName" DataValueField="index" Placeholder="Select a state"> 

  </ej:ComboBox> 

    <br /> 

    <ej:ComboBox ID="cbxSaleBatch" runat="server" Width="300px"  DataTextField="countryName" DataValueField="index" AllowFiltering="true"></ej:ComboBox> 

    <ej:Button runat="server" Type="Button" Text="Set DataSource" ClientSideOnClick="showLoading"></ej:Button> 

      <ej:Button runat="server" Type="Button" Text="Empty DataSource" ClientSideOnClick="nullData"></ej:Button> 

     

    <script> 

 

        function showLoading(args) 

        { 

            

            $.ajax({ 

                type: "POST", 

                url: "BatchWS.asmx/GetList", 

                datatype: "json", 

                contentType: "application/json; charset=utf-8", 

                data: JSON.stringify({ sourceCode: $('#<%= cbxSaleSourceCode.ClientID %>').ejComboBox("model.value") }), 

                success: ej.proxy(function (data) { 

                    $('#<%= cbxSaleBatch.ClientID %>').ejComboBox({ 

                        dataSource: data.d, 

                        allowFiltering:true 

                    }); 

                }, this), 

                eror: function (xmlhttprequest, textstatus, errorthrown) { 

                    HideLoading(); 

                    swal("Can not get Batch!"); 

                    console.log("error: " + errorthrown); 

                } 

            }); 

        } 

 

        function nullData(args) { 

            var comboins = $('#<%= cbxSaleBatch.ClientID %>').data("ejComboBox"); 

            comboins.setModel({ dataSource: null }); 

        } 

    </script> 

 

Sample: http://www.syncfusion.com/downloads/support/forum/140671/ze/SyncfusionASPComboBox1748425183  

 

Please let us know if you require any further assistance on this. 

 

Regards, 

Prince 

[Athiwat]

Thank you for your reply.

But i still face problem then i attach a video for you.

this is my updated js 

$.ajax({

                type: "POST",

                url: "WebService/BatchWS.asmx/GetList",

                datatype: "json",

                contentType: "application/json; charset=utf-8",

                data: JSON.stringify({sourceCode : $('#<%= cbxSourceCode.ClientID %>').ejComboBox("model.value")}),

                success: ej.proxy(function (data) {

                    HideLoading();

                    if (data.d.data.length > 0) {

                        $('#<%= cbxBatch.ClientID %>').ejComboBox({

                            dataSource: data.d.data,

                            fields: {

                                value: "Code",

                                text: "CombindedNameTH"

                            },

                            allowFiltering: true,

                            filtering: simpleFiltering

                        });

                    }

                    else {

                        var comboins = $('#<%= cbxBatch.ClientID %>').data("ejComboBox");

                        comboins.setModel({ dataSource: null });

                    }

                }, this),

                eror: function (xmlhttprequest, textstatus, errorthrown) {

                    HideLoading();

                    swal("Can not get Batch!");

                    console.log("error: " + errorthrown);

                }

            });

Attachment: Record_2018_11_03_00_17_46_793_4b78e18c.rar

[Prince Oliver]

Hi Athiwat, 

Thank you for your update. 

We tried to replicate the issue based on the shared video. But unfortunately, the reported issue could not be replicated in our end. We have created a sample based on your requirement to select an item in first ComboBox and load the data source into second ComboBox based on selected items using “change” event. If you select second item, then we can pass “empty” data source. Please find the code snippets and samples for your information.  

 

function onChange(args) 

{ 

$.ajax({ 

                type: "POST", 

                url: "BatchWS.asmx/GetList", 

                datatype: "json", 

                contentType: "application/json; charset=utf-8", 

                data: JSON.stringify({ sourceCode: $('#<%= cbxSaleSourceCode.ClientID %>').ejComboBox("model.value") }), 

                success: ej.proxy(function (data) { 

                    if (data.d.length > 0) { 

                        $('#<%= cbxSaleBatch.ClientID %>').ejComboBox({ 

                            dataSource: data.d, 

                            allowFiltering: true 

                        }); 

                    } else { 

                        var comboins = $('#<%= cbxSaleBatch.ClientID %>').data("ejComboBox"); 

                        comboins.setModel({ dataSource: null }); 

                    } 

                }, this), 

                eror: function (xmlhttprequest, textstatus, errorthrown) { 

                    HideLoading(); 

                    swal("Can not get Batch!"); 

                    console.log("error: " + errorthrown); 

                } 

            }); 

} 

 

We have attached the sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/140671/ze/SyncfusionASPComboBox1748425183-1664326287 

 

If you still face any issue in your end. Kindly modify the above attached application to replicate the issue and revert it to us. Also provide the details on the version which you are using. This will help us provide solution at the earliest. 

 

Regards, 

Prince