Set Where query in Grid by dropdownlist control

I want to set the where clause in the grid query by a separate dropdownbox.  For example, I have a dropdownlist that lists all the business units in it.  When a user selects a business unit it fills the grid with only those business unit entries.  I've got this far, but not even sure that this is the correct way of doing it.


<ej-grid id="grdHaaS" allow-filtering="true" allow-text-wrap="true" show-column-chooser="true" show-summary="true"
         allow-scrolling="true" show-stacked-header="true" is-responsive="true" min-width="500" query-cell-info="cellinfo" record-click="grdRecordClick"
         action-begin="grdActionBegin" action-complete="grdActionComplete"
         query="new ej.Query().where('Bu', 'equal', 'ISBU', true)"> // 'ISBU' works, but this is static, should be the result of the dropdownlist itemSelected
    <e-datamanager  url="/Haas/GetOpex" adaptor="UrlAdaptor" />


Controller:
        public IActionResult GetOpex([FromBody]Syncfusion.JavaScript.DataManager dm)
        {
            string fil = dm.Where[0].value.ToString();  //I get the Where clause from the query string to just return back the records from the DB
            IEnumerable data = ctx.HaaStracking.Where(a => a.Bu == fil).ToList();
               
            DataOperations operation = new DataOperations();
            DataOperations ag = new DataOperations();
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
            {
                data = operation.PerformSorting(data, dm.Sorted);
            }
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            {
                data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator);
            }

            List<string> str = new List<string>();
            if (dm.Aggregates != null)
            {
                for (var i = 0; i < dm.Aggregates.Count; i++)
                    str.Add(dm.Aggregates[i].Field);
            }

            int count = data.Cast<Models.HaaS.HaasOpex>().Count();
            if (dm.Skip != 0)
            {
                data = operation.PerformSkip(data, dm.Skip);
            }
            if (dm.Take != 0)
            {
                data = operation.PerformTake(data, dm.Take);
            }
            return Json(new { result = data, count = count, aggregate = operation.PerformSelect(data, str) });
            //            return Json(new { result = data, count = count });
        }

this all works with the static 'ISBU' in the query string, but the big question is, what do I put in the itemChange event on the dropdownlist to requery using the itemSelected of the dropdownlist.



1 Reply

KM Kuralarasan Muthusamy Syncfusion Team February 13, 2018 02:46 PM UTC

Hi Michael, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to set the value where the clause in the grid by using separate dropdown list, So we suggest the addparams method to get the value from the drop down list, So we prepare the sample demo for you. 
 
Please refer the following code example: 
View Page: 
<ej-drop-down-list id="dropdown" datasource="ViewBag.datasource" enable-incremental-search="true" case-sensitive-search="true"> 
    <e-drop-down-list-fields text="Text"  /> 
</ej-drop-down-list> 
<ej-button id="btn" text="update grid" click="click" /> 
 
<ej-grid id="Grid" datasource=ViewBag.parent allow-paging="true" > 
    <e-datamanager url="/Grid/Data" adaptor="UrlAdaptor" /> 
            
                  ............. 
 
</ej-grid> 
 
<script type="text/javascript"> 
    function click(args) {  
        var gridObj = $("#Grid").data("ejGrid"); 
        gridObj.option({ 
            query: new ej.Query().addParams('ID', $("#dropdown").ejDropDownList("getSelectedValue")) 
        }); 
        gridObj.refreshContent();         
    } 
</script> 
 
Controller Page: 
namespace SyncfusionASPNETCoreApplication2.Controllers 
{ 
    public partial class GridController : Controller 
    { 
        public object JsonRequestBehavior { get; private set; } 
 
        public ActionResult GridFeatures() 
        { 
            if (emp.Count == 0) 
                BindParentData(); 
            ViewBag.parent = emp; 
            BindChildData(); 
            ViewBag.child = emp1; 
                
              ........... 
 
            ViewBag.datasource = DropDownData; 
            return View(); 
        } 
        public JsonResult Data([FromBody]Test dataObj) 
        { 
 
            IEnumerable data = emp1; 
            if (dataObj.ID != null) 
                data = data.Cast<Orders>().Where(em => em.ShipCity == dataObj.ID).ToList(); 
            int count = data.Cast<Orders>().Count(); 
            DataOperations dp = new DataOperations(); 
            dp.PerformSkip(data, dataObj.Skip); 
            dp.PerformTake(data, dataObj.Take); 
            return Json(new { result = data, count = count }); 
        } 
        public class Test : DataManager       //inherit the class to show age as property of DataManager 
        { 
            public string ID { get; set; } 
        } 
        public class GridExtended : GridProperties { 
            [DefaultValue(true)] 
            [DesignerSerializationVisibilityAttribute(DesignerSerializationVisibility.Hidden)] 
            [JsonProperty("includeChildExport")] 
            public bool IncludeChildExport { get; set; } 
        } 
 
    } 
} 
 
 
 
Please refer the following sample: 
 
 
 
 
Regards, 
Kuralarasan M 


Loader.
Up arrow icon