ejdropdown ejdatamanager calling api twice

[Le]

Hi!

I am using dropdownlist version 18.1.52 for asp.net core 3.1 razor page. I follow this tutorial at https://ej2.syncfusion.com/aspnetcore/DropDownList/Cascading#/bootstrap4 but use WebApiAdaptor. My problem is ej calling the API twice if I set offline is true. How can I fix it for offline mode and server filtering. Thank you verymuch!

Attachment: CallTwice_171b01b8.rar

[Sureshkumar P]

Hi Le, 

 

Greetings from Syncfusion support.  

 

Based on your shared information with sample. We suspect that you want to perform server-side filtering with a single API call action. We would like to say this the offline property is used to call the server end in initial time only to fetch the data. But in your code, you have called twice in the change event and default datamanager property. we suggest you remove the offline property in your code example to resolve the issue.  

 

Kindly refer the code example. 

 

form method="post"> 

    <div class="form-row"> 

        <div class="col-md-4"> 

            <label class="g-color-gray-dark-v2 g-font-weight-600 g-font-size-13">Country:</label> 

            <ejs-dropdownlist id="ccode" ejs-for="ccode" popupHeight="220px" filterBarPlaceholder="Search" allowFiltering="true" filtering="OnCountryFiltering" change="OnCountryChange"> 

                <e-dropdownlist-fields text="cname" value="ccode"></e-dropdownlist-fields> 

                <e-data-manager url="/api/category/country" adaptor="WebApiAdaptor" offline="false"></e-data-manager> 

            </ejs-dropdownlist> 

            <span asp-validation-for="ccode" class="text-danger g-font-size-13"></span> 

        </div> 

        <div class="col-md-8"> 

            <label class="g-color-gray-dark-v2 g-font-weight-600 g-font-size-13">State:</label> 

            <ejs-dropdownlist id="scode" ejs-for="scode" enabled="false" popupHeight="220px" filterBarPlaceholder="Search" allowFiltering="true" filtering="OnStateFiltering" change="OnStateChange"> 

                <e-dropdownlist-fields text="sname" value="scode"></e-dropdownlist-fields> 

                <e-data-manager url="/api/category/state" adaptor="WebApiAdaptor" offline="false"></e-data-manager> 

            </ejs-dropdownlist> 

            <span asp-validation-for="scode" class="text-danger g-font-size-13"></span> 

        </div> 

        <div class="col-md-8"> 

            <label class="g-color-gray-dark-v2 g-font-weight-600 g-font-size-13">City:</label> 

            <ejs-dropdownlist id="code" ejs-for="code" enabled="false" popupHeight="220px" filterBarPlaceholder="Search" allowFiltering="true" filtering="OnCityFiltering"> 

                <e-dropdownlist-fields text="name" value="code"></e-dropdownlist-fields> 

                <e-data-manager url="/api/category/city" adaptor="WebApiAdaptor" offline="false"></e-data-manager> 

            </ejs-dropdownlist> 

            <span asp-validation-for="code" class="text-danger g-font-size-13"></span> 

        </div> 

    </div> 

</form> 

@section Scripts { 

    @await Html.PartialAsync("_ValidationScriptsPartial") 

    <script> 

        function OnCountryChange() { 

            if (this.itemData) { 

                var City = document.getElementById('code').ej2_instances[0]; 

                City.enabled = false; 

                City.itemData = null; 

                City.dataSource = null; 

 

                var State = document.getElementById('scode').ej2_instances[0]; 

                State.enabled = true; 

                var dataManager = new ejs.data.DataManager({ 

                    url: "/api/category/state?ccode=" + this.itemData.ccode, 

                    adaptor: new ejs.data.WebApiAdaptor(), 

                    offline: false 

                }); 

                State.itemData = null; 

                State.dataSource = null; 

                State.dataSource = dataManager; 

            } 

        }; 

        function OnStateChange() { 

            if (this.itemData) { 

                var City = document.getElementById('code').ej2_instances[0]; 

                City.enabled = true; 

                var dataManager = new ejs.data.DataManager({ 

                    url: "/api/category/city?scode=" + this.itemData.scode, 

                    adaptor: new ejs.data.WebApiAdaptor(), 

                    offline: false 

                }); 

                City.itemData = null; 

                City.dataSource = null; 

                City.dataSource = dataManager; 

            } 

        }; 

        function OnCountryFiltering(e) { 

            var CBObj = document.getElementById($(this).get(0).element.id).ej2_instances[0]; 

            if (e.text == '') 

                e.updateData(CBObj.dataSource); 

            else { 

                var query = new ej.data.Query(); 

                query = (e.text !== '') ? query.where('cname', 'contains', e.text, true) : query; 

                e.updateData(CBObj.dataSource, query); 

            } 

        }; 

        function OnStateFiltering(e) { 

            var CBObj = document.getElementById($(this).get(0).element.id).ej2_instances[0]; 

            if (e.text == '') 

                e.updateData(CBObj.dataSource); 

            else { 

                var query = new ej.data.Query(); 

                query = (e.text !== '') ? query.where('sname', 'contains', e.text, true) : query; 

                e.updateData(CBObj.dataSource, query); 

            } 

        }; 

        function OnCityFiltering(e) { 

            var CBObj = document.getElementById($(this).get(0).element.id).ej2_instances[0]; 

            if (e.text == '') 

                e.updateData(CBObj.dataSource); 

            else { 

                var query = new ej.data.Query(); 

                query = (e.text !== '') ? query.where('name', 'contains', e.text, true) : query; 

                e.updateData(CBObj.dataSource, query); 

            } 

        }; 

    </script> 

} 

 

 

We have modified the attached sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CallTwice-1731319437  

 

 

Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 

 

Regards, 

Sureshkumar P 

[Le]

Hi Sureshkumar, thanks for your answer.

Server-side filtering is addition question (in future).  What I want now is perform client-side filtering (offline=true) with a single API call action. As you see in my sample, the API don't support sever-side filtering mode.

So my main question is how to client-side filtering (offline=true) with a single API call action?

Addition question: How to use same API for multiple DropDownList controls with a single API call action?

Thanks!

[Sureshkumar P]

Hi Le, 

 

Thanks for your update.  

 

Based on your shared information. We suspect that you want to load the local data using datamanager to perform client-side filtering action. We can achieve by using execute query.  

 

Kindly check the below code example. 

<form method="post"> 

    <div class="form-row"> 

        <div class="col-md-4"> 

            <label class="g-color-gray-dark-v2 g-font-weight-600 g-font-size-13">Country:</label> 

            <ejs-dropdownlist id="ccode" ejs-for="ccode" popupHeight="220px" filterBarPlaceholder="Search" allowFiltering="true" created="InitialRendering" filtering="OnCountryFiltering" change="OnCountryChange"> 

                <e-dropdownlist-fields text="cname" value="ccode"></e-dropdownlist-fields> 

                @*<e-data-manager url="/api/category/country" adaptor="WebApiAdaptor" offline="true"></e-data-manager>*@ 

            </ejs-dropdownlist> 

            <span asp-validation-for="ccode" class="text-danger g-font-size-13"></span> 

        </div> 

        <div class="col-md-8"> 

            <label class="g-color-gray-dark-v2 g-font-weight-600 g-font-size-13">State:</label> 

            <ejs-dropdownlist id="scode" ejs-for="scode" enabled="false" popupHeight="220px" filterBarPlaceholder="Search" allowFiltering="true" filtering="OnStateFiltering" change="OnStateChange"> 

                <e-dropdownlist-fields text="sname" value="scode"></e-dropdownlist-fields> 

                @*<e-data-manager url="/api/category/state" adaptor="WebApiAdaptor" offline="true"></e-data-manager>*@ 

            </ejs-dropdownlist> 

            <span asp-validation-for="scode" class="text-danger g-font-size-13"></span> 

        </div> 

        <div class="col-md-8"> 

            <label class="g-color-gray-dark-v2 g-font-weight-600 g-font-size-13">City:</label> 

            <ejs-dropdownlist id="code" ejs-for="code" enabled="false" popupHeight="220px" filterBarPlaceholder="Search" allowFiltering="true" filtering="OnCityFiltering"> 

                <e-dropdownlist-fields text="name" value="code"></e-dropdownlist-fields> 

                @*<e-data-manager url="/api/category/city" adaptor="WebApiAdaptor" offline="true"></e-data-manager>*@ 

            </ejs-dropdownlist> 

            <span asp-validation-for="code" class="text-danger g-font-size-13"></span> 

        </div> 

    </div> 

</form> 

@section Scripts { 

    @await Html.PartialAsync("_ValidationScriptsPartial") 

    <script> 

 

        function InitialRendering() { 

            var Country = document.getElementById('ccode').ej2_instances[0]; 

            new ej.data.DataManager({ url: "/api/category/country", adaptor: new ej.data.WebApiAdaptor }).executeQuery(new ej.data.Query()).then((e) => { 

                Country.dataSource = e.result; 

            }); 

        } 

        function OnCountryChange() { 

            if (this.itemData) { 

                var City = document.getElementById('code').ej2_instances[0]; 

                City.enabled = false; 

                City.itemData = null; 

                City.dataSource = null; 

 

                var State = document.getElementById('scode').ej2_instances[0]; 

                State.enabled = true; 

 

                State.itemData = null; 

                State.dataSource = null; 

                new ej.data.DataManager({ url: "/api/category/state", adaptor: new ej.data.WebApiAdaptor }).executeQuery(new ej.data.Query().addParams('ccode', this.itemData.ccode)).then((e) => { 

                    State.dataSource = e.result; 

                }); 

                 

            } 

        }; 

        function OnStateChange() { 

            if (this.itemData) { 

                var City = document.getElementById('code').ej2_instances[0]; 

                City.enabled = true; 

                City.itemData = null; 

                City.dataSource = null; 

                new ej.data.DataManager({ url: "/api/category/city", adaptor: new ej.data.WebApiAdaptor }).executeQuery(new ej.data.Query().addParams('scode', this.itemData.scode)).then((e) => { 

                    City.dataSource = e.result; 

                }); 

                 

            } 

        }; 

        function OnCountryFiltering(e) { 

            var CBObj = document.getElementById($(this).get(0).element.id).ej2_instances[0]; 

            if (e.text == '') 

                e.updateData(CBObj.dataSource); 

            else { 

                var query = new ej.data.Query(); 

                query = (e.text !== '') ? query.where('cname', 'contains', e.text, true) : query; 

                e.updateData(CBObj.dataSource, query); 

            } 

        }; 

        function OnStateFiltering(e) { 

            var CBObj = document.getElementById($(this).get(0).element.id).ej2_instances[0]; 

            if (e.text == '') 

                e.updateData(CBObj.dataSource); 

            else { 

                var query = new ej.data.Query(); 

                query = (e.text !== '') ? query.where('sname', 'contains', e.text, true) : query; 

                e.updateData(CBObj.dataSource, query); 

            } 

        }; 

        function OnCityFiltering(e) { 

            var CBObj = document.getElementById($(this).get(0).element.id).ej2_instances[0]; 

            if (e.text == '') 

                e.updateData(CBObj.dataSource); 

            else { 

                var query = new ej.data.Query(); 

                query = (e.text !== '') ? query.where('name', 'contains', e.text, true) : query; 

                e.updateData(CBObj.dataSource, query); 

            } 

        }; 

    </script> 

} 

 

 

 

Could you please check the above code examples and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 

 

Regards, 

Sureshkumar P 

[Le]

That is exactly what I want.

Thank you for your helpful assistance.

[Sureshkumar P]

Hi Le, 

 

Thanks for your update. Please get back to us if you need any further assistance on this.  

 

Regards, 

Sureshkumar P