Questions on Kendo UI for jQuery Forum

0 answers

134 views

[Solved] Update, Create and Destroy problems

Honestly i'm really confused on how this works. I can get the scheduler to populate. Im not sure how to make the edit and create work.. I can click on an appointment and then i just get a load screen. I know its because I don't exactly know what i am doing here. I have to call my controller for the read update create and destroy. Can anyone help me with the functions i would have to use. In the demo it really does not explain how to make the update, create, and destroy work if you call an outside function. OH and im using the html version of kendo

dataSource: {

batch: true,

transport: {

read: {

url: "/Team/Calendar/PopulateCalendar/",

dataType: "json",

},

update: {

url: "/Team/Calendar/UpdateAppointment",

dataType: "json"

},

create: {

url: "/Team/Calendar/CreateAppointment",

dataType: "jsonp"

},

destroy: {

url: "http://demos.kendoui.com/service/tasks/destroy",

dataType: "jsonp"

},

I am honestly so confused on how to make the functions show the appointment view i understand on the save button to set the fields to the fields in my database but how can i make the appointment view show up.Sorry if this is a really dumb question im just so confused on this.

Thanks,
Corey

Scheduler

asked on 12 Aug 2013

2 answers

184 views

Can't populate scheduler

Im trying to populate the scheduler with an function in my controller.
Here is my scheduler javascript.

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"> </script>

<script src="@Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>

<script>

$(function () {

$("#scheduler").kendoScheduler({

date: new Date("2013/6/13"),

startTime: new Date("2013/6/13 07:00 AM"),

height: 600,

views: [

"day",

{ type: "week", selected: true },

"month",

"agenda"

],

timezone: "Etc/UTC",

dataSource: {

batch: true,

transport: {

read: {

url: "/Team/Calendar/PopulateCalendar/",

dataType: "json",

},

update: {

url: "http://demos.kendoui.com/service/tasks/update",

dataType: "jsonp"

},

create: {

url: "http://demos.kendoui.com/service/tasks/create",

dataType: "jsonp"

},

destroy: {

url: "http://demos.kendoui.com/service/tasks/destroy",

dataType: "jsonp"

},

parameterMap: function (options, operation) {

if (operation !== "read" && options.models) {

return { models: kendo.stringify(options.models) };

}

},

schema: {

model: {

id: "taskId",

fields: {

taskId: { from: "TaskID", type: "number" },

title: { from: "Title", defaultValue: "No title", validation: { required: true } },

start: { type: "date", from: "Start" },

end: { type: "date", from: "End" },

startTimezone: { from: "StartTimezone" },

endTimezone: { from: "EndTimezone" },

description: { from: "Description" },

recurrenceId: { from: "RecurrenceID" },

recurrenceRule: { from: "RecurrenceRule" },

recurrenceException: { from: "RecurrenceException" },

ownerId: { from: "OwnerID", defaultValue: 1 },

isAllDay: { type: "boolean", from: "IsAllDay" }

}

},

filter: {

logic: "or",

filters: [

{ field: "ownerId", operator: "eq", value: 1 },

{ field: "ownerId", operator: "eq", value: 2 }

]

}

},

resources: [

{

field: "ownerId",

title: "Owner",

dataSource: [

{ text: "Alex", value: 1, color: "#f8a398" },

{ text: "Bob", value: 2, color: "#51a0ed" },

{ text: "Charlie", value: 3, color: "#56ca85" }

]

}

]

});

$("#people :checkbox").change(function (e) {

var checked = $.map($("#people :checked"), function (checkbox) {

return parseInt($(checkbox).val());

});

var filter = {

logic: "or",

filters: $.map(checked, function (value) {

return {

operator: "eq",

field: "ownerId",

value: value

};

})

};

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.dataSource.filter(filter);

});

</script>

and this is the function that is being hit on the read datasource.

public ActionResult PopulateCalendar()

{

using (var entities = new OpenRoad.Data.Repository.OpenRoadEntities())

{

var appointments = (from e in entities.Appointments

where e.UserId == OpenRoad.Web.Session.UserId

select new Models.Calendar

{

TaskID = e.AppointmentId,

UserId = e.UserId ?? '1',

Title = e.Subject,

Description=e.Description,

Start = e.StartTimeUtc ?? DateTime.Now,

End = e.EndTimeUtc ?? DateTime.Now,

IsAllDay = false,

RecurrenceRule= null,

RecurrenceID=null,

RecurrenceException=null,

StartTimezone=null,

EndTimezone=null,

}).OrderBy(o => o.Start).ToList();

return Json(appointments, JsonRequestBehavior.AllowGet);

}

Any idea on why i cant get anything to show?

Thanks in advance

Scheduler

answered on 12 Aug 2013

1 answer

58 views

Read datascource issue

Does the read datasource not work if a list of a model is returned?
This is the code im using to try and populate the scheduler but everything ive tried makes it return blank. Could it be because im trying to return a list of models?

public ActionResult PopulateCalendar()

{

using (var entities = new OpenRoad.Data.Repository.OpenRoadEntities())

{

var appointments = (from e in entities.Appointments

where e.UserId == OpenRoad.Web.Session.UserId

select new Models.Calendar

{

TaskID = e.AppointmentId,

UserId = e.UserId ?? '1',

Title = e.Subject,

Description=e.Description,

Start = e.StartTimeUtc ?? DateTime.Now,

End = e.EndTimeUtc ?? DateTime.Now,

IsAllDay = false,

}).OrderBy(o => o.Start).ToList();

return Json(appointments, JsonRequestBehavior.AllowGet);

}

Scheduler

answered on 12 Aug 2013

4 answers

862 views

[Solved] Adding Multiple Rows Performance

I have my grid setup in batch edit mode. I have a requirement for a user to add multiple rows to the grid which I have by prompting the user for how many new rows they want to add then looping through and calling addRow method. The problem is that it doesn't scale very well. Adding 10 rows seems to work fine but by the time you get to 50 it takes upwards of 30 seconds to add those rows. Is there anything I can do to make this faster or delay the redrawing of the grid as I add rows?

Grid

answered on 12 Aug 2013

3 answers

190 views

Set Toolbar DropDownList vlaue on entry onto the page.

I am using the file:http://demos.kendoui.com/web/grid/toolbar-template.html example as a starter for my page.
When the page loads I would like to set the filter drop down list and have that set the grid data right from the initial display of the page.

I can then call the page with http://demos.kendoui.com/web/grid/toolbar-template.html?Filter=Beverages
I would like to see "Beverages" in the grid toolbar and the grid would be filtered fshow Beverages only.

It seems a pretty common thing to do.
There are other threads about setting kendo drop downs but, that they are not inside a grid toolbar ...

DropDownList

answered on 12 Aug 2013

1 answer

859 views

How to stop popup a custom window?I use " e.preventDefault();" on edit event but it does not work

How to stop popup a custom window?I use " e.preventDefault();" on edit event but it does not work,the edit window still popup.
Like this sample, 　I click the "Edit" button, and popup the edit window.But sometimes I click the "Edit" button, but do not want to popup the custom window,I want to alert("Can not edit"). I just want to popup the edit window when the Product Name is "Chang" or hide the "Edit" button when ProductName is not "Chang"

Grid

answered on 12 Aug 2013

4 answers

623 views

How to print the chart

Hi,
I am using kendo charts in my application and through the button I am launching a popup to print the chart. Sometimes, the size of the chart is bigger than the content area of the pop up and it shows scrollbars, and beacause of the scrollbars I am not able to print the entire contents of the chart.

Please let me know how I can resize the chart before printing it.

Thank you,

Poonam

Charts

answered on 12 Aug 2013

1 answer

209 views

Remote Data for Grid not working

I'm trying to follow the example for populating the grid with remote data. I've setup my controller to accept the DataSourceRequest param and, per the example, am getting the data from the DB and then calling ToDataSourceResult - which I assume will do the skip/take/count.

A little more detail:
I'm making a call to the DB using EF and calling an SP (not with "using db context" around call so the connection stays open after I return to the controller so the controller can do the skip/take/count). Once the DB call is complete, I have ObjectResult<MyEntity_Result>. I then select from this ObjectResult<> into an anonymous type and then call ToDataSourceResult. The error I get is: "The result of a query cannot be enumerated more than once."

Now, if I call ToList() after I have selected my anonymous type from the ObjectResult<>, but before I call ToDataSourceResult, everything works well. But, why would I want to call ToList(), especially if I have tons of data?

Second issue: Once I put ToList() on there and am getting data back, the grid isn't showing the data. When I return the data without the ToDataSourceResult, and do my own skip/take I get data (but of course, I can't get count in addition to the skip/take since it will enumerate twice and throw an exception). And if I do my own skip/take, the paging doesn't show more than one page when I know there are at least 10,000 records.

Here is the AJAX Controller Action method:

public JsonResult LoadAllUsers([DataSourceRequest]DataSourceRequest request)

{

var repo = new AdminRepository();

var users = repo.LoadAllUsers();

var resp = users.Select(u => new

{

u.UserId,

u.UserName,

u.FirstName,

u.LastName,

u.EmailAddress,

u.LastActivityDate,

});

var data = resp.ToList().ToDataSourceResult(request);

// var data = resp.Skip(20).Take(20).ToList();

return Json(data, JsonRequestBehavior.AllowGet);

}

Here is the js that is output:

$('#grid').kendoGrid({dataSource: {transport: {read: '/AdminJson/LoadAllUsers'},schema: {model: {fields: {UserId: { type: 'number' },UserName: { type: 'string' },FirstName: { type: 'string' },LastName: { type: 'string' },EmailAddress: { type: 'string' },LastActivityDate: { type: 'date' }}}},pageSize: 20,serverPaging: true,serverFiltering: false,serverSorting: true,scrollable: true},height: 430,pageable: true,filterable: false,sortable: true,columns: [{ field: 'UserId', title: 'User ID', sortable: false, filterable: false, groupable: false },{ field: 'UserName', title: 'User Name', sortable: true, filterable: false, groupable: false },{ field: 'FirstName', title: 'First Name', sortable: true, filterable: false, groupable: false },{ field: 'LastName', title: 'Last Name', sortable: true, filterable: false, groupable: false },{ field: 'EmailAddress', title: 'Email Address', sortable: true, filterable: false, groupable: false },{ field: 'LastActivityDate', title: 'Last Activity Date', sortable: true, filterable: false, groupable: false, format: '{0: yyyy-MM-dd HH:mm:ss}' }]});

Grid

answered on 12 Aug 2013

1 answer

103 views

Indexed List With Local Data

Good morning.

I have a trouble using Kendo to make indexed list with local data for over a week.
The Kendo Music Store shows it, but it is for the remote data source. What I want is using local data.
I managed to make one, but it doesn't work. Only after resizing once, it works.
I tried to find a solution and stayed up all night over a week, but did not find it.
So, I put a point on the library files (kendo.min.js, etc).. as the one used in Kendo Music Store is not a recent one.
So I tried to use the older versions of kendo js files, but I can't find them neither.

I hope the master kendo programmers help me with this, and especially with the indexed list with local data problem.
Thank you.

ListView (Mobile)

answered on 12 Aug 2013

1 answer

154 views

Indexed List With Local Data

Good morning.

I have a trouble using Kendo to make indexed list with local data for over a week.
The Kendo Music Store shows it, but it is for the remote data source. What I want is using local data.
I managed to make one, but it doesn't work. Only after resizing once, it works.
I tried to find a solution and stayed up all night over a week, but did not find it.
So, I put a point on the library files (kendo.min.js, etc).. as the one used in Kendo Music Store is not a recent one.
So I tried to use the older versions of kendo js files, but I can't find them neither.

I hope the master kendo programmers help me with this, and especially with the indexed list with local data problem.
Thank you.

General Discussions

answered on 12 Aug 2013