After the Kendo UI ASP.NET MVC library to the latest version the following code doesn't work:
function Error(e)
{
var gridName = this.options.table.context.id
var grid = $('#' + gridName).data("kendoGrid");
}
The table property is null. How are we supposed to find the sender from the 'e' which is being passed here.
Thanks
There is no error event in the grid API. There is one in the dataSource (which is what I am going to assume you are referencing.)
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-error
This event returns an instance of the dataSource object with the this keyword (You can also access the dataSource with e.sender).
The dataSource is not Grid specific, and it seems Telerik has removed the table property from the dataSource.
This thread has a hack that should get what you want.
Get a reference to Kendo Grid from inside the error handler
It is in the updated edit.
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 Kendo UI timeline view controller and I want to set events from a different datasource, which will be a JavaScript array. I tried to set array to kendoScheduler datasource but event was not bound to the controller and when I double click on timeline it gives an event popup which has unwanted fields which I can't remove. Please find the sample below.
http://dojo.telerik.com/#lilan123/UPuDE/3
I found the solution for this
var scheduler = $("#schedulerTimeLine").data("kendoScheduler");
var dataSource = new kendo.data.SchedulerDataSource({
data: WorkPlanElementList
});
scheduler.setDataSource(dataSource);
I am using Kendo grid with pop up editing mode and editor template.
The editor template consists of a kendo drop down list which is bind through the database and i have inserted the optional label value ie "--select--" at run time in controller which works good for add method but for update method it is not autoselecting the "--select value--" and on click value is selected at second hit. Please help if anyone has any solution to this.
Edited: Please find the below code snippet for my drop down list.
#(Html.Kendo().DropDownList().Name("Type")
.DataTextField("Value")
.DataValueField("TypeID")
.DataSource(source =>
{
source.Read(read => { read.Action("Action Name", "Controller name"); });
})
)
// Controller code for binding drop down list
[AllowAnonymous]
public ActionResult GetTypes()
{
//my code to get list of types from db in object "Type"
Type.Insert(0, new TypeModel() { Value = "--Select--", TypeID = Guid.Empty });
return Json(Type, JsonRequestBehavior.AllowGet);
}
As you said in comment section, Kendo UI 2015 Q1 comes with some new features for dropdown family widget e.g autocomplete, dropdown, multiselect, etc and it also has some bug on it.
So its not your fault that the dropdown won't recognize on the first select event.
The developer had fixed this issue and release a service pack for this, therefore all you have to do is upgrade or downgrade your Kendo UI version..
See this dojo where the grid's filter doesn't work for the first time selection
and if you downgrade its version or upgrade it, it will works fine like in this dojo
Kendo UI 2015 Q1 SP1 Release History, you will see on DropDown section that the issue have been fixed..
I have a Grid bound to a DataSource via MVVM.
I select a row in the Grid, accordingly I use this:
var grid = e.sender;
var rowSelected = grid.dataItem(grid.select());
this.set("currentAccount", rowSelected);
Where "currentAccount" holds the currently selected row. Also, "currentAccount" is bound to a Form to be edited by user.
Now, when I do changes on the form fields, they are not being automatically reflected on Grid. I need to call grid.refresh() for the changes to show on grid. With further debugging, I noticed that the datasource defined inside the viewmodel and that is used for Grid, is not firing it's Change event!
However, when user presses a button "Add new record", the following is used to create a new empty model inside the datasource, setting this new model returned by .add() function to be the "currentAccount":
var newRow = this.get("accRegDatasource").add( this._makeAccountModel( 0 ) );
this.set("currentAccount", newRow);
var row = input_map.grid().find(" tr[data-uid='" + newRow.uid + "']");
input_map.kendoGrid().select(row);
Above, I am adding a new empty row. Once I start editing the Form fields, automatically they are being reflected on the Grid without having to call grid.refresh. Even the datasource defined in the viewmodel is firing it's change event.
Any idea why this behavior?
Thanks
I am using MVVM framework(view/viewmodel). I have a hyperlinked field on one of the kendo grid columns. My requirement is that on clicking the hyperlink on the grid, viewmodel function should call. I am trying to achieve this but not able to call. Please suggest any approach for this.
Define a template as:
template: 'Click-me',
And then define SayHello function as:
function SayHello(me) {
alert("hello");
var item = $("#grid").data("kendoGrid").dataItem($(me).closest("tr"));
console.log("item", item);
item.sayGoodbye();
}
NOTE: That SayHello needs to be global.
Where sayGoodbye is defined in your model.
Example here http://jsfiddle.net/OnaBai/2p3yH/