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

Sync with DataGrid using remote data

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?

1 Reply

SI Silambarasan I Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon