or
2 answers
134 views
4 answers
109 views
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:
But, it doesn't work if I try to set it to a javascript variable, such as:
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
data-page-sizes="[15,30,60]"data-page-sizes="myPageSizes"Here's a js.bin example: http://jsbin.com/aruTaWOZ/1/edit
Josh
Top achievements
Rank 1
Rank 1
answered
on
28 Jan 2014
1 answer
471 views
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?
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?
Alexander Popov
Telerik team
answered
on
28 Jan 2014
7 answers
1.8K+ views
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
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
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
1 answer
280 views
Hi there,
Is there a simple or generic way to remove all menu items?
Regards,
Scott
Is there a simple or generic way to remove all menu items?
Regards,
Scott
Dimiter Madjarov
Telerik team
answered
on
28 Jan 2014
3 answers
388 views
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>
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>
Rosen
Telerik team
answered
on
28 Jan 2014
1 answer
77 views
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?
1 answer
129 views
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
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
Alex Gyoshev
Telerik team
answered
on
28 Jan 2014
3 answers
531 views
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?
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?
Kiril Nikolov
Telerik team
answered
on
28 Jan 2014
11 answers
135 views
The slider appears broken on iOS7. We are seeing this on iPhone5 with iOS7 and iPads with iOS7. If you open the mobile demos and look in the Forms - Overview demo on an actual iOS device, the track bar is not there. The handle will slide but its offset and you can't see the track. It works in the simulator so you have to use an real device to see it.
Kiril Nikolov
Telerik team
answered
on
28 Jan 2014
