Questions on Kendo UI for jQuery Forum

24 answers

1.7K+ views

I've been experimenting with Knockout and Kendo and I'm a bit confused how the two work together. The integration example doesn't quite go far enough when the DropDownList is built using an input element.

The problem I see is that if I change the value in the model the DropDownList does not display the correct value. I think that if I have the modelview bond to the input value that changing the value in the model would cause the DropDownList to select the right value as well and display it as the selected item.

DropDownList

answered on 23 Nov 2013

8 answers

153 views

Embed scheduler in the tabstrip

Hi,

I am using the Kendo UI Web v2013.2.716. I am trying to create the scheduler within a tabstrp. however when the page first lauched the tabstrip is not able to render the scheduler. strangely if i click the day or week view the UI will refresh and tabstrip will be able to render the scheduler properly. even more bizzarly, if i enable developper tool in chrome or firebug tool in FF then switch off the tools, the misformed problem will go away too.

the code i am using is very basic code from the demo. code attached

01.$("#scheduler").kendoScheduler({

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

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

04. height: 300,

05. views: [

06. {type:"day",selected:true},

07. { type: "week"},

08. "month"

09. ],

10. timezone: "Etc/UTC",

11. dataSource: {

12. batch: true,

13. transport: {

14. read: {

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

16. dataType: "jsonp"

17. },

18. parameterMap: function(options, operation) {

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

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

21. }

22. }

23. },

24. schema: {

25. model: {

26. id: "taskId",

27. fields: {

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

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

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

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

32. startTimezone: { from: "StartTimezone" },

33. endTimezone: { from: "EndTimezone" },

34. description: { from: "Description" },

35. recurrenceId: { from: "RecurrenceID" },

36. recurrenceRule: { from: "RecurrenceRule" },

37. recurrenceException: { from: "RecurrenceException" },

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

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

40. }

41. }

42. },

43. filter: {

44. logic: "or",

45. filters: [

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

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

48. ]

49. }

50. },

51. resources: [

52. {

53. field: "ownerId",

54. title: "Owner",

55. dataSource: [

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

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

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

59. ]

60. }

61. ]

62. });

I have tried to alternate the squence of creating the tabstrip and scheduler but that did not fix the problem. on the same tabstrip (different tab) i have a grid which is linked to a remote datasource. there is no problem for the tabstrip to host the grid.

I have also attached the screenshots.

Many thanks
amp

Scheduler

answered on 22 Nov 2013

3 answers

182 views

Newbie, how to call function in app.js on change of a form, select object.

Hello,

I'm new to both KendoUI and JQuery.
I'm trying to create a new application and it's starting well.

I'm creating a "Settings" page where a user would be able to choose skin, "Native" or "Flat".
Those chooses are in a <form> and <select>,

The part of view
<li>
<label>Skin
<select class="skinchange">
<option value="">Native</option>
<option value="flat">Flat</option>
</select>
</label>
</li>

I would like to call a function in "app.js" when an option is chosen.
app.changeSkin = function (e) {
if (e.sender.element.value() === "flat") {
mobileSkin = "flat";
}
else {
mobileSkin = "";
}

app.application.skin(mobileSkin);
};

I don't know how to do it or if it's possible :)

By having following code in the index.html I can change the skin but I would prefer If I could concentrate all that stuff in .js files.
<script>
$( ".skinchange" ).change(function() {

var mobileSkin = $(".skinchange").val();

app.application.skin(mobileSkin);
});
</script>

Best regards and thanks in advance!

General Discussions

answered on 22 Nov 2013

6 answers

782 views

Change Event bug?

Demo page: http://demos.kendoui.com/web/datepicker/events.html

Non-date values don't trigger change events...so I can't remove\fix non-date values (as the control doesn't seem to enforce that itself...or am I missing a property to do that?)

Date/Time Pickers

answered on 22 Nov 2013

1 answer

233 views

Update status from code behind

Is it possible to use the progressbar to update the status of a running c# code (eg. update of all items being handled in the c# code, just like with the asp.net progressarea)
Thanks.

ProgressBar

answered on 22 Nov 2013

5 answers

153 views

Changing Drawer Menu Behavior

I'm working on the UI for an iOS 7 app, and the drawer menu interaction isn't suitable for iOS 7. I'm trying to redesign the drawer to something like this: http://cdn1.dribbble.com/users/221741/screenshots/1154748/attachments/149461/whatsapp-ios7-sidemenu.png

When the drawer menu shows up, it adds some CSS3 transform3d property to the view which is open. I was able to modify the behavior by overriding the style using "!important, but the animation is kinda jaggy, and want to know if there is a better way to do this.

Example of what I'm trying to do: http://jsfiddle.net/thilak/kk83s/

Drawer (Mobile)

answered on 22 Nov 2013

1 answer

251 views

RequestEnd e.type is undefined

I am trying to get my grid to refresh after an update using the pop-up editor. I followed the suggestion on a related post to use RequestEnd and the following handler.

function onGridDataSourceRequestEnd(e){

if(e.type=="update")

{

this.read();

}

Everything is perfect when debugging in Visual Studio but it stops working after I publish to our production server. When I debug this using firebug I see the type property is missing from e all together (only when coming from the pop-up editor, in other cases like when the page loads it looks fine). Please advise.

Grid

answered on 22 Nov 2013

5 answers

188 views

Need tips/suggestions: sliding side bar like Google/Facebook apps

We'd like to implement a side bar that slides in from the left like in recent Google and Facebook apps. We're very familiar with HTML, CSS, and JavaScript, and have worked extensively with jQuery Mobile, but we are pretty new to Kendo UI Mobile.

Does anyone have any suggestions for what would be a good way to start implementing something like this in the Kendo world? Is there anything that comes out of the box that could help us, or do we need to do it totally custom?

Thanks for any advice you can give!

Jonathan

General Discussions

answered on 22 Nov 2013

1 answer

405 views

How to set time range on the xAxis properly?

Hi everyone,

I'm having hard times setting up a time axis on my charts and would really appreciate some help. The attached image would be a good starting point. I need to set an exact time range for the xAxis, based on current form data. User selects the required time range, server generates all necessary data and the chart is updated.

The problem is that I can't set the exact range to be displayed, the range boundaries always snap to hour or day or whatever unit the inner workings find appropriate. When I set the range (min and max values) to say 2013-11-19 07:15:00 and 2013-11-19 18:24:00, respectively, all I seem to get is chart set to 2013-11-19 07:00:00 and 2013-11-19 18:00:00.

This is for me unacceptable - portion of required data is missing from the view and on the other side it looks like there is a gap in the data (since the server generates the data correctly as per user-set time range).

It seems that I'm missing one little piece of the puzzle and I'd be really thankful if somebody could help me out.

Charts

answered on 22 Nov 2013

1 answer

58 views

Grid Sort Redirects to the server which produces a 404 error

I have a Kendo UI grid on a View that correctly display the results of a search based upon some parameters in a form.

The form is submitted to a Controller

public ActionResult Results(SearchInput SearchType)

Which then returns the strongly typed view.

When I sort, I get redirected to this URL which produces a 404 error:

http://localhost:4535/Results/Results?SearchResults-sort=LastName-asc

I have another grid on another form where this behavior does not happen... The only difference is that the controller where it is working has no input parameter

public ActionResult Index()

Any clues?

Grid

answered on 22 Nov 2013