We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Extending Grid Controls

Extending Grid Controls

I am trying to extend your controls to your MVC grid. I currently am using just this. I know that i can use your search box that is a single search box. or use your filter functionality as search fields, but i would like to have multilple search boxes per specific column, and radio buttons created from onhover actions to control my filter by column of certain columns.

        @(Html.EJ().DataManager("FlatData").URL(Url.Action("DataSource", "AdminProduct", null, Request.Url.Scheme)).Adaptor(AdaptorType.UrlAdaptor))
        @(Html.EJ().Grid<OE.Controllers.CspcAdmin.AdminProductController.ProductConfigJustData>("Grid")
        .DataManagerID("FlatData")
        .ContextMenuSettings(a => a.EnableContextMenu())
        .AllowPaging()
        .AllowSorting()
        .AllowSearching()
        .PageSettings(p => p.PageSize(30).EnableQueryString())
        .Columns(col =>
        {
            col.Field("ID").HeaderText("ID").IsPrimaryKey(true).Width(70).HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Add();
            col.Field("Active").HeaderText("Active").Width(60).HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Add();
            col.Field("DisplayName").HeaderText("Display Name").HeaderTextAlign(TextAlign.Center).Width(175).Add();
            col.Field("Description").HeaderText("Description").HeaderTextAlign(TextAlign.Center).Add();
            col.Field("Bundle").HeaderText("Bundle").HeaderTextAlign(TextAlign.Center).Add();
            col.Field("SomeKey").HeaderText("Mss Id").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(70).Add();
            col.Field("AnotherKey").HeaderText("Brm Id").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(70).Add();
            col.Field("ClassDisplayName").HeaderText("Class").HeaderTextAlign(TextAlign.Center).Width(100).Add();
            col.Field("EntityType").HeaderText("Price Type").HeaderTextAlign(TextAlign.Center).Width(100).Add();
            col.Field("NumLocations").HeaderText("# Locations").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(90).Add();
            col.Field("FlagActive").HeaderText("Mos").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(45).Add();
            col.Field("AnotherFlagActive").HeaderText("Smb").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(45).Add();
        }).ClientSideEvents(e => e.Create("create").ActionComplete("onComplete"))
        )

my hope is that there is some javasript function i am missing. I would like to be able to do something like this:

    function serverSearch(searchString) {
        //some syncfusion function i can call that uses your grid promise dataBinding functionality
    }
 that will call this async:
        public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm)
        {
}


13 Replies
KK Karthick Kuppusamy Syncfusion Team November 30, 2016 12:13 PM UTC

Hi Diamond, 

Thanks for Contacting Syncfusion support. 

We have analyzed your requirement and we have created the sample with radio buttons which performs the search operation in grid. 

Please find the code example. 

<ul> 
    <li><input type="radio" id="radio1" name="search1"  />Search value for Reims</li> 
    <li><input type="radio" id="radio2"name="search2"  />Search value for 10270 </li> 
</ul> 
<button id="btn1">clear searching</button> 
@(Html.EJ().Grid<Order>("FlatGrid") 
        .Datasource(ds => ds.URL("/Grid/DataSource").UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("/Grid/Delete").Adaptor(AdaptorType.UrlAdaptor)) 
        .AllowScrolling() 
         .AllowPaging()    /*Paging Enabled*/ 
         .AllowSearching() 
             
         .ToolbarSettings(toolbar => 
            { 
                toolbar.ShowToolbar().ToolbarItems(items => 
                { 
                    items.AddTool(ToolBarItems.Add); 
                    items.AddTool(ToolBarItems.Edit); 
                    items.AddTool(ToolBarItems.Delete); 
                    items.AddTool(ToolBarItems.Update); 
                    items.AddTool(ToolBarItems.Cancel); 
                }); 
            }) 
          .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal); }) 
              
           .Columns(col => 
        { 
          ……. 
        }) 
        ) 
<script> 
    $(document).ready(function () { 
        $("input[name='search1']").change(function (args) { 
            $('#radio2').attr('checked', false); 
            var inst = $("#FlatGrid").data("ejGrid"); 
            inst.search("Reims");//perform Search 
        }); 
        $("input[name='search2']").change(function (args) { 
            $('#radio1').attr('checked', false); 
            var inst = $("#FlatGrid").data("ejGrid"); 
            inst.search("10270");//Perform Search 
        }); 
        $("#btn1").click(function () { 
            var inst = $("#FlatGrid").data("ejGrid"); 
            inst.clearSearching();//clear Searhing 
        }); 
 
    }); 
    
</script> 
 


For your reference we have created a sample based on your requirement and same it can be downloaded from the following location. 


Refer the following UG link for search and clear search method. 



If we misunderstood your requirement then could you please share more details about your requirement it would be helpful for us to find the solution as earliest. 

Regards, 
K.Karthick. 


DI Diamond December 2, 2016 02:57 PM UTC

That deffiniently got me pointed in the correct direction.
Though i would like to use the DataManagers object structure.
as i would like to tie a search box to a field. 
so when i use this
            var inst = $("#FlatGrid").data("ejGrid"); 
            inst.search("Reims");//perform Search 
it will post a datamanager with that specified column in stead of all of them. but if i call it a second time from a different search box it will add to the datamanagers search array another search object, this time with a different column and search word.

also i want to allow filtering but with not want the default filter bar. i again would like to tie my own custom controls to your async promise methods of your grid

MF Mohammed Farook J Syncfusion Team December 5, 2016 10:50 AM UTC

 Hi Diamond, 
 
We have validated your requirement and please confirm the following details are: 
 
1.     Did you want to search only specific column in every searching 
2.     Searching is not affect in other grid column 
 
 
also i want to allow filtering but with not want the default filter bar. i again would like to tie my own custom controls to your async promise methods of your grid 
 
 
We have already have supported to render custom controls in filter bar . please find the online demos: 
 
 
 
Filter bar Template has three functions they are : 
 
1.    Create – it is optional and it  is used to create element for custom control 
2.    Write  -  it is used to render the custom control 
3.    Read – it is used to read the values while filtering  . 
 
 
Regards, 
J.Mohammed Farook 
 
 
 


DI Diamond December 5, 2016 03:01 PM UTC

I do not want to customize your controls. i would like to use your filter functionality without using your controls. i would like my own filter and search controls a panel on the left hand side extracted from the  syncfusion scrolling data grid. also as to your clarifications.

1.     Did you want to search only specific column in every searching 
Yes i would like to have multiple search boxes that would tie to a specific column in the grid. 
below is two input boxes i would like to tie to a specific column in the grid. 
In the function serverSearch i would like the data manager to add to the list of SearchFilter objects with a single field corresponding to the input box's id and key corresponding to the input.


<input  onkeydown="search(this)"  id="alpha" />
<input  onkeydown="search(this)"  id="beta" />

<script type="text/javascript">
    function search(ele) {
        if (event.keyCode == 13) {
            serverSearch(ele.value, ele.id);
            
        }
    }

    function serverSearch(searchString, columnReff) {
        var inst = $("#Grid").data("ejGrid");
        inst.search(searchString);
    }
</script>

i have done a fair amount of digging in your documentation and i do not think that the amount of customization that i would like to achieve is possible. 
I hope that i am wrong.


Thanks,
Diamond Wartenbee
SDN Communications

SA Saravanan Arunachalam Syncfusion Team December 6, 2016 10:18 AM UTC

Hi Diamond, 
We understood from your query, you need to filter externally and we have achieved your requirement by using “filterColumn” method of Grid control. Please refer to the following code example and online help document. 
 
 <%--TO filter the alpha column based on text in id of the element--%> 
 OrderID: <input  onkeydown="search(this)" id="alpha" /> 
 <%--TO filter the beta column based on text in id of the element--%> 
 CustomerID: <input  onkeydown="search(this)" id="beta" /> 
 
    <div> 
        <ej:Grid ID="Grid1" AllowPaging="True" AllowFiltering="true" runat="server"> 
            <ClientSideEvents Create="onCreate" /> 
            . . . 
        </ej:Grid> 
    </div> 
<script type="text/javascript"> 
        function onCreate(args) { 
            //To hide the default filter bar 
            this.getHeaderTable().find("tr.e-filterbar").css("display", "none"); 
        } 
        function search(ele) { 
            if (event.keyCode == 13) { 
                var inst = $("#Grid").ejGrid("instance"); 
                //Filter from external text box based on the id of the textbox and value 
                inst.filterColumn(ele.id, "equal", ele.value, "and", true); 
 
            } 
        } 
    </script> 
   
Regards, 
Saravanan A. 


MF Mohammed Farook J Syncfusion Team December 6, 2016 11:49 AM UTC

Hi Diamond , 
 
We have validated your provided code and  currently we don’t have support directly apply  “multiple search  for Grid columns” . So we have achieved your requirement by using workaround. Please find the code example. 
 
 
 
 
  <input onkeydown="search(this)" id="ShipCity" /> 
    <input onkeydown="search(this)" id="OrderID" /> 
   
@(Html.EJ().Grid<Order>("FlatGrid") 
        .Datasource(ds => ds.URL("/Grid/DataSource").UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("/Grid/Delete").Adaptor(AdaptorType.UrlAdaptor)) 
        .AllowScrolling() 
         .AllowPaging()    /*Paging Enabled*/ 
         .AllowSearching() 
            .ClientSideEvents(eve => eve.ActionComplete("actionComplete"))              
           .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).EditType(EditingType.Numeric).Format("{0:C}").Add(); 
            col.Field("ShipCity").HeaderText("Ship City").Width(85).Add(); 
            col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add(); 
        }) 
        ) 
<script> 
    function search(ele) { 
       
        if (event.keyCode == 13) { 
            serverSearch(ele.value, ele.id); 
 
        } 
    } 
 
    function serverSearch(searchString, columnReff) { 
        var inst = $("#FlatGrid").data("ejGrid"); 
        var key = inst.model.searchSettings.key != "" ?inst.model.searchSettings.key : searchString; 
//apply second filter 
        if (inst.model.searchSettings.key != "" && searchString != "") { 
            var col = inst.getColumnByField(columnReff) 
            searchString = col.type == "number" ? parseInt(searchString) : searchString 
            inst.commonQuery.where(columnReff, "equal", searchString, true); //you can filter based on your input here 
        } 
       
        inst.search(key); 
    } 
    
    function actionComplete(args) { 
//clear common query 
        if (args.requestType == "searching" && this.commonQuery.queries.length > 0) 
            this.commonQuery.queries = []; 
 
    } 
</script> 
 
 
 
   
We have passed second search string through ‘commonQuery’ of Grid.  
 
Note : we need to clear “commonQuery” of Grid in before next Grid action begins. 
 
Please find the screenshot for your reference. 
 
 
1.       Initial Grid Render  
 
 
 
 
2.       Search value through first input box 
 
 
 
 
 
 
 
3.       Apply next search value through second input 
 
                      
 
 
 
                     
 
 
                           
 
 
 
 
This is not meet your requirement please  share more detail about your requirement . Also please confirm following details. 
 
1.       Do you want to apply multi-search for Grid columns  
 
Regards, 
J.Mohammed Farook 


DI Diamond December 6, 2016 05:05 PM UTC

Thanks for the awesome example. It is unfortunate that i am unable to do what i really desire. This request is for a data set that is at half a million and will only continue to grow. My request is one that requires me to use both filtering and searching at the same time for specific columns. J.Mohammed Farook gave me an example of how to accomplish my searching task. The only thing that my request is missing is be able to search and filter at the same time. I will be able to rig together something that will accomplish my request while using your SyncFusion html grid helpers. The SyncFusion back end methods such as anything from the operations class:

            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();
            data = operation.Execute(data, dm);

is not piratical for large data sets. It becomes very expensive requiring the data to be in an IEnumerable instead of the preferred IQueryable. 
I have not been able to use any of the DataOperations class on this request of a very large data set. 

Thank You for your help in this request. It is an odd request but we have some large data sets that need viewing. 

DI Diamond December 7, 2016 04:18 PM UTC

    function serverSearch(searchString, columnReff) { 
        var inst = $("#FlatGrid").data("ejGrid"); 
        var key = inst.model.searchSettings.key != "" ?inst.model.searchSettings.key : searchString; 
//apply second filter 
        if (inst.model.searchSettings.key != "" && searchString != "") { 
            var col = inst.getColumnByField(columnReff) 
            searchString = col.type == "number" ? parseInt(searchString) : searchString 
            inst.commonQuery.where(columnReff, "equal", searchString, true); //you can filter based on your input here 
        } 
       
        inst.search(key); 
    } 

I would like to allow for multi-search for the columns. I am not sure how to add to either the search or where list of the DataManager. Every time i call :
            inst.commonQuery.where(columnReff, "equal", searchString, true); 
or
inst.search(key);

it replaces what i already had in the list instead of adding to it.  

SA Saravanan Arunachalam Syncfusion Team December 8, 2016 01:36 PM UTC

HI Diamond, 
We understood from your query, you need to perform filtering and searching for a specific column and we suggest you to enable the filtering and perform search externally by update the “query” of Grid control. Please refer to the following code example. 
<input onkeydown="search(this)" id="ShipCity" /> 
<input onkeydown="search(this)" id="OrderID" /> 
 
@(Html.EJ().Grid<Order>("FlatGrid") 
         
         .AllowFiltering() 
          
        ) 
<script> 
      function search(ele) { 
       
        if (event.keyCode == 13) { 
            serverSearch(ele.value, ele.id); 
 
        } 
    } 
 
    function serverSearch(searchString, columnReff) { 
 
        var inst = $("#FlatGrid").data("ejGrid"), query = new ej.Query(); 
        var col = inst.getColumnByField(columnReff) 
        searchString = col.type == "number" ? parseInt(searchString) : searchString; 
        query.search(searchString, columnReff); 
        $("#FlatGrid").ejGrid("model.query", query); 
        $("#FlatGrid").ejGrid("refreshContent"); 
        } 
    
</script> 
 
 
Query: It becomes very expensive requiring the data to be in an IEnumerable instead of the preferred IQueryable 
You can use the IQueryable data but the DataOperation class doesn’t directly get the IQueryable data. So, we suggest you to explicitly convert the IQueryable data as IEnumerable. 
 Regards, 
Saravanan A. 


DI Diamond December 8, 2016 02:59 PM UTC

thank you Saravanan A. query.search(searchString, columnReff);  this is the line of code i have been seeking out. But i still cannot figure out how to have multiple search objects in the DataManager serach list or how to have multiple filters. No matter what i try it keeps replacing what was there instead of adding a new one to the already existing list

MF Mohammed Farook J Syncfusion Team December 9, 2016 06:08 AM UTC

Hi Diamond, 
 
Sorry for inconvenience  caused. 
 
We have built multiple search query  through “ej.Query()” of DataManager. Please find the code example. 
 
 
<div> 
    <input name="ShipCity"  id="ShipCity" /> 
    <input  name="OrderID" id="OrderID" /> 
    <button id="btn"> Multiple Search</button> 
</div> 
 
    
 
@(Html.EJ().Grid<Order>("FlatGrid") 
        .Datasource(ds => ds.URL("/Grid/DataSource").UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("/Grid/Delete").Adaptor(AdaptorType.UrlAdaptor)) 
        .AllowScrolling() 
         .AllowPaging()    /*Paging Enabled*/ 
         .AllowSearching() 
         .AllowFiltering() 
         .ToolbarSettings(toolbar => 
            { 
                toolbar.ShowToolbar().ToolbarItems(items => 
                { 
                    items.AddTool(ToolBarItems.Add); 
                    items.AddTool(ToolBarItems.Edit); 
                    items.AddTool(ToolBarItems.Delete); 
                    items.AddTool(ToolBarItems.Update); 
                    items.AddTool(ToolBarItems.Cancel); 
                }); 
            }) 
            .ClientSideEvents(eve => eve.ActionComplete("actionComplete")) 
          .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal); }) 
              
           .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).EditType(EditingType.Numeric).Format("{0:C}").Add(); 
            col.Field("ShipCity").HeaderText("Ship City").Width(85).Add(); 
            col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add(); 
        }) 
        ) 
<script> 
    $(function () { 
        $("#btn").ejButton({ 
 
            click: function (args) { 
                var query = new ej.Query(); 
                var filterValue1 = $("#ShipCity").val(); 
                var filterValue2 = $("#OrderID").val(); 
                var columnName1 = $("#ShipCity").attr('name'); 
                var columnName2 = $("#OrderID").attr('name'); 
                query.search(filterValue1,columnName1,"contains").search(filterValue2,columnName2,"equal"); // build query 
                
                $("#FlatGrid").ejGrid("model.query", query); // apply query into grid 
                $("#FlatGrid").ejGrid("refreshContent");// need to call refreshContent of Grid 
 
            } 
        }) 
    }) 
    
</script> 
 
 
 
 
1.       Apply multiple search into DataManager 
 
we have generate multiple search query through ‘ej.Query()’ and apply to Grid through ‘query’ property of Grid. 
                var query = new ej.Query(); 
query.search(filterValue1,columnName1,"contains").search(filterValue2,columnName2,"equal"); // build query 
                $("#FlatGrid").ejGrid("model.query", query); // apply query into grid 
                $("#FlatGrid").ejGrid("refreshContent"); // need to call refreshContent of Grid 
 
 
 
 
 
 
 
 
 
 
 
2.       Apply Multiple filter query into DataManager 
                     
                   Please find the code example. 
 
                var query = new ej.Query(); 
query.where(columnName1, "equal", filterValue1, true).where(columnName2, "equal", 10248, true) // build query 
                $("#FlatGrid").ejGrid("model.query", query); // apply query into grid 
                $("#FlatGrid").ejGrid("refreshContent"); // need to call refreshContent of Grid 
 
 
 
 
 
 
            
 
Please find the sample and  UG documentation for your reference  . 
 
 
 
 
 
 
Regards, 
J.Mohammed Farook  
  
 
 
  


CS Christian Sanabria Jimenez replied to Mohammed Farook J January 24, 2018 02:34 PM UTC

Hi Diamond, 
 
Sorry for inconvenience  caused. 
 
We have built multiple search query  through “ej.Query()” of DataManager. Please find the code example. 
 
 
<div> 
    <input name="ShipCity"  id="ShipCity" /> 
    <input  name="OrderID" id="OrderID" /> 
    <button id="btn"> Multiple Search</button> 
</div> 
 
    
 
@(Html.EJ().Grid<Order>("FlatGrid") 
        .Datasource(ds => ds.URL("/Grid/DataSource").UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("/Grid/Delete").Adaptor(AdaptorType.UrlAdaptor)) 
        .AllowScrolling() 
         .AllowPaging()    /*Paging Enabled*/ 
         .AllowSearching() 
         .AllowFiltering() 
         .ToolbarSettings(toolbar => 
            { 
                toolbar.ShowToolbar().ToolbarItems(items => 
                { 
                    items.AddTool(ToolBarItems.Add); 
                    items.AddTool(ToolBarItems.Edit); 
                    items.AddTool(ToolBarItems.Delete); 
                    items.AddTool(ToolBarItems.Update); 
                    items.AddTool(ToolBarItems.Cancel); 
                }); 
            }) 
            .ClientSideEvents(eve => eve.ActionComplete("actionComplete")) 
          .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal); }) 
              
           .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).EditType(EditingType.Numeric).Format("{0:C}").Add(); 
            col.Field("ShipCity").HeaderText("Ship City").Width(85).Add(); 
            col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add(); 
        }) 
        ) 
<script> 
    $(function () { 
        $("#btn").ejButton({ 
 
            click: function (args) { 
                var query = new ej.Query(); 
                var filterValue1 = $("#ShipCity").val(); 
                var filterValue2 = $("#OrderID").val(); 
                var columnName1 = $("#ShipCity").attr('name'); 
                var columnName2 = $("#OrderID").attr('name'); 
                query.search(filterValue1,columnName1,"contains").search(filterValue2,columnName2,"equal"); // build query 
                
                $("#FlatGrid").ejGrid("model.query", query); // apply query into grid 
                $("#FlatGrid").ejGrid("refreshContent");// need to call refreshContent of Grid 
 
            } 
        }) 
    }) 
    
</script> 
 
 
 
 
1.       Apply multiple search into DataManager 
 
we have generate multiple search query through ‘ej.Query()’ and apply to Grid through ‘query’ property of Grid. 
                var query = new ej.Query(); 
query.search(filterValue1,columnName1,"contains").search(filterValue2,columnName2,"equal"); // build query 
                $("#FlatGrid").ejGrid("model.query", query); // apply query into grid 
                $("#FlatGrid").ejGrid("refreshContent"); // need to call refreshContent of Grid 
 
 
 
 
 
 
 
 
 
 
 
2.       Apply Multiple filter query into DataManager 
                     
                   Please find the code example. 
 
                var query = new ej.Query(); 
query.where(columnName1, "equal", filterValue1, true).where(columnName2, "equal", 10248, true) // build query 
                $("#FlatGrid").ejGrid("model.query", query); // apply query into grid 
                $("#FlatGrid").ejGrid("refreshContent"); // need to call refreshContent of Grid 
 
 
 
 
 
 
            
 
Please find the sample and  UG documentation for your reference  . 
 
 
 
 
 
 
Regards, 
J.Mohammed Farook  
  
 
 
  


I'm looking forward to evaluate, propose and use the spreadsheet control for the public university's grade reporting application

SK Shanmugaraja K Syncfusion Team January 26, 2018 08:02 AM UTC

Hi Christian, 
 
Thanks for your update, 
 
We have checked your requirement, we suspect that you are trying to view the grade reports in Spreadsheet and maintain the details in the Database. We already having knowledge base regarding save and retrieve the Spreadsheet data in database. Please refer the below link. 
 
 
Also, you can open and save the excel file to server in the spreadsheet. Please refer the below KB link. 
 
 
Please check the above details and check whether this fulfilling your requirements. If we misunderstood your requirements please get back to us with your exact scenario. So, that we can provide you a better solution on this. 
 
Regards, 
Shanmugaraja K 


Loader.
Up arrow icon