Hi, I'm implementing a Scheduler in .NET using MVC. The scheduler runs on top of Jquery. But my code is not working. I needed to try if I can use my own data, so I wrote my own controller method to retrieve data from a database and return it in JSON and not JSONP since it's all running on the same host. My view is as follows.
Index.cshtml
@{
ViewBag.Title = "Index";
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.timezones.min.js"></script>
<h2>Index</h2>
<div id="example">
<div id="team-schedule">
<div id="orders">
<input checked type="checkbox" id="order1" aria-label="Order 1" value="200023">
<input checked type="checkbox" id="order2" aria-label="Order 2" value="200027">
<input type="checkbox" id="order3" aria-label="Order 3" value="200033">
</div>
</div>
<div id="scheduler"></div>
</div>
@section SchedulerScripts{
<script>
$(document).ready(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda",
{ type: "timeline", eventHeight: 50}
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://localhost:51329/Scheduler/SchedulerJSONData", //This is the URL to retrieve my JSON data. Scheduler is the //controller where the SchedulerJSONData method is implemented.
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "orderId",
fields: {
orderNo: { from: "ORDER_NO" },
releaseNo: { from: "RELEASE_NO" },
operationNo: { from: "OPERATION_NO" },
start: { type: "date", from: "OP_START_DATE" },
end: { type: "date", from: "OP_FINISH_DATE" },
description: { from: "OPERATION_DESCRIPTION" },
}
}
},
filter: {
logic: "or",
filters: [
{ field: "orderNo", operator: "eq", value: '200023' },
{ field: "orderNo", operator: "eq", value: '200027' },
{ field: "orderNo", operator: "eq", value: '200033' },
]
}
},
resources: [
{
field: "orderNo",
title: "Order",
dataSource: [
{ text: "Order 1", value: '200023', color: "#f8a398" },
{ text: "Order 2", value: '200027', color: "#51a0ed" },
{ text: "Order 3", value: '200033', color: "#56ca85" }
]
}
]
});
$("#orders :checkbox").change(function(e) {
var checked = $.map($("#orders :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.orderNo, checked) >= 0;
}
});
});
});
</script>
}
My controller method to retrieve data from the database is as follows.
public ActionResult SchedulerJSONData() {
con.Open(); //con is my database connection string.
OleDbDataAdapter oda = new OleDbDataAdapter("SELECT ORDER_NO, RELEASE_NO, OPERATION_NO, OP_START_DATE, OP_FINISH_DATE, OPERATION_DESCRIPTION FROM SHOP_ORDER_OPERATION_TAB where ORDER_NO='200023' OR ORDER_NO='200027' OR ORDER_NO='200033'", con);
DataTable dt = new DataTable();
oda.Fill(dt);
string JSONString = string.Empty;
JSONString = JsonConvert.SerializeObject(dt);
return Json(JSONString, JsonRequestBehavior.AllowGet);
}
This method returns the JSON data correctly, but when I plug the URL in bold above to retrieve the JSON in the scheduler, it doesn't work. Can anyone figure out what I have done wrong?
8 Answers, 1 is accepted
I have used the provided code sample to prepare a sample ASP.NET MVC solution, which you can find as an attached file.
With it, the Scheduler initializes as expected and is properly populated with the server data. Important to note is that in this case the received data from the server is in the format: {"Data":[ {}, {}, {} ]}. If this is the case, then we need to specify the field from the server response which contains the data items in the Scheduler configuration through the schema.data() option:
schema: { model: { id: "taskId", fields: { taskId: { from: "TaskID", type: "number" }, title: { from: "Title" start: { type: "date", from: "Start" }, end: { type: "date", from: "End" }, ownerId: { from: "OwnerID" } } }, data: "Data"}Please inspect the solution and try to integrate it in your project. In case the issue continues to persist, you can modify the solution, so that the problem is reproduced and then send it back to us for a review.
Regards,
Dimitar
Progress Telerik
Rank 1
Also, can you please explain how options like update, create, destroy work. My issue is whether they edit the data all the way up to the data source, i.e. the database or do they just edit a data structure like a JSON array in the memory. I came across a demo in your documentation but they don't clarify how they work.
update: { dataType: "jsonp" }, create: { dataType: "jsonp" }, destroy: { dataType: "jsonp" },The DataSource component can work with local data or remote data. In both cases the CRUD operations are managed by the Kendo UI DataSource transport. This is a JavaScript object that can be configured to make requests to predefined URLs.
CRUD operations with remote data rely on server code to perform the read, update, create and destroy actions. Instead of configuring client functions, the dataSource transport defines remote service URLs and the expected format in which data should be sent and received. For example, the read transport configuration sends an ajax request to the server to retrieve the data that is needed to populate the widget.
More information and examples can be found in the CRUD Data Operations Article.
Regards,
Dimitar
Progress Telerik
Rank 1
Rank 1
Hi,
In the example here, you talk about a request made to Read method, which is not a big deal.
However, when I do a post request to a method in my local web api aster filling in the scheduler data, the request finds the method but the data I get is "null". I am using asp.net core. How can I get the "options.models" data which seems to be stringfied. It is all null for me. What might be the problem?
Frank.
Rank 1
public JsonResult Create([Bind(Prefix = "models")]string data){ var items = JsonConvert.DeserializeObject<List<model>>(data);}
This should give you your data from the stringify data to a list of models
Rank 1
Hi Dante,
Thank you for your reply.
I have not tried your solution yet but I did yesterday something similar and It also worked.
What I did: I first figured out I would bind the data posted to a string type variable and cast it to a generic list of my model class as in your solution when deserializing. However, as the model binding attribute I used "[FromForm]... "create( [FromForm] string data)" ; no other attribute would work. I will also use your suggestion of [Bind(Prefix="models")] and see what happens.
Thanks
Fevzi
Dante is indeed correct that you should be able to use the [Bind(Prefix="models")] to bind the incoming form to an instance of your model. Refer to the following StackOverflow thread for additional information on the same topic:
Regards,
Dimitar
Progress Telerik