Filtering DropDownList

[Stefano Capobianco]

Hi, i would like to know if it's possible set some filtering condition for the DropDownList from other field inside the form

This is my DropDownList

<ej-drop-down-list id="provinceDropdown" ej-for="ProvinceId" watermark-text="Selezionare una provincia" 

                                  change="GetProvinceOnChange" selected-item-index="1"  >

     <e-datamanager url="/Api/Provinces/GetAll" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>

     <e-drop-down-list-fields text="ProvinceName" value="Id" />

</ej-drop-down-list>

It's also possible to use teh $filter like Grid ?

Thanks

Stefano Capobianco

[Prince Oliver]

Hi Stefano, 

Thank you for using Syncfusion forums. 

We have provided support for server-side filtering for DropDownList since version 15.4.17. Setting ”enable-server-filtering” to  "true", will enable the server side filtering option in the DropDownlist where the $filter will be used to pass the filter string to the controller. For more information on the server side filtering in DropDownList, please refer to the following UG documentation link: https://help.syncfusion.com/aspnet-core/dropdownlist/serverfiltering#server-filtering 

We have prepared a sample for your reference, please find the sample from the following link: http://www.syncfusion.com/downloads/support/forum/134850/ze/DDLfiltering23033675 

Regards, 

Prince 

[Stefano Capobianco]

Hi Prince, thanks for your answer. I need to modify the filter condition but not inside the dropdownlist.

I need to modify the query parameter with some other fields value. 

This is my dropdonwlist:

<ej-drop-down-list id="regionDropdown" ej-for="RegionId" watermark-text="Selezionare una regione" value="1">

     <e-datamanager url="/Api/Regions/GetAll" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>

    <e-drop-down-list-fields text="RegionName" value="Id" />

</ej-drop-down-list>

The dropdown in not editable and i need to don't show the field to set the filter inside.

Thanks

Stefano

[Prince Oliver]

Hi Stefano, 

Thank you for your update. 

You can use the create event in the DropDownList control to add customAdaptor. Using customAdaptor we can override the existing adaptor as per our requirement. In your case, we need to extend the webApi Adaptor and customize it to modify the query string to modify the filter condition. To use custom Adaptor, refer to the following code. 

<ej-drop-down-list id="bikeList" width="100%" create="onCreate"> 

    <e-drop-down-list-fields text="text" value="empid" /> 

</ej-drop-down-list> 

 

<script> 

    function onCreate() {  

 

        //Internal methods required for modifying existing Adaptor's processQuery method 

              

        var filterQueries = function (queries, name) { 

            return queries.filter(function (q) { 

                return q.fn === name; 

            }) || []; 

        }; 

        var filterQueryLists = function (queries, singles) { 

            var filtered = queries.filter(function (q) { 

                return singles.indexOf(q.fn) !== -1; 

            }), res = {}; 

            for (var i = 0; i < filtered.length; i++) { 

                if (!res[filtered[i].fn]) 

                    res[filtered[i].fn] = filtered[i].e; 

            } 

            return res; 

        }; 

        var callAdaptorFunc = function (obj, fnName, param, param1) { 

            if (obj[fnName]) { 

                var res = obj[fnName](param, param1); 

                if (!isNull(res)) param = res; 

            } 

            return param; 

        }; 

        var getValue = function (value, inst) { 

            if (typeof value === "function") 

                return value.call(inst || {}); 

            return value; 

        }; 

        var isNull = function (val) { 

            return val === undefined || val === null; 

        }; 

 

        // Creating custom adaptor 

        var customAdaptor = new ej.ODataAdaptor().extend({ 

 

            //you can add custom $filter queries in the url in the processQuery method 

 

            // override the default webpapi adaptor's processQuery method here 

            processQuery: function (dm, query, hierarchyFilters) { 

                var sorted = filterQueries(query.queries, "onSortBy"), 

                    grouped = filterQueries(query.queries, "onGroup"), 

                    filters = filterQueries(query.queries, "onWhere"), 

                    searchs = filterQueries(query.queries, "onSearch"), 

                    aggregates = filterQueries(query.queries, "onAggregates"), 

                    singles = filterQueryLists(query.queries, ["onSelect", "onPage", "onSkip", "onTake", "onRange"]), 

                    params = query._params, 

                    url = dm.dataSource.url, tmp, skip, take = null, 

                    op = this.options; 

 

                var r = { 

                    sorted: [], 

                    grouped: [], 

                    filters: [], 

                    searches: [], 

                    aggregates: [] 

                }; 

 

                // calc Paging & Range 

                if (singles["onPage"]) { 

                    tmp = singles["onPage"]; 

                    skip = getValue(tmp.pageIndex, query); 

                    take = getValue(tmp.pageSize, query); 

                    skip = (skip - 1) * take; 

                } else if (singles["onRange"]) { 

                    tmp = singles["onRange"]; 

                    skip = tmp.start; 

                    take = tmp.end - tmp.start; 

                } 

 

                // Sorting 

                for (var i = 0; i < sorted.length; i++) { 

                    tmp = getValue(sorted[i].e.fieldName, query); 

 

                    r.sorted.push(callAdaptorFunc(this, "onEachSort", { name: tmp, direction: sorted[i].e.direction }, query)); 

                } 

 

                // hierarchy 

                if (hierarchyFilters) { 

                    tmp = this.getFiltersFrom(hierarchyFilters, query); 

                    if (tmp) 

                        r.filters.push(callAdaptorFunc(this, "onEachWhere", tmp.toJSON(), query)); 

                } 

 

                // Filters 

                for (var i = 0; i < filters.length; i++) { 

                    r.filters.push(callAdaptorFunc(this, "onEachWhere", filters[i].e.toJSON(), query)); 

 

                    for (var prop in r.filters[i]) { 

                        if (isNull(r[prop])) 

                            delete r[prop]; 

                    } 

                } 

 

                // Searches 

                for (var i = 0; i < searchs.length; i++) { 

                    tmp = searchs[i].e; 

                    r.searches.push(callAdaptorFunc(this, "onEachSearch", { 

                        fields: tmp.fieldNames, 

                        operator: tmp.operator, 

                        key: tmp.searchKey, 

                        ignoreCase: tmp.ignoreCase 

                    }, query)); 

                } 

 

                // Grouping 

                for (var i = 0; i < grouped.length; i++) { 

                    r.grouped.push(getValue(grouped[i].e.fieldName, query)); 

                } 

 

                // aggregates 

                for (var i = 0; i < aggregates.length; i++) { 

                    tmp = aggregates[i].e; 

                    r.aggregates.push({ type: tmp.type, field: getValue(tmp.field, query) }); 

                } 

 

                var req = {}; 

                req[op.from] = query._fromTable; 

                if (op.expand) req[op.expand] = query._expands; 

                req[op.select] = singles["onSelect"] ? callAdaptorFunc(this, "onSelect", getValue(singles["onSelect"].fieldNames, query), query) : ""; 

                req[op.count] = query._requiresCount ? callAdaptorFunc(this, "onCount", query._requiresCount, query) : ""; 

                req[op.search] = r.searches.length ? callAdaptorFunc(this, "onSearch", r.searches, query) : ""; 

                req[op.skip] = singles["onSkip"] ? callAdaptorFunc(this, "onSkip", getValue(singles["onSkip"].nos, query), query) : ""; 

                req[op.take] = singles["onTake"] ? callAdaptorFunc(this, "onTake", getValue(singles["onTake"].nos, query), query) : ""; 

                req[op.antiForgery] = (dm.dataSource.antiForgery) ? dm.antiForgeryToken().value : ""; 

                req[op.where] = r.filters.length || r.searches.length ? callAdaptorFunc(this, "onWhere", r.filters, query) : ""; 

                req[op.sortBy] = r.sorted.length ? callAdaptorFunc(this, "onSortBy", r.sorted, query) : ""; 

                req[op.group] = r.grouped.length ? callAdaptorFunc(this, "onGroup", r.grouped, query) : ""; 

                req[op.aggregates] = r.aggregates.length ? callAdaptorFunc(this, "onAggregates", r.aggregates, query) : ""; 

                req["param"] = []; 

 

                // Params 

                callAdaptorFunc(this, "addParams", { dm: dm, query: query, params: params, reqParams: req }); 

 

                // cleanup 

                for (var prop in req) { 

                    if (isNull(req[prop]) || req[prop] === "" || req[prop].length === 0 || prop === "params") 

                        delete req[prop]; 

                } 

 

                if (!(op.skip in req && op.take in req) && take !== null) { 

                    req[op.skip] = callAdaptorFunc(this, "onSkip", skip, query); 

                    req[op.take] = callAdaptorFunc(this, "onTake", take, query); 

                } 

                var p = this.pvt; 

                this.pvt = {}; 

 

                if (this.options.requestType === "json") { 

                    return { 

                        data: JSON.stringify(req), 

                        url: url, 

                        ejPvtData: p, 

                        type: "POST", 

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

                    } 

                } 

 

                // you can override the url and set it here in the "return" or edit the convertToQueryString method 

                tmp = this.convertToQueryString(req, query, dm); 

                tmp = (dm.dataSource.url.indexOf("?") !== -1 ? "&" : "/") + tmp; 

                return { 

                    type: "GET", 

                    url: tmp.length ? url.replace(/\/*$/, tmp) : url, 

                    ejPvtData: p 

                }; 

            }, 

 

            // you can modify the query string value in the convertToQueryString method 

            // override the default webpapi adaptor's convertToQueryString method here 

            convertToQueryString: function (req, query, dm) { 

                var res = [], tableName = req.table || ""; 

                delete req.table; 

 

                if (dm.dataSource.requiresFormat) 

                    req["$format"] = "json"; 

 

                for (var prop in req) 

                    res.push(prop + "=" + req[prop]); 

 

                res = res.join("&"); 

 

                if (dm.dataSource.url && dm.dataSource.url.indexOf("?") !== -1 && !tableName) 

                    return res; 

 

                return res.length ? tableName + "?" + res : tableName || ""; 

            }, 

        }); 

        var dataManager = ej.DataManager({ url: "../api/Values", crossDomain: true, adaptor: new customAdaptor() }); 

        this.setModel({ dataSource: dataManager }); 

    } 

</script> 

To know more about custom Adaptor, refer to the following UG section: https://help.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor 

We have prepared a sample for your reference, please find the sample from the following link: http://www.syncfusion.com/downloads/support/forum/134850/ze/DDLfiltering886681422 

If the above code does not help, please provide us a sample with necessary information to explain your requirement or you can modify the above sample and send it back to us. it will help us provide solution. 

Regards, 

Prince