I am trying to filter a Kendo UI Grid based on Kendo UI DatePicker date but getting this error: "Error: Unable to get property 'dataSource' of undefined or null reference". As shown below, I am trying to pass the selected date as a parameter to the controller of the Kendo Grid.
Below is my View:
@model RainfallReporting.Models.RainFallData
@{
ViewBag.Title = "RainFall Data";
}
<h2>Daily RainFall Data</h2>
<div class="container">
<div class="row">
<p></p>
@(Html.Kendo().DatePicker()
.Name("rfallDate")
.Events(e => e.Change("onChange"))
)
<p></p>
@(Html.Kendo().Grid<RainfallReporting.Models.RainFallData>()
.Name("rfallGrid")
.AutoBind(false)
.Selectable()
.Columns(columns =>
{
columns.Bound(c => c.RecordNo);
columns.Bound(c => c.TimeStamp).Title("RainFall Date").Format("{0:dd-MM-yyyy}");
columns.Bound(c => c.BattVolts_Min);
columns.Bound(c => c.LoggerTemp_Min);
columns.Bound(c => c.LoggerTemp_Max);
columns.Bound(c => c.Rainfall_Tot);
columns.Bound(c => c.Total);
}
)
.DataSource(datasource => datasource
.Ajax()
.PageSize(100)
.Model(model =>
{
model.Id(rfall => rfall.RainFallDataId);
model.Field(rfall => rfall.RainFallDataId);
}
)
.Read(read => read.Action("GetRainfall_ByDate", "RainFall").Data("additionalData"))
)
//Set grid sortable
.Sortable()
//set grid selectable
.Selectable()
//set grid pagable
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
}
)
)
<script>
function additionalData(e) {
var value = $("#rfallDate").data("kendoDatePicker").value();
return { selectedDate: value }; // send the filter value as part of the Read request
}
function onChange() {
var grid = $("rfallGrid").data("kendoGrid");
grid.dataSource.read(); // rebind the Grid's DataSource
}
</script>
</div>
</div>
This is my controller that returns data for the Kendo UI Grid:
public class RainFallController : Controller
{
private RAINFALLDBEntities db = new RAINFALLDBEntities();
public ActionResult GetRainfall_ByDate([DataSourceRequest]DataSourceRequest request,DateTime selectedDate)
{
try
{
var query = from c in db.RainFallDatas
where c.TimeStamp == selectedDate
select c;
query.ToList();
DataSourceResult output = query.ToDataSourceResult(request);
return Json(output, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
}
16 Answers, 1 is accepted
Thank you for the provided code.
The issue occurs because the Grid DOM element is selected without the "#" symbol "$("rfallGrid").data("kendoGrid")". This is causing the Grid to be undefined and then on the next line, the code is accessing the dataSource of the undefined grid variable.
Regards,
Stefan
Progress Telerik
Rank 1
I got around this by writing a javascript function to extract the year, month and day from the Kendo UI datepicker and passing them as parameters into my controller. Its working perfectly fine now but I am still interested to know why my dateformat from Kendo UI Datepicker was not matching up with date from SQL Database.
Rank 1
I got around this by writing a javascript function to extract the year, month and day from the Kendo UI datepicker and passing them as parameters into my controller. Its working perfectly fine now but I am still interested to know why my dateformat from Kendo UI Datepicker was not matching up with date from SQL Database.
Rank 1
Hi Stefan, thanks for replying to my post. OK I managed to get it working but for some reason the date that was being passed into the controller was in the wrong format to the date stored in the database.
I got around this by writing a javascript function to extract the year, month and day from the Kendo UI datepicker and passing them as parameters into my controller. Its working perfectly fine now but I am still interested to know why my dateformat from Kendo UI Datepicker was not matching up with date from SQL Database.
Rank 1
Hi Stefan, thanks for replying to my post. OK I managed to get it working but for some reason the date that was being passed into the controller was in the wrong format to the date stored in the database.
I got around this by writing a javascript function to extract the year, month and day from the Kendo UI datepicker and passing them as parameters into my controller. Its working perfectly fine now but I am still interested to know why my dateformat from Kendo UI Datepicker was not matching up with date from SQL Database.
I'm glad to hear that the issue is resolved and the application is working.
I can assume that the issue occurs as the format in which we send the dates if different than the one expected from the SQL database. We use the standard JavaScript date object to handle dates in our widgets.
As the Kendo UI team has no control over how the JavaScript date object is working, we recommend parsing the dates on the server to ensure that they are sent in the expected format to the database.
Regards,
Stefan
Progress Telerik
Rank 1
Hello Stefan,
My Kendo Grid is working fine when retrieving data from SQL Server Database. However, when I am submitting updates using the update button of Kendo Grid, it is updating the wrong date in SQL. When I try to update a row in the Kendo grid with date in format dd/mm/yy, the update button is updating the row with date in format mm/dd/yy. How do I get around this?
Below is my kendo grid in the view:
@(Html.Kendo().Grid<RainFall.Models.RainFallDataViewModel>()
.Name("rfallGrid")
//.AutoBind(false)
.Columns(columns =>
{
columns.Bound(c => c.RecordNo);
columns.Bound(c => c.TimeStamp).Title("RainFall Date").Format("{0:dd-MM-yy}").EditorTemplateName("DateEditor");
columns.Bound(c => c.BattVolts_Min);
columns.Bound(c => c.LoggerTemp_Min);
columns.Bound(c => c.LoggerTemp_Max);
columns.Bound(c => c.Rainfall_Tot);
columns.Bound(c => c.Total);
columns.Bound(c => c.Updated).EditorTemplateName("CheckBoxEditor").ClientTemplate("<input type='checkbox' #= Updated ? checked='checked':'' # class='chkbx' />");
columns.Bound(c => c.Imported).EditorTemplateName("CheckBoxEditor").ClientTemplate("<input type='checkbox' #= Imported ? checked='checked':'' # class='chkbx' />");
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(200);
})
.DataSource(datasource => datasource
.Ajax()
.Batch(true)
.ServerOperation(false)
.PageSize(100)
.Model(model =>
{
model.Id(rfall => rfall.RainFallDataId);
model.Field(rfall => rfall.RainFallDataId).Editable(false);
model.Field(rfall => rfall.Updated).Editable(false);
model.Field(rfall => rfall.Imported).Editable(false);
})
.Read(read => read.Action("Read_Filter", "RainFall").Data("additionalData"))
.Update(update => update.Action("Update", "RainFall"))
.Create(create => create.Action("Create", "RainFall"))
.Destroy(destroy => destroy.Action("Destroy", "RainFall"))
)
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Selectable()
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
})
)
And this is the update controller:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Update([DataSourceRequest]DataSourceRequest request,
[Bind(Prefix="models")]IEnumerable<RainFallDataViewModel> rainfalldatas)
{
if (rainfalldatas !=null && ModelState.IsValid)
{
foreach (var rainfalldata in rainfalldatas)
{
rainfalldataService.Update(rainfalldata);
}
}
return Json(rainfalldatas.ToDataSourceResult(request, ModelState));
}
And model returning data to controller:
public void Update(RainFallDataViewModel rainfalldata)
{
var entity = new RainFallData();
entity.RainFallDataId = rainfalldata.RainFallDataId;
entity.TimeStamp = rainfalldata.TimeStamp;
entity.RecordNo = rainfalldata.RecordNo;
entity.BattVolts_Min = rainfalldata.BattVolts_Min;
entity.LoggerTemp_Min = rainfalldata.LoggerTemp_Min;
entity.LoggerTemp_Max = rainfalldata.LoggerTemp_Max;
entity.Rainfall_Tot = rainfalldata.Rainfall_Tot;
entity.Total = rainfalldata.Total;
entity.Imported = rainfalldata.Imported;
//entity.Updated = rainfalldata.Updated;
entity.Updated = true;
entities.RainFallDatas.Attach(entity);
entities.Entry(entity).State = EntityState.Modified;
entities.SaveChanges();
}
Rank 1
Hello Stefan,
My Kendo Grid is working fine when retrieving data from SQL Server Database. However, when I am submitting updates using the update button of Kendo Grid, it is updating the wrong date in SQL. When I try to update a row in the Kendo grid with date in format dd/mm/yy, the update button is updating the row with date in format mm/dd/yy. How do I get around this?
I am attaching text file containing my view, controller and model as the forum is security features is preventing me from posting the code.
Currently, there two options to programmatically change the data in the expected format:
1) Using a custom dataSource with a parameterMap function which will allow modifying the request:
https://docs.telerik.com/aspnet-mvc/getting-started/custom-datasource#custom-datatype-crud-operations-setup
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.parameterMap
2) To programmatically change the data on the server before sending it to the SQL database.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
OK, below is code component using custom dataSource with a parameterMap function. How do I use Schema.Parse function to convert TimeStamp datetime field to dd/mm/yy dateformat? I am getting the data to show in the grid using custom dataSource but still not updating the date field correctly.
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.Batch(true)
.PageSize(100)
.ServerPaging(false)
.ServerSorting(false)
.ServerFiltering(false)
.Transport(transport =>
{
transport.Read(read => read.Action("Read_Filter", "RainFall").Data("additionalData"));
transport.Update(update => update.Action("Update", "RainFall"));
transport.Create(create => create.Action("Create", "RainFall"));
transport.Destroy(destroy => destroy.Action("Destroy", "RainFall"));
transport.ParameterMap("parameterMap");
}
)
.Schema(schema => schema
.Data("Data")
.Total("Total")
.Errors("Errors")
// .Parse(@<text>function (data) {
// // configure a parse function only if the response (data) must be
// // transformed in some way before data binding
// return data;
// }</text>)
.Model(model =>
{
model.Id("RainFallDataId");
model.Field("RainFallDataId", typeof(int));
model.Field("TimeStamp", typeof(DateTime));
model.Field("BattVolts_Min", typeof(float));
model.Field("LoggerTemp_Min", typeof(float));
model.Field("LoggerTemp_Max", typeof(float));
model.Field("Rainfall_Tot", typeof(float));
model.Field("Total", typeof(float));
model.Field("Imported", typeof(bool));
model.Field("Updated", typeof(bool));
})
)
)
)
<script>
function parameterMap(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
function additionalData(e) {
dateval = $("#rfallDate").data("kendoDatePicker").value();
datestring = dateval.toString();
var dateObj = new Date(datestring);
return {
rfallYear: dateObj.getFullYear(),
rfallMonth: dateObj.getMonth() + 1,
rfallDay: dateObj.getDate()
}
}
function onChange() {
$("#rfallGrid").data("kendoGrid").dataSource.read();
}
$(function () {
$('#rfallGrid').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#rfallGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Imported', checked);
})
})
$(function () {
$('#rfallGrid').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#rfallGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Updated', checked);
})
})
</script>
Thank you for the provided code.
Please have in mind that the schema.parse is used when parsing an incoming response and if the data is shown initially it should not be needed. If the dates are not shown correctly please check the following approach showing how to parse a TimeStamp to a date:
https://dojo.telerik.com/AqEWaJ
As for the update, the parameterMap should check the date field and modify it before sending it to the server. In order to ensure that the date is sent in the expected format, please a breaking point inside the controller to observe the model value.
Regards,
Stefan
Progress Telerik
Rank 1
Hello Stefan,
OK, data read or fetch from the SQL server is all fine. The date field namely timestamp in my application is formatted correctly as dd/mm/yy and shows on the grid as expected. The problem is in the update or inserting of a new record. Even after I modify a field in a row and as soon as I click on update button, the kendo UI Grid updates that particular row completely changing the dateformat to mm/dd/yy.
This means for example 6th Day of November 2017 (06/11/17) now shows as 11th Day of June 2017 (11/06/17) in the SQL database after I click on update. All I need is to have Kendo Grid Update function to be able to update or insert correctly so I can continue on with completing my application. I really like Kendo UI for MVC but if I don’t get this working, I might look at using other MVC frameworks to develop my application.
Shown below is the code for the view. Please review and advise where I am wrong and how to improve. I just need help in coding my ParameterMap function and Schema.Parse function so that dates are updated or inserted correctly. Also attached is the error I get when I use Schema.Parse. The error doesn't show when Schema.Parse is commented out but still get date updating in wrong format.
@model PJVRainFall.Models.RainFallDataViewModel
@{
ViewBag.Title = "RainFall Data";
}
<h2>Daily Rainfall Data</h2>
<div class="container">
<div class="row">
<p></p>
Select Rainfall Date:
@(Html.Kendo().DatePicker()
.Name("rfallDate")
.HtmlAttributes(new {type = "text"})
.Format("dd/MM/yy")
.Value(DateTime.Now.ToShortDateString())
.Events (e => e.Change("onChange"))
)
<p></p>
@(Html.Kendo().Grid<PJVRainFall.Models.RainFallDataViewModel>()
.Name("rfallGrid")
.Columns(columns =>
{
columns.Bound(c => c.RecordNo);
columns.Bound(c => c.TimeStamp).Title("RainFall Date").Format("{0:dd/MM/yy}").EditorTemplateName("DateEditor");
columns.Bound(c => c.BattVolts_Min);
columns.Bound(c => c.LoggerTemp_Min);
columns.Bound(c => c.LoggerTemp_Max);
columns.Bound(c => c.Rainfall_Tot);
columns.Bound(c => c.Total);
columns.Bound(c => c.Updated).EditorTemplateName("CheckBoxEditor").ClientTemplate("<input type='checkbox' #= Updated ? checked='checked':'' # class='chkbx' />");
columns.Bound(c => c.Imported).EditorTemplateName("CheckBoxEditor").ClientTemplate("<input type='checkbox' #= Imported ? checked='checked':'' # class='chkbx' />");
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(200);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Selectable()
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
})
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.Batch(true)
.PageSize(100)
.ServerPaging(false)
.ServerSorting(false)
.ServerFiltering(false)
.Transport(transport =>
{
transport.Read(read => read.Action("Read_Filter", "RainFall").Data("additionalData"));
transport.Update(update => update.Action("Update", "RainFall"));
transport.Create(create => create.Action("Create", "RainFall"));
transport.Destroy(destroy => destroy.Action("Destroy", "RainFall"));
transport.ParameterMap("parameterMap");
}
)
.Schema(schema => schema
.Data("Data")
.Total("Total")
.Errors("Errors")
.Parse(@<text>function (data) {
$.each(data, function(i, val){
val.TimeStamp = kendo.parseDate(val.TimeStamp,"dd/MM/yy");
}
});
return data;
}</text>)
.Model(model =>
{
model.Id("RainFallDataId");
model.Field("RainFallDataId", typeof(int));
model.Field("TimeStamp", typeof(DateTime));
model.Field("BattVolts_Min", typeof(float));
model.Field("LoggerTemp_Min", typeof(float));
model.Field("LoggerTemp_Max", typeof(float));
model.Field("Rainfall_Tot", typeof(float));
model.Field("Total", typeof(float));
model.Field("Imported", typeof(bool));
model.Field("Updated", typeof(bool));
})
)
)
)
<script>
function parameterMap(options, operation) {
if (operation != "read") {
var parsedDate = kendo.toString(options.TimeStamp, "dd/MM/yyyy");
alert(parsedDate);
options.TimeStamp = parsedDate;
return options;
}
}
function additionalData(e) {
dateval = $("#rfallDate").data("kendoDatePicker").value();
datestring = dateval.toString();
var dateObj = new Date(datestring);
return {
rfallYear: dateObj.getFullYear(),
rfallMonth: dateObj.getMonth() + 1,
rfallDay: dateObj.getDate()
}
}
function onChange() {
$("#rfallGrid").data("kendoGrid").dataSource.read();
}
$(function () {
$('#rfallGrid').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#rfallGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Imported', checked);
})
})
$(function () {
$('#rfallGrid').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#rfallGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Updated', checked);
})
})
</script>
</div>
</div>
Thank you for the details.
In general, I can suggest checking the request parameters inside the request in the network tap. If the parameters are sent currently by the Grid, then I can assume that the parsing on the server may be causing the issue if the cultures are different. The date format "mm/dd/yy" seems like a US date format and if the server with a US culture it is may be parsing the dates in that format. In general, we recommend using UTC on the client and on the server. Please check the following article with the example:
https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/utc-time-on-both-server-and-client
If this is not an option, please check how in which format the dates are sent to the server and if additional parsing on the server is needed, as if the conversion is made on the server, any changes made in the parameterMap will not be taken into account.
If the response is correctly shown then the schema.parse could be omitted.
In case, an additional assistance is needed, please provide a fully runnable example and I will gladly provide a suggestion best suited for it.
Regards,
Stefan
Progress Telerik
Rank 1
Hello Stefan,
Thank you for your time in assisting me in trying to get this to work. I tried using the UTC sample but it also did not work. I have SQL 2012 Standard as well as Visual Studio 2013 Ultimate with Kendo UI for ASP.NET MVC Q1 2016 all installed on my laptop. The Region and Language setting on my laptop is English (Australia) and Location is Papua New Guinea with short date format set as dd/MM/yy.
Running the command dbcc useroptions on the SQL Server installed on my laptop shows language as us_english and dateformat as mdy.
I am attaching a small application similar to the original
problem application in MVC that is also not updating the DateOfBirth field as
expected. On the Kendo Grid, it shows as dd/MM/yy but as soon as I click edit
and update the DateOfBirth in the Kendo Grid, it saves the data in the SQL
Server in MM/dd/yy format .When I refresh the webpage, I can see that
DateOfBirth as changed on the grid to reflect the dateformat stored in the SQL
Database. Please have a look at the sample and advise where I am going wrong.
Note that I have removed packages folder in the solution as
well as contents of Kendo js and styles folders with all the kendo javascript
and css files and script the sample database to reduce the size of the zip
file.
For your information, I work for a mining company that has purchased full license of Telerik DevCraft Complete+ PHP & JSP. We have a lot of upcoming projects that will be date driven so I really want to get this right before exploring further into other capabilities of Kendo UI for MVC.
There is nothing specific in the attached application, so the only thing that I could suggest to test on your end is to unify the client-side and server-side culture as documented in the following help article:
If the above does not resolve the problem, you could try to remove the Format that you are setting in the editor and in the model, just for testing purposes.
Looking forward to your reply with the results.
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Hello Konstantin,
Thanks for the lead. I am now able to update my datetime column with correct date format (dd/MM/yy) after including the js/cultures/kendo.culture.en-AU.min.js file in BundleConfig.cs and setting kendo.culture("en-AU") in a script file in the _Layout.cshtml of my ASP.NET MVC 5 solution.
Thanks also to Stefan for the support.