I have a page which uses a Kendo Grid attached to a Kendo DataSource which pulls data from the server. When the page initially loads another request is done by the datasource to pull data. This causes a delay in the page actually loading. What I would like to do is send the initial data model in the page response but I cannot find a what to push that data into the DataSource. Has anyone else tried doing this?
Pass json data in your page first call.
Your pass json is set into model.
Set your json into data.
EX.
var dataSource = new kendo.data.DataSource({
data: [
{ name: "John Doe", age: 33 }
]
});
Set datasource of grid.
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
Related
I am trying to use a syncfusion ej-grid to auto generate a grid using data retrieved from an ajax call. In doing so, I am running into a problem.
I am getting an error message when the page first renders saying "DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid". While I understand this, I am struggling because I don't know anything about the datasource until after the ajax call is returned.
This is a .NET CORE 5 razor page....
My razor page:
(note: 'data' below is a json serialized System.Data.DataTable).
<ej-grid id="gridResults" allowPaging="true"></ej-grid>
<script type="text/javascript>
function ajaxResponse(data) {
$('#gridResults').ejGrid({
datasource: data
});
}
</script>
So my questions are two-fold:
First, is there a way to bypass the initial error I am getting about the datasource not being set (since I don't have a datasource yet)...
Second, Will my approach of providing a serialized DataTable work, or do I need to do something different to pass the data via Javascript like this?
Right now when I return from the ajax call, I don't get any errors, but nothing happens...
Thanks in advance!
Greetings from Syncfusion Support.
Query 1: I am getting an error message when the page first renders saying "DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid".
This issue will occur when we do not bind dataSource and define columns to the Grid. For rendering Grid, we should either define columns or bind data source at the initial rendering.
Since you are not binding data in initial rendering, we suggest you to define columns so that Grid will be rendered without any errors.
Query 2: Will my approach of providing a serialized DataTable work, or do I need to do something different to pass the data via Javascript like this?
For binding data table to Grid after serializing it, we should call the dataSource method of grid and pass the data as parameter to it as shown in below code,
<ej-button id="repeatButton" text="click" size="Medium" show-rounded-corner="true" click="btnClick" />
<ej-grid id="FlatGrid" allow-paging="true">
<e-columns>
<e-column field="No" header-text="Order ID" is-primary-key="true"></e-column>
<e-column field="Name" header-text="Employee ID"></e-column>
</e-columns>
</ej-grid>
<script>
function btnClick(args) {
$.ajax({
url: '/Grid/DataSource',
dataType: "json",
type: 'POST',
success: function (data) {
var grid = $('.e-grid').data("ejGrid"); // grid instance
grid.dataSource(data);
// update grid data source by calling dataSource method and passing data
}
})
}
</script>
[HttpPost]
public ActionResult DataSource()
{
System.Data.DataTable dt = new DataTable("Table1");
DataColumn cl = new DataColumn("No");
dt.Columns.Add(cl);
cl = new DataColumn("Name");
dt.Columns.Add(cl);
DataRow dataRow = dt.NewRow();
dataRow[0] = 1;
dataRow[1] = "John";
dt.Rows.Add(dataRow);
var data1 = Utils.DataTableToJson(dt); // method to serialize data table
return Json(data1); // fetching and returning boolean column
}
In the above code example, we have fetched data using ajax call in button click and bind it to grid using dataSource method.
Please check the below API help documentation,
https://help.syncfusion.com/api/js/ejgrid#methods:datasource
Kindly get back to us for further assistance.
Regards,
Padmavathy Kamalanathan
I have a application that has a kendo grid.
I can filter the grid using several dropdownlists that are outside the grid.
When I click on search, I add filters to the datasource filter list. For example,
var dataSource = $("#grid").data("kendoGrid").dataSource;
var dataSourceFilterQuery = new Array();
if ($("#something").data("kendoDropDownList").value() !== null) {
dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
}
dataSource.filter(dataSourceFilterQuery);
Then I get the results I want. It works.
I then have the possibility of saving the values of all the dropdownlists as one filter in localStorage.
const filtersObject = {
Something: whatever.value(),
...
};
this.storage.setItem("Filter", JSON.stringify(filtersObject));
When I restart the application, the dropdownlists are populated with whatever is in localStorage
const filter = JSON.parse(localStorage.getItem("Filter"));
$("#something").data("kendoDropDownList").value(filters.whatever || "");
}
The thing is, I wanted to add these filters, if they exist on localStorage, to the datasource when the application starts so that the user can see the results of the filter he saved when the applications starts and not have to click on search again.
So, what I want is to do apply this
var dataSource = $("#grid").data("kendoGrid").dataSource;
var dataSourceFilterQuery = new Array();
if ($("#something").data("kendoDropDownList").value() !== null) {
dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
}
dataSource.filter(dataSourceFilterQuery);
before the grid is displayed.
Is this possible?
Tks in advance.
Configure the Grid with
autoBind: false
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind
and when the page loads, call your filter setup, then trigger the grid load manually (via dataSource.read())
I have strange issue while setting the total record count for the Kendo Grid.
I am populating the grid based on a search query. The results is loaded upon the submit button click .
Grid pagination is controlled though server side code. So the search results are reduced to the subset of the result and the number of records retrieved are as per the page size set for the grid .
I also mentioned a field to get the total number of results .
After the server side execution , the results are send back in JSON format . The response contains the result data and the TotalRecordCount .
I am setting the results to the Grid like this (This works !)
$('#SearchResult').data('kendoGrid').dataSource.data(response.SearchResults)
But the problem is ,number of pages is always sets to 1
I tried setting the "total" property of the Grid datasource explicitly ,
$('#SearchResult').data('kendoGrid').dataSource.total(response.TotalResults)
but this is not setting properly
I tried different methods
var dataSource = new kendo.data.DataSource({
data: response.SearchResults,
total: response.TotalRecordNumbers
});
var resultGrid = $('#SearchResult').data('kendoGrid');
resultGrid.setDataSource(dataSource);//does not work
I am able to populate the results, but the issue is since the total is not set properly, the pagination is not working .
Any help is much appreciated .
Thank you
You have to set the 'total' on the schema, not on the dataSource itself.
var dataSource = new kendo.data.DataSource({
transport: {
/* transport configuration */
},
serverGrouping: true,
schema: {
total: function(response) {
return response.total;
}
}
});
This example is copied from the official Doku
I have a Grid, when users click a button, it gets some parameters and refresh datasource:
var grdUP = $("#weblogGrid").data("kendoGrid");
grdUP.dataSource.transport.options.read.url = url; // new url
//Read data source to update
grdUP.dataSource.read();
it works fine. the new data shows in the grid. And the grid has another button, which will export the data to excel. I'm using below code (also tried the built-in button):
var grid = $("#weblogGrid").data("kendoGrid");
grid.saveAsExcel();
it actually exports the data to excel file.
However, it always exports the initial data in the grid, not the data user refreshed.
For example, when the grid first shows up, it has 10 rows data. After refresh, it has 5 rows data. Now, if export, it still exports 10 rows data although the data in grid is different.
Is this a Bug? or, maybe I did something wrong in refresh grid?
Thanks
===============================
edit to clarify something
Thanks. currently, I got new data using:
var url = '/WeblogReport/GetWebLogList?fromDate=' + fromDate + '&toDate=' + toDate;
var grdUP = $("#myGrid").data("kendoGrid");
//Set url property of the grid data source
grdUP.dataSource.transport.options.read.url = url;
//Read data source to update
grdUP.dataSource.read();
So I changed to:
// get value of date
....
$.ajax({
type: "GET",
dataType: "json",
url: "/WeblogReport/GetWebLogList",
data: { FromDate: fromDate, ToDate: toDate },
success: function (data) {
alert(data);
var grid = $("#myGrid").data("kendoGrid");
grid.dataSource.data(data);
grid.refresh();
}
});
Somehow, it does not show the new data. Any suggestions?
Thank you very much.
add more clarification
Here is in the Json call.
success: function (data) {
var newdata = [{ "UserName": "username", "ClientIP": "1.1.1.1"}];
$("#myGrid").data("kendoGrid").dataSource.data(newdata);
$("#myGrid").data("kendoGrid").refresh();
//$("#myGrid").data("kendoGrid").saveAsExcel();
}
Set both of the following fields to make Excel export work:
grid.dataSource.transport.options.read.url = url;
grid.options.dataSource.transport.read.url = url;
check this:
http://jsfiddle.net/Sowjanya51/o8cw3vj8/
$('#grid1').data('kendoGrid').dataSource.data(newdata);
$('#grid1').data('kendoGrid').refresh();
You need to update the dataSource and reload the grid,otherwise the grid dataSource will still have reference to old data even though UI displays the new data.
Just set the "allPages" option on your grid to "True". like so :
excel: {
fileName: "Export.xlsx",
filterable: true,
allPages: true
},
Your original solution should be fine if you refresh the grid after you read from the data source.
var grdUP = $("#weblogGrid").data("kendoGrid");
grdUP.dataSource.transport.options.read.url = url; // new url
//Read data source to update
grdUP.dataSource.read();
//add this line to refresh the active data set in the grid
grdUP.refresh();
I had run into the same issue and this solved it for me. The only difference between your approach and mine is that you're changing the data source's read URL, whereas I was changing the data parameters for the read method. Shouldn't make any difference, but I'll mention that just in case.
I have a function which uses following code to fetch form values-
var formValues = this.myForm.getForm().getValues();
MyForm contains a combobox which loads with form. (There are two separate requests for combo load and form load)
As these two requests are loading at the same time, above code do not return combo values as they are still loading.
Is there any way to check whether combo values are loaded and then only send ajax request for form load so that above code will have all form values?
Edited:
LoadComboBox function just fills the data with some store.
Following is the code for form load-
loadFormGrid: function (){
var allValues = this.myForm.getForm().getValues(); // this do not consider combobox values
Ext.Ajax.request({
params: {action: 'getList', data : allValues },
// ... some code
});
}
I would do something like:
On the success event of the combo box load, call the load method of the form/make your ajax request to populate the fields of the form.
EDIT:
Here is what I mean:
The place where you instantiate your ComboBox probably looks like:
var combo = new Ext.form.ComboBox({
store : new someStoreType({
//add to catch the loaded event
listeners : {
'load' : function(store, recs, options){
loadFormGrid();
}
}
})
});
The store listener above ('load') will catch when the combo box is loaded and will call the function to populate/load the form.