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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Sync with DataGrid using remote data

Thread ID:

Created:

Updated:

Platform:

Replies:

143147 Mar 6,2019 12:33 PM UTC Mar 7,2019 12:56 PM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Query Builder
Nino
Asked On March 6, 2019 12:33 PM UTC

I have a view with a DataGrid bound to an url based data source (mvc action returning data from Entity Framework) 

Now i need to add a QueryBuilder in the same view.
How can i sync datasources having DataGrid rows reflecting the filter set by QueryBuilder?

Silambarasan I [Syncfusion]
Replied On March 7, 2019 12:56 PM UTC

Hi Nino, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your requirement “To use remote data source in QueryBuilder integration with Grid sample” and we have prepared sample to populate Grid data based on QueryBuilder filter. Please check the below code snippet, 
 
CSHTML 
@using Newtonsoft.Json; 
 
@Html.EJS().QueryBuilder("querybuilder").Width("100%").Columns(col => 
{ 
    col.Field("OrderID").Label("Order ID").Add(); 
    //.. 
}).DataSource(dataManager => { dataManager.Url("https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders").CrossDomain(true).Adaptor("ODataAdaptor"); }).MaxGroupCount(5).ConditionChanged("updateRule").FieldChanged("updateRule").ValueChanged("updateRule").OperatorChanged("updateRule").RuleDelete("updateRule").GroupDelete("updateRule").RuleInsert("updateRule").GroupInsert("updateRule").Render() 
 
@(Html.EJS().Grid("grid").DataSource(dataManager => { dataManager.Url("https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders").CrossDomain(true).Adaptor("ODataAdaptor"); }).Width("auto").RowHeight(60).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    //.. 
}).Render()) 
 
<script> 
    function updateRule() { 
        var dataManagerQuery, qryBldrObj = ej.base.getComponent(document.getElementById("querybuilder"), 'query-builder'), predicate = qryBldrObj.getPredicate(qryBldrObj.rule), 
        grid = ej.base.getComponent(document.getElementById("grid"), 'grid'); 
         
        if (ej.base.isNullOrUndefined(predicate)) { 
            dataManagerQuery = new ej.data.Query().select(['OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCountry']); 
        } else { 
            dataManagerQuery = new ej.data.Query().select(['OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCountry']).where(predicate); 
        } 
        grid.query = dataManagerQuery; 
        grid.refresh(); 
} 
</script> 
 
Sample Link: 
 
Could you please check the above sample and get back to us with more information if you need any further assistance on this? 
 
Regards, 
Silambarasan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon