Trying to integrate the Query builder into my DataGrid

[Dana Kiehl]

Hello,

I am working on integrating the Query builder into my data grid. It is also had a child grid but I am only trying to get the query to work on the parent grid. I have used the documentation on your website to set it up. It will display the query control but it isn't filtering the data in the grid. It is also throwing an error in the console that says can't set property of datasource with undefined. I have tried the datasource a couple of different ways using @Model, @ViewBag and while using a data manager. I have also tried a couple of different update Rule, declaring/not declaring a starting rule. I have attached a zip of the relevant files.

Thanks,

Dana

Attachment: DataGridDemo_e68e2fb3.zip

[Gayathri KarunaiAnandam]

Hi Dana, 

 

Thank you for contacting Syncfusion support. 

 

We have analyzed your query and we have prepared a query builder sample integrated with a grid using Entity framework. We created the database table using SQL Server. We were able to perform filtering operations on it successfully. Please find the sample we created from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161798/ze/entity393724603 

 

If the issue still persists please modify the below sample to replicate your issue. 

 

Regards, 

Gayathri K. 

[Dana Kiehl]

Hello, 

Thanks for your response. I have it some what working. I am still having a few issues.

When it runs this line of code in the updateRule function, grid comes back undefined.

 var grid = ej.base.getComponent(document.getElementById("grid"), 'grid'); (with grid changed to Grid for my project).

I changed it to this:

var gridObj = document.getElementById("Grid").ej2_instances[0]; 

and it now doesn't come back undefined and I changed the .dataSource and the .refresh to reflect this. I am able to get the query builder to work. However, I am not using dataSource for my data. I am using a data manager and the remoteSaveAdaptor. So once I start using the query builder, I am not able to perform any of the CRUD operations and have them be saved to the database.

Is  there a way to use the query builder with a data manager/adaptor in the grid?

I have attached a zip of the relevant files of my project.

Thanks,

Dana

Attachment: DataGridDemo_(3)_28ff5da7.zip

[Gayathri KarunaiAnandam]

Hi Dana, 

We have checked your reported query and based on your requirement we have prepared a sample of grid and querybuilder with RemoteSaveAdaptor to perform the CRUD actions. For your convenience we have attached the sample so please refer the sample for your reference. 

 

Link: https://www.syncfusion.com/downloads/support/forum/161798/ze/CORESQ~11626546350 

 

UG-Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#remote-save-adaptor 

 

Please contact us if you require any further assistance. 

 

Regards, 

Gayathri K 

[Abaid-ur-Rehman Zulfi]

Hi,

The examples provided filters data already present in ViewBag.dataSource. How we can make AJAX calls to fetch data from server using DataManager/Web API & rules updated by QueryBuilder?

function updateRule(args) {

var dataManagerQuery

var qryBldrObj = ej.base.getComponent(document.getElementById("querybuilder"), 'query-builder');

var predicate = qryBldrObj.getPredicate(args.rule);

if (ej.base.isNullOrUndefined(predicate)) {

dataManagerQuery = new ej.data.Query().select(['ShipCity', 'CustomerID', 'OrderID', 'EmployeeID']);

} else {

dataManagerQuery = new ej.data.Query().select(['ShipCity', 'CustomerID', 'OrderID', 'EmployeeID']).where(predicate);

}

var grid = document.getElementById("Grid").ej2_instances[0];

var fltrDataSource = [];

new ej.data.DataManager(@Html.Raw(JsonConvert.SerializeObject(@ViewBag.dataSource)))

.executeQuery(dataManagerQuery)

.then(function (e) {

e.result.forEach(function (data) {

fltrDataSource.push(data);

});

});

grid.dataSource = fltrDataSource;

grid.refresh();

}

[YuvanShankar Arunagiri]

Hi Abaid,

Sorry for the delay. We have confusion on your reported query. The ViewBag is used for value transfer from controller to views and using ajax call also we have fetch data from controller to view. Both are some operations. Can you please share the exact requirement with more details.

Regards,

YuvanShankar A