Sync with DataGrid using remote data

[Nino]

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]

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: 

http://www.syncfusion.com/downloads/support/forum/143147/ze/Sample-1202702174 

 

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