We Keep Coding

How to Pass Parameters to SignalR Read Opeartion of KendoUI DataSource

I am using a Kendo UI dataSource to bind KendoUIScheduler through SignalR. How can I pass parameters to the read operation of the dataSource with SignalR bindings?
I am using the following code:
var hub = $.connection.schedulerHub;
var hubStart = $.connection.hub.start();
$('#scheduler').kendoScheduler({
mobile: true,
height: 600,
views: [
'day',
'week',
'month',
'agenda',
{ type: 'timeline', selected: true }
],
timezone: 'Etc/UTC',
dataSource: {
type: "signalr",
push: function (e) {
alert(e.type);
},
autoSync: true,
transport: {
signalr: {
promise: hubStart,
hub: hub,
server: {
read:"read",
update: "update",
destroy: "destroy",
create: "create"
},
client: {
read:"read",
update: "update",
destroy: "destroy",
create: "create"
}
}
},
schema: {
model: {
id: 'SchedulerID',
fields: {
SchedulerID: { type: 'number', from: 'SchedulerID' },
start: { type: 'date', from: 'Start' },
end: { type: 'date', from: 'End' },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
Title: { from: 'Title' },
isAllDay: { type: 'boolean', from: 'IsAllDay' },
recurrenceId: { from: "RecurrenceId" },
recurrenceException: { from: "RecurrenceException" },
recurrenceRule: { from: "RecurrenceRule" },
Users: { nullable: true, from: 'Users' },
},
}
}
},
group: {
resources: ['Users'],
orientation: 'vertical'
},
resources: [
{
field: 'Users',
name: 'Users',
dataSource: Users,
multiple: false,
title: 'Users'
}
]
});

I realize this question is old, but I was trying to find this same answer and didn't find any clear solutions. I did find some hints in other threads that led me to a solution although I'm sure there are better ones (I wasn't able to figure out how to send the parameters separately - only as one object).
In your datasource, use the parameterMap function to put in whatever custom parameters you want. When binding to WCF (commented code) you can separate the parameters for the call but I couldn't get that to work with the SignalR implementation.
type: "signalr",
transport: {
parameterMap: function (data, type) {
switch (type) {
case "read":
{
// this works
var request = {};
var chkunsub = $('#chkunsubscribed').is(':checked');
request.unsubscribed = chkunsub;
request.oKendo = data;
return request;
// Does not work (separating parameters)
//return {
// unsubscribed: chkunsub,
// oKendo: data
//};
}
// Does not work either (separating parameters)
//return kendo.stringify({
// unsubscribed: chkunsub ? 1 : 0,
// oKendo: data
//});
}
},
Note that the "data" variable contains the filter, paging, grouping, etc. (I'm binding to a grid but I would think it's the same for scheduler).
Then on the server side in your hub, you just need to mirror the class structure like this (my CKendoGridOptions class has all of the properties from the API such as page, skip, filter, etc).
Public Class EventRequestData
Public Property unsubscribed As Boolean
Public Property oKendo As CKendoGridOptions
End Class
' This works
Public Function read(data As EventRequestData) As OrmedReturnData
Dim oReturn As New OrmedReturnData
If IsLoggingEnabled() Then
WriteToEventLog("Hub getevent_item called")
End If
Dim oToken As TokenHelper.TokenData = TokenHelper.ValidateToken(New Guid(Context.Request.Cookies("token").Value))
If oToken.TokenOK = False Then
oReturn.Success = False
oReturn.ErrorMessage = ERROR_INVALID_TOKEN
Else
Dim oData As New EventItems
oReturn = oData.Getevent_items(data.unsubscribed, data.oKendo)
End If
Return oReturn
End Function
I hope this helps someone else who is trying to pass parameters to a read function using Kendo in jQuery and SignalR.

Create chart with serverside object data using JSON

What I'm trying to do:
Create a chart and have it display data from the server (held in a C# object) every x mminutes. From googling using JSON (which I've never used before) would be best practice.
What I have so far:
I have the backend C# (using MVC 5) getting the correct data, lots of objects with lots of properties, some I want to display in the chart, others I don't.
I'v also started on a JSON function in my Index.cshtml which is where my graph is (currently set with static data, it's a simple jQuery plug-in).
The problem:
Unsure how to get specific object properties, to the JSON data and then to the chart data.
What would be the best way of achieving this?
Code:
Controller:
// GET: Graphs
public ActionResult Index()
{
return View();
}
public static List<server> GetServer()
{
Api api = new Api();
List<server> sList = api.GetServerStats();
return sList;
}
Script in INdex:
<script src="~/Scripts/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("someChart", {
title: {
text: "Space left on Server vs Total"
},
data: [
{
type: "column",
name: "Totals",
showInLegend: true,
dataPoints: [
{ label: "Space", y: 20 }
]
},
{
type: "column",
name: "Used",
showInLegend: true,
dataPoints: [
{ label: "Space", y: 10 }
]
}
],
axisY: {
prefix: "",
suffix: "GB"
}
});
chart.render();
}
$(document).ready(function () {
window.onload(function () {
$.ajax({
type: "POST",
url: "GraphController/GetServer",
data: { someParameter: "some value" },// array of values from object or just object
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
// need to push into jQuery function
}
});
});
});
</script>

Returning a serialised list of objects couldn't be easier with MVC, it takes a lot of the heavy lifting out of it for you if you just return a JsonResult:
public ActionResult GetServer() {
var api = new Api();
var = api.GetServerStats();
return Json(sList);
}
Debug the success of your ajax call to find out if result is what you want and expect, and then pass it to your chart script.
NOTE: From your use of wording (i.e. 'lots'), I'd recommend cutting down your list of server properties you return to your view. This is a perfect candidate for creating what's called a view model. This view model would be a kind of 'lite' version of your full server object. It would improve efficiency of serialisation for starters and, semantically, makes more sense.

I was doing same thing with highcharts and here is an approximate solution for you:
public ActionResult GetServer()
{
Dictionnary<server> sList = new Dictionnary<string,object>();
sList.Add("Totals",new{
type= "column",
name= "Totals",
showInLegend= true,
dataPoints= new List<dynamic>(){
new{ label= "Space", y= 20}/*,
new{ label= "label2", y= 30},*/
}
});
sList.Add("Totals",new{
type= "column",
name= "Used",
showInLegend= true,
dataPoints= new List<dynamic>(){
new{ label= "Space", y= 10}/*,
new{ label= "label2", y= 40},*/
}
});
return Json(sList, "text/json", JsonRequestBehavior.AllowGet);
}
Change window.onload=function(){} in
function drawChart(serverData){
var chart = new CanvasJS.Chart("someChart", {
title: {
text: "Space left on Server vs Total"
},
data: serverData,
axisY: {
prefix: "",
suffix: "GB"
}
});
chart.render();
}
$(document).ready(function () {
$.ajax({
type: "POST",
url: "GraphController/GetStuff",
data: { someParameter: "some value" },
// array of values from object or just object
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (serverData) {
// need to push into jQuery function
drawChart(serverData);
}
});
});

Passing JSON to WebApi in MVC5

im facing issues in syntax to pass json array from jquery to the webapi in my mvc5 project .
Following is my code :-
C# code:-
//GET Instance
// GET: api/PostDatas
public IQueryable<PostData> GetPostDatas()
{
return db.PostDatas;
}
//POST Instance
// POST: api/PostDatas
[ResponseType(typeof(PostData))]
public IHttpActionResult PostPostData(PostData postData)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.PostDatas.Add(postData);
db.SaveChanges();
return CreatedAtRoute("DefaultApi", new { id = postData.postDataID }, postData);
}
JQuery
<script>
function fnpostdata() {
var model = {
"userid": "01",
"Description": "Desc",
"photoid": "03"
};
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: "/api/PostDatas/",
data: model,
success: function (data) {
alert('success');
},
error: function (error) {
jsonValue = jQuery.parseJSON(error.responseText);
jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
}
});
}
</script>
Im not able to send the data using jquery to my c# controller , just need to understand the syntax . Thank you .

check following things in your code:
1) Method attribute [HttpPost]
2) [FromBody] for input model
3) Check PostData class, it should contain public properties for userid, Description and photoid with case-sensitive of variable names.
and mainly change your AJAX request code to:
function fnpostdata() {
var model = {
"userid": "01",
"Description": "Desc",
"photoid": "03"
};
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: "/api/PostDatas/",
data: JSON.stringify(model), //i have added JSON.stringify here
success: function (data) {
alert('success');
},
error: function (error) {
jsonValue = jQuery.parseJSON(error.responseText);
jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
}
});
}
Please let me know, is this works for you?

I included [FromBody] in the parameter in my previous project.
Something like this:
[HttpPost]
public IHttpActionResult Register([FromBody]PostData postData)
{
// some codes here
}
I was able to read the JSON data from that notation.

Kendo UI Scheduler: Delete/Edit/Update only specified events

Im working with the Kendo Scheduler and users can create, delete, update, edit events to my local database. But I'm working with different users on this webapp so I only want those users to be able to edit, delete and update events that they personally created. So user 1 can delete events created by user 1 but can't delete events created by user 2 or 3 etc...
I thought I just modify the model/controller to check the userID of the logged in user against the userID in the db of the event.
public virtual JsonResult Meetings_Destroy([DataSourceRequest] DataSourceRequest request, MeetingViewModel meeting)
{
var userid = System.Convert.ToInt32(Session["userID"]);
if (ModelState.IsValid)
{
if (meeting.UserID== userid)
{
meetingService.Delete(meeting, ModelState);
}
else
{
"cant delete"
}
}
return Json(new[] { meeting });
}
But this doesn't seem to work, when click on delete the event dissapears but after reloading you see that it actually isn't really deleted from the db ... That of course isn't a good solution cause the goal is of course that that user just can't delete that event.
Any idea's?
VIEW
$(function () {
$("#scheduler").kendoScheduler({
date: new Date(Date.now()),
startTime: new Date(2013, 5, 13, 9, 0, 0, 0),
height: 800,
timezone: "Etc/UTC",
dataSource: {
transport: {
read: {
url: "#Url.Action("Meetings_Read", "Home")",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
update: {
url: "#Url.Action("Meetings_Update", "Home")",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
create: {
url: "#Url.Action("Meetings_Create", "Home")",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
destroy: {
url: "#Url.Action("Meetings_Destroy", "Home")",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation === "read") {
var scheduler = $("#scheduler").data("kendoScheduler");
var result = {
start: scheduler.view().startDate(),
end: scheduler.view().endDate()
}
return kendo.stringify(result);
}
return kendo.stringify(options);
}
},
error: error_handler,
schema: {
model: {
id: "MeetingID",
fields: {
MeetingID: { type: "number" },
title: { from: "Title", type: "string", defaultValue: "No title", validation: { required: true } },
description: { from: "Description", type: "string" },
start: { from: "Start", type: "date" },
startTimezone: { from: "StartTimezone", type: "string" },
end: { from: "End", type: "date" },
endTimezone: { from: "EndTimezone", type: "string" },
recurrenceRule: { from: "RecurrenceRule", type: "string" },
recurrenceId: { from: "RecurrenceID", type: "number", defaultValue: null },
recurrenceException: { from: "RecurrenceException", type: "string" },
isAllDay: { from: "IsAllDay", type: "boolean" },
Timezone: { type: "string" },
RoomID: { type: "number", defaultValue: null },
Attendees: { type: "object" }
}
}
}
},
});
});
JAVASCRIPT
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.one("dataBinding", function (e) {
e.preventDefault();
for (var error in e.errors) {
alert("can't delete")
}
})
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
CONTROLLER
public virtual JsonResult Meetings_Destroy([DataSourceRequest] DataSourceRequest request, MeetingViewModel meeting)
{
if (ModelState.IsValid)
{
if(meeting.UserID == System.Convert.ToInt32(Session["userID"]))
{
meetingService.Delete(meeting, ModelState);
}
else
{
ModelState.AddModelError("","cant delete");
}
}
return Json(new[] { meeting });
}

I have a similar situation with my project where I have users that have limited access to do things on the calendar. I have found that you have to prevent things like Adds, Edits, and Deletes, that a user should not do, you can do this with the JavaScript events. Then, in the JavaScript functions, if a condiation is met (or not), then call the e.preventDefault(); method. Here's the demo on Client Events.
View (HTML 5 snippet)
remove: RemoveMe,
edit: EditMe,
add: AddMe,
View (MVC version snippet)
.Events(events =>
{
events.Add("AddMe").Edit("EditMe").Remove("RemoveMe");
})
JavaScript
function AddMe (e) {
if (SomeValue != SomeOtherValue)
e.preventDefault();
};
function EditMe (e) {
if (SomeValue != SomeOtherValue)
e.preventDefault();
};
function RemoveMe (e) {
if (SomeValue != SomeOtherValue)
e.preventDefault();
};
So, the good news is that this prevents the Calendar from showing updates (whether a Delete occurs or not), but it doesn't prevent the Delete Prompt (aka. "Are you sure you want to delete this event?"). Preventing the actions on the Client side is the way to go and you could extend it with alerts or notifications to the screen (since you would have the condition in the JavaScript function anyways), all to inform the user they can't do something.

ModelState.AddModelError("cant delete");
return Json(ModelState.ToDataSourceResult());
in the view
.Read("Grouping_Horizontal_Read", "Scheduler")
.Create("Grouping_Horizontal_Create", "Scheduler")
.Destroy("Grouping_Horizontal_Destroy", "Scheduler")
.Update("Grouping_Horizontal_Update", "Scheduler")
.Events(events => events.Error("error"))
.Events(events => events.Error("error")) is the trick and now importent the funktion for the error
function error(args) {
if (args.errors) {
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.one("dataBinding", function (e) {
e.preventDefault(); // cancel scheduler rebind if error occurs
for (var error in args.errors) {
alert(error + " args: " + args.errors[error].errors[0])
}
});
args.sender.cancelChanges();
}
}

It depends on how you are creating the meeting too.
Because to remove a task you just need a unique ID.
Right now it's just being deleted in JSON but not in the backend database, as I guess that meeting.id is not matching to the taskID generated when create event was fired.
I recommend to save taskID in ViewBag, SQL Table or somewhere, when task is created in the scheduler. Then pass this id as the parameter in your Meetings_Destroy method, when remove event is fired.
And [as mentioned in previous answer] use JavaScript remove event to validate logged in user, as e.preventDefault() can be used to restrict Meetings_Destroy method being fired if condition is not met. If debug is reached at Controller Method [Meetings_Destroy] it would remove event from scheduler [Either successfully removed in database or not], i-e from front end, but would bring it back on page refresh.

I have a same situation. I took a different approach to resolve it. In the edit function I compare task id and current userId and than I simply hide those button save, cancel and delete. These button will so only a user who created that.
function(e)
{
var customHide13= $(".k-scheduler-update, .k-scheduler-delete, .k-scheduler-cancel");
if (taskId == userId)
customHide13.show();
else
customHide13.hide();
},

KendoUI Cascading Dropdowns -- Retrieving json data from dropdown to use in controller

Oh boy what did I get myself into this time. Have to get some KendoUI cascading dropdrown lists working properly but I figure I will start off with two for now. Basically I need to retrieve whatever the user chooses for the first list in the view and send that back to the controller then pass it to an Entity Framework method (which I already have setup). Here is what I have now. The controller then passes back the appropriate 2nd dropdown list based on the first dropdown division value selected. I have tried using the Kendo stringify(data) trick in the parametermap as well as using cascadeFrom: "division", as suggested in the kendoui docs but that hasnt worked so far. Thus leading me to this interesting creation so far.
Any help or Garfield Comics are greatly appreciated.
The JS for the dropdownlists;
var divisions = $("#division").kendoDropDownList({
optionLabel: "Select category...",
dataTextField: "CodeAndDescription",
dataValueField: "Code",
dataSource: {
// type: "odata",
serverFiltering: true,
transport: {
read: {
url: VIPApiUrl + "GetDivision",
dataType: "json",
async: false,
type: "POST",
}, parameterMap: function (options, type) {
// edit VARS passed to service here!
if (type === 'read') {
return {
'division': options.division,
// 'criteria[0].Value': options.value
// ...
};
}
}
}
},
change: function () {
var value = this.value();
alert(value);
if (value) {
itemGroupDataSource.one("change", function () {
itemGroup.current(null);
}).filter({
field: "ID",
operator: "eq",
value: parseInt(value)
});
itemGroup.enable();
} else {
itemGroup.enable(false);
}
itemGroup.select(0);
}
}).data("kendoDropDownList");
var itemGroupDataSource = new kendo.data.DataSource({
//type: "odata",
serverFiltering: true,
transport: {
read: {
url: VIPApiUrl + "GetItemGroup",
dataType: "json",
async: false,
type: "POST",
}
}
});I
My controller where I need to access the json:
#region GetItemGroup
[HttpPost]
public List<ItemGroupsDTO> GetItemGroup(JObject jsonData)
{
dynamic json = jsonData;
string x = null; //intentionally pass null values
string division = json.division;
List<ItemGroupsDTO> ItemGroups = new List<ItemGroupsDTO>();
var ItemGroupEOList = new VIPItemGroupBOList();
ItemGroupEOList.Load(x, x, division, x, x, x, x, x, x, x, false);
foreach (var d in ItemGroupEOList)
{
var ItemGroup = new ItemGroupsDTO();
ItemGroup.Code = d.Code;
ItemGroups.Add(ItemGroup);
}
return ItemGroups;
}
#endregion

Okay I fixed this by changing the parameter map in the itemGroupDataSource to:
parameterMap: function (options, operation) {
return {
division: options.filter.filters[0].value
}
}
and changed the value field to:
dataValueField: "CodeAndDescription",
So I am guessing I partly wasn't giving the EO the right information but hopefully this helps someone in a Jam.