Questions on Kendo UI for jQuery Forum

3 answers

122 views

It seems Kendo UI does not support Waterfall chart. Is that right?

Is there any trick to implement this kind of chart with the other available charts?

Thanks in advance.

General Discussions

answered on 29 Jan 2014

2 answers

168 views

open method doesn't work on ipad

Hello,

the actionsheet isn't visible on ipad.
could you please check the sample if the code is wrong?

thank you
axel

ActionSheet

answered on 28 Jan 2014

4 answers

160 views

[Solved] Setting Pager 'pageSizes' property via data attribute

I'm attempting to set the pageSizes property of the Pager widget via the data attribute "data-page-sizes". It works if I set it to a literal array, such as:

data-page-sizes="[15,30,60]"

But, it doesn't work if I try to set it to a javascript variable, such as:

data-page-sizes="myPageSizes"

How can I set this property to a javascript variable with the data attribute ?

Here's a js.bin example: http://jsbin.com/aruTaWOZ/1/edit

General Discussions

answered on 28 Jan 2014

1 answer

535 views

Extending the Kendo UI validator to support required validation on radio buttons

Is there a particular reason the Kendo UI validator does not support required radio button validation out of the box? Adding basic validation to the existing required rule seems relatively straightforward.

var radio = input.filter("[type=radio]");

if (radio.length) {
//Ideally the search should be scoped to the element that validate was called on, but that would require several other changes
return $("input[name='" + input.attr("name") + "']").is(":checked");
}

This would enable radio button validation, but would require all radio buttons in a group to specify the required attribute or the other radio buttons in the group would validate successfully, overriding the one that failed. A solution to the problem would be to do what jQuery validate does, which is to only validate the first element in an array of elements with the same name. Is there any downside to doing this? The only common uses for elements with the same name are checkboxes, radio buttons and buttons, and since buttons are already not validated, I don't see any downside.

Right now, without making the code changes specified above, I am relying on a custom rule that is incredibly inefficient since it has to continually get all radio buttons with the same name to see if any of them are decorated with a required attribute.

radiorequired: function (input) {
if (input.is("[type=radio]")) {
var radioButtons = $("input[name='" + input.attr("name") + "']");
if (!radioButtons.is("[data-val-required], required")) return true;

return radioButtons.is(":checked");
}

return true;
}

I guess my question is, why doesn't Kendo UI support required validation on radio buttons out of the box, and is there a better way to add the validation than what I am doing now?

Validation

answered on 28 Jan 2014

7 answers

1.9K+ views

Grid Is Not Working Properly

Hello KendoUI Team,

recently as I have discovered KendoUI and I was very impressed and really prefer over other frameworks like dojo, prototype!

Now, I have a small project which I a couple of issues with

reading of the note.json file seems to be OK
note.json contains 7 items but the paging shows "No items to display"
the create, update and delete functions are working fine but there is no changes visible on the note.json file after a creation, deletion or update.

please find the whole file attached.

I have searched the KendoUI Forums including the web but could not find any help on this.

Please help create my first app with KendoUI!

Thanks
Omar

Grid

answered on 28 Jan 2014

1 answer

315 views

Is there a simple or generic way to remove all menu items?

Hi there,

Is there a simple or generic way to remove all menu items?

Regards,

Scott

Menu

answered on 28 Jan 2014

3 answers

438 views

Scheduler initialization problems

I have problems having the scheduler widget initialize correctly.

When it shows up, I have to go forward one day and then backward one day to have it render as it should.

Why?

Because of problems with posting images on this forum, I had to create a stack overflow posting, if you are interested in screenshots of the rendition, look here.

The source code for index.html comes here (it is probably looking better on stack overflow):

<!DOCTYPE html>
<html>
<head>
   <title>Test</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <script src="js/jquery.min.js"></script>
   <script src="js/kendo.web.js"></script>
   <script src="js/kendo.mobile.js"></script>

   <script>
       var app = new kendo.mobile.Application(document.body,
       {
           skin: 'flat'
       });

       window.kendoMobileApplication = app;

       $(function()
       {
           init_scheduler();
           change_view("#vHome");
       });

       function change_view(view)
       {
           app.navigate(view);
       }

       function init_scheduler()
       {
           $("#wScheduler").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"
               ],
               timezone: "Etc/UTC",
               dataSource: {
                   batch: true,
                   transport: {
                       read: {
                           url: "http://demos.kendoui.com/service/tasks",
                           dataType: "jsonp"
                       },
                       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" }
                           ]
                       }
               ]
           });
       }

       function on_goto_scheduler_clicked()
       {
           change_view('#vCalendar');
       }
   </script>

   <link href="css/kendo.mobile.flat.css" rel="stylesheet" />
   <link href="css/kendo.common.css" rel="stylesheet" />
   <link href="css/kendo.default.css" rel="stylesheet" />
   <style>
       [href*=index], #back-button
       {
           visibility: hidden;
       }
   </style>
</head>
<body>
   <div data-role="view" id="vHome">
       <div class="margin-box">
           <span data-role="button" data-click="on_goto_scheduler_clicked">show scheduler</span>
       </div>
   </div>

   <div data-role="view" id="vCalendar">
       <div id="wScheduler"></div>
   </div>
</body>
</html>

Scheduler

answered on 28 Jan 2014

1 answer

95 views

Kendo Grid Hierarchy templating issue

My design requires a checkbox as the first column in the grid and subsequent grids, however, using Hierarchy to implement those subsequent grids, the drop down arrow that kendo adds becomes the first column making the column with the checkbox template second. Is there an efficient / official way of getting around this?

Grid

answered on 28 Jan 2014

1 answer

173 views

[Solved] Checkbox when selecting node

Hello,

I like the checkbox functionality in the treeview. Is it possible to check the checkbox when selecting a node and behave the CheckChildren.

Thanks,
Martin

TreeView

answered on 28 Jan 2014

3 answers

576 views

Close menu on custom column menu item

I have a need for a custom column editor for a grid I'm working on. As such, I'm adding a custom column menu item to handle column editing. My code looks like:

element.kendoGrid({
columnMenu: {
filterable: true,
sortable: true,
columns: false
},
columnMenuInit: function(e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
menu.append({ text: "Columns", spriteCssClass: "k-i-columns" });
menu.bind("select", function(e) {
if ($(e.item).text() == "Columns") {
console.log("Custom button for", field);
}
});
}
// Other configuration here
}

The good news is that the column menu now has my custom Columns menu item in it. The bad news is that after running the custom select function when being clicked, the menu won't close. I've tried menu.close(), but that doesn't do anything. How do I get the popup menu to close after performing my custom action?

Grid

answered on 28 Jan 2014