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 MVC
  4. External search with MVC Grid

External search with MVC Grid

I have an MVC grid with UrlAdaptor and the datasource is a retrived with a ajax call to the server. I also have sorting and paging enable on the grid. My question is how would I implement search function on this grid. When I use the built in grid search, it seems to search only on the currently loaded set of records.

@(Html.EJ().Grid<SkyExpress.Web.ViewModels.UserDetailViewModel>("usergrid")
                .Datasource(ds => ds.URL(Url.Action("UserDetailDataSource", "UserAdministration"))
                .Adaptor(AdaptorType.UrlAdaptor))
                .AllowPaging()
                .AllowSorting()
                .SelectionType(SelectionType.Single)
                .IsResponsive(true)
                .EnableResponsiveRow(true)
                .EnableRowHover()
                .EnableAltRow()
                .AllowResizing()
                .AllowResizeToFit()
                .EnablePersistence()
                .AllowTextWrap(true)
                .ClientSideEvents(e => { e.RecordDoubleClick("onUserView"); })
                //.ToolbarSettings(toolbar => { toolbar.ShowToolbar(true).ToolbarItems(items => { items.AddTool(ToolBarItems.Search); }); })
                .Columns(col =>
                {
                    col.Field("UserId").IsPrimaryKey(true).Visible(false).Add();
                    col.Field("LoginDetail.UserName").HeaderText("User Name").Priority(1).Add();
                    col.Field("Company.Name").HeaderText("Company Name").Priority(1).Add();
                    col.Field("FirstName").HeaderText("First Name").Priority(1).Add();
                    col.Field("MiddleName").HeaderText("Middle Name").Visible(false).Add();
                    col.Field("LastName").HeaderText("Last Name").Priority(2).Add();
                    col.Field("Email").HeaderText("E-mail").Priority(4).Add();
                    //col.Field("CompanyName").HeaderText("Company Name").Visible(false).Add();
                    col.Field("Location.Name").HeaderText("Location Name").Priority(5).Visible(false).Add();
                    col.Field("isActive").HeaderText("Is Active").Visible(true).Priority(6).Add();
                })
                .ClientSideEvents(eve => eve.DataBound("onDataBound"))
                .ClientSideEvents(eve => eve.Create("create"))
)


Thanks

3 Replies
MS Mani Sankar Durai Syncfusion Team May 29, 2017 12:23 PM UTC

Hi Hussain, 


Thanks for contacting Syncfusion support. 

We have analyzed your query and when using URLAdaptor we can bind data to the grid in server side itself instead of using external AJAX post.   

We have also prepared a sample that can be downloaded from the below link. 

In the following example we have used URLAdaptor in grid and explained the way how to handle grid action like filtering, sorting, searching etc.. in server side.  

Refer the code example. 
@(Html.EJ().Grid<object>("Grid") 
                     .Datasource(ds => ds.URL("/Home/DataSource").Adaptor("UrlAdaptor")) 
                     .AllowPaging() 
                          .ToolbarSettings(toolbar => 
            { 
                toolbar.ShowToolbar().ToolbarItems(items => 
                { 
                    items.AddTool(ToolBarItems.Search); 
                }); 
            }) 
                     .Columns(col => 
        { 
            ... 
           }) 
     ) 

The server side data operations are takes place as inbuilt support by passing the URL from client side to server side. In the server side we can get it from the DataManager Class which contains the object for every grid actions like filtering, sorting, grouping, skip and take (i.e paging) etc..,  

Refer the code example. 
[HomeController.cs] 
public ActionResult DataSource(DataManager dm) //Using DataManager class which contains Sorting, filtering as a parameter.   
        { 
…. 
} 

Refer the screenshot below of DataManager class with server side searching  
 

Please refer the below code example which contains server side operations. Using DataOperations class each actions in grid takes place. 

using Syncfusion.JavaScript.DataSources; 
using Syncfusion.Linq; 
using Syncfusion.JavaScript.Models; 
 
public ActionResult DataSource(DataManager dm) 
        { 
            IEnumerable data = OrderRepository.GetAllRecords().ToList(); 
            DataOperations operation = new DataOperations(); 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                data = operation.PerformSorting(data, dm.Sorted); 
            } 
          if (dm.Search != null && dm.Search.Count > 0) 
            { 
                Data = operation.PerformSearching(Data, dm.Search);  //perform search operation in grid. 
            } 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator); 
            } 
            int count = data.Cast<EditableOrder>().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 }); 
        } 
        public class DataResult 
        { 
            public IEnumerable result { get; set; } 
            public int count { get; set; } 
        } 
 

Refer the screenshot that contains the In-built support of server side seraching data operation in grid. 

 


Refer the Kb Link:   

Refer the documentation link.  


Please let us know if you need further assistance.  


Regards, 
Manisankar Durai. 


DB Damien Boissat June 20, 2017 09:06 PM UTC

Hello,I have the same problem, together with paging, when I read the solution it seems you are taking all the record from the database and then filtering, skiping, taking them: IEnumerable data = OrderRepository.GetAllRecords().ToList();...I am using entity framework, do I have to manage it myself by building a specific query (with WHERE, SKIP, TAKE etc...) using the DataManager or is it able to do it by itself?Do I have to use sth similar to this: https://help.syncfusion.com/aspnetmvc/grid/how-to#set-dynamic-datasource-to-gridOr this: https://help.syncfusion.com/aspnetmvc/grid/how-to#custom-binding-for-grid-crud-operationOr this: https://www.syncfusion.com/forums/130337/server-side-filtering-searching-and-sortingMany Please lead me to the good way,Thanks,Damienps: sorry for so many editing but I didn't succeed to use carriage return, I hope it's ok now

TS Thavasianand Sankaranarayanan Syncfusion Team June 21, 2017 12:52 PM UTC

Hi Damien, 
 
We have analyzed your query and we suspect that you want to use entity frame work to ejGrid control. In default, entity frame work will as a local dataSource to the ejGrid. So, you can do the operations in client side itself. By enabling the properties paging, filtering, editing, sorting of ejGrid control and the operations are done in clientside itself. So, you no need to manage the skip, take, where in dataMager for this type of binding the dataSouce to the ejGrid. 
 
We have prepared a sample with local data binding and it can be downloadable from the below location. 
 
 
Refer the help documentation. 
 
 
 
 
 
If you have bind remote dataSource to the grid by enabling UrlAdaptor in Grid. While using UrlAdaptor, we have loaded the Grid with only the paginated data as a load on demand concept  and for every operations, an ajax post will be sent to the specified data service. You need to handle grid operation (paging/filtering/searching/sorting) in server side. When performing paging, filtering, sorting, editing operations on the grid queries are passed to the server side using DataManager class. 

Note: skip/take are the queries responsible for handling the paging action and it returns current page records to the Grid. 

Refer the screen shot. 
 

 
   
Refer the documentation link. 
   
 
Regards, 
Thavasianand S. 


Loader.
Up arrow icon