or
1 answer
123 views
Consider the set of data below returned from a remote data source.
[ { activityName: "Scheduled", hourlyActivities: [ { hour: 8, activityCount: 5 }, { hour: 12, activityCount: 11 } ] }, { activityName: "Cancelled", hourlyActivities: [ { hour: 8, activityCount: 1 }, { hour: 12, activityCount: 5 } ] }]I'm trying to get a basic line chart that is grouped by activityName (displayed in legend), where the x axis is hour and the y axis is activityCount? Can I get an MVVM example on how to configure the chart and data source? I was able to achieve grouping when the data source was an array of simple objects (not grouped), but I don't know where to start when the data is grouped by the server.
Iliana Dyankova
Telerik team
answered
on
03 Jan 2014
3 answers
1.9K+ views
I am using date column in grid while in-line edit if I enter invalid date ( like "ewr") then it showing default validation message "Filedname is not valid date". But Instead of default message I need to show custom message. How can I change the message?
Nikolay Rusev
Telerik team
answered
on
03 Jan 2014
1 answer
66 views
How to enable/disable some columns on save/update from inner grid.
Alexander Valchev
Telerik team
answered
on
03 Jan 2014
1 answer
71 views
from inner grid , how to call a function..for example, when save/create operations, from inner grid. i need to call a function.
Alexander Valchev
Telerik team
answered
on
03 Jan 2014
1 answer
68 views
not able to delete inner grid row. Please help me with code.
Alexander Valchev
Telerik team
answered
on
03 Jan 2014
2 answers
84 views
Using a kendoGrid with an xml datasource and serverAggregates, defining "aggregate" throws an error "Object [object Object] has no method 'aggregates'"
I am including a code example below. It works if you remove the "aggregate: [{field: "qty", aggregate: "sum"}],".
Here is the itemReport.xml datasource:
<xml version="1.0" encoding="UTF-8">
<page>
<items>
<item itemName="testitem" qty="2" />
<item itemName="Garlic Rolls 1(dozen)" qty="1" />
<item itemName="Triple Dipper" qty="1" />
<item itemName="Classic Bacon Burger" qty="1" />
<item itemName="Classic Chicken" qty="5" />
</items>
<aggregates>
<qty>
<sum>18</sum>
</qty>
</aggregates>
<total val="7"/>
</page>
And the page source:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
</div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: "itemReport.xml",
cache: false
},
schema: {
type: "xml",
data: "/page/items/item",
aggregates: "/page/aggregates",
model: {
fields: {
itemName: "@itemName",
qty: "@qty"
},
},
total: "/page/total/@val",
},
serverAggregates: true,
aggregate: [{field: "qty", aggregate: "sum"}],
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
height: 450,
sortable: true,
pageable: true,
reorderable: true,
resizable: true,
columns: [
{
field: "itemName",
title: "Item"
},
{
field: "qty",
title: "Sold"
}
]
});
});
</script>
</body>
</html>
I am including a code example below. It works if you remove the "aggregate: [{field: "qty", aggregate: "sum"}],".
Here is the itemReport.xml datasource:
<xml version="1.0" encoding="UTF-8">
<page>
<items>
<item itemName="testitem" qty="2" />
<item itemName="Garlic Rolls 1(dozen)" qty="1" />
<item itemName="Triple Dipper" qty="1" />
<item itemName="Classic Bacon Burger" qty="1" />
<item itemName="Classic Chicken" qty="5" />
</items>
<aggregates>
<qty>
<sum>18</sum>
</qty>
</aggregates>
<total val="7"/>
</page>
And the page source:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
</div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: "itemReport.xml",
cache: false
},
schema: {
type: "xml",
data: "/page/items/item",
aggregates: "/page/aggregates",
model: {
fields: {
itemName: "@itemName",
qty: "@qty"
},
},
total: "/page/total/@val",
},
serverAggregates: true,
aggregate: [{field: "qty", aggregate: "sum"}],
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
height: 450,
sortable: true,
pageable: true,
reorderable: true,
resizable: true,
columns: [
{
field: "itemName",
title: "Item"
},
{
field: "qty",
title: "Sold"
}
]
});
});
</script>
</body>
</html>
Daniel
Telerik team
answered
on
03 Jan 2014
10 answers
357 views
I'm trying to update my kendo files to a recent release, and I am running into a couple of issues:
1) The icons stopped working. I understand that I will need new icon files. Where are these stored exactly? How do I copy them over?
2) The iOS7 status bar overlay issue is still a big problem. The footers are no longer off the bottom, so that is good, but the navigation buttons are obscured by the OS status bar stuff. Without: document.body.style.marginTop = "20px";, the page still doesn't look correct. Is it possible I simply have the wrong files? I pulled them by cloning a new project in icenium and copying the files over. They must at least be newer than the ones I was using. Top of kendo.mobile.min.js says:
* Kendo UI Mobile v2013.2.1021 (http://kendoui.com)
1) The icons stopped working. I understand that I will need new icon files. Where are these stored exactly? How do I copy them over?
2) The iOS7 status bar overlay issue is still a big problem. The footers are no longer off the bottom, so that is good, but the navigation buttons are obscured by the OS status bar stuff. Without: document.body.style.marginTop = "20px";, the page still doesn't look correct. Is it possible I simply have the wrong files? I pulled them by cloning a new project in icenium and copying the files over. They must at least be newer than the ones I was using. Top of kendo.mobile.min.js says:
* Kendo UI Mobile v2013.2.1021 (http://kendoui.com)
Kiril Nikolov
Telerik team
answered
on
02 Jan 2014
1 answer
217 views
I have a kendo menu on the _LoginPartial page.
The menu has 'links' to various actions for instance:
@(Html.Kendo().Menu()
.Name("MainMenu")
.Items(items =>
{
items.Add()
.Text("Manage Clients")
.Action("Index", "Clients")
... and so forth
This menu is showing if the account is authenticated.
So that users do not keep clicking on the same menu item after they got into their desired page I want to disable the relevant menu item.
In the above mentioned example after users click 'manage clients' the action ("Index", "Clients") will be disabled; when users get out of that page
('manage clients') that same menu item will be enabled again.
How can I accomplish this?
The menu has 'links' to various actions for instance:
@(Html.Kendo().Menu()
.Name("MainMenu")
.Items(items =>
{
items.Add()
.Text("Manage Clients")
.Action("Index", "Clients")
... and so forth
This menu is showing if the account is authenticated.
So that users do not keep clicking on the same menu item after they got into their desired page I want to disable the relevant menu item.
In the above mentioned example after users click 'manage clients' the action ("Index", "Clients") will be disabled; when users get out of that page
('manage clients') that same menu item will be enabled again.
How can I accomplish this?
Dimo
Telerik team
answered
on
02 Jan 2014
1 answer
234 views
I am using Razor and have screens where I can upload multiple files. These will not be async, but for every file that is selected I need to put that file in a category.
I thought I could use the template to put the dropdown in after the file was selected. Then they would select the dropdown next to each file and set them correctly. Then they would click save, but how can I post that data back and tie it to each file if I have multiple files. Thank you.
I thought I could use the template to put the dropdown in after the file was selected. Then they would select the dropdown next to each file and set them correctly. Then they would click save, but how can I post that data back and tie it to each file if I have multiple files. Thank you.
Petur Subev
Telerik team
answered
on
02 Jan 2014
1 answer
105 views
The validation is working good, but does not display the error message in the grid cell.
I have tried couple of options, even though it enters into the logic and fails the validation, no message is displayed.
$.extend(true, kendo.ui.validator, {
rules: {
// custom rules
OrgSchoolID: function (input) {
//console.log("Custom Validator fired");
// all of the input must have a value
//return $.trim(input.val()) !== "";
if (input.is("[name=OrgID_FK]") && input.val() === "")
return false;
else
return true;
},
},
messages: { //custom rules messages
OrgSchoolID: function (input) {
// return the message text
return "OrgName is required!";
}
}
});
===============================================================================================================================
I tried this options as well, even though it steps into correctly during debug and returns fail, the Error message is not displayed
OrgID_FK: {
editable: true,
type: "number",
validation: {
IsOrgIDValid: function (input) {
console.log("Validation fired for ORgID Column");
if (input.is("[name=OrgID_FK]") && input.val() === "") {
console.log("Validation failed for OrgID_FK");
input.attr("data-IsOrgIDValid-msg", "OrgName is required!");
return false;
}
return true;
}
} // validation
}, // OrgID_FK
I have tried couple of options, even though it enters into the logic and fails the validation, no message is displayed.
$.extend(true, kendo.ui.validator, {
rules: {
// custom rules
OrgSchoolID: function (input) {
//console.log("Custom Validator fired");
// all of the input must have a value
//return $.trim(input.val()) !== "";
if (input.is("[name=OrgID_FK]") && input.val() === "")
return false;
else
return true;
},
},
messages: { //custom rules messages
OrgSchoolID: function (input) {
// return the message text
return "OrgName is required!";
}
}
});
===============================================================================================================================
I tried this options as well, even though it steps into correctly during debug and returns fail, the Error message is not displayed
OrgID_FK: {
editable: true,
type: "number",
validation: {
IsOrgIDValid: function (input) {
console.log("Validation fired for ORgID Column");
if (input.is("[name=OrgID_FK]") && input.val() === "") {
console.log("Validation failed for OrgID_FK");
input.attr("data-IsOrgIDValid-msg", "OrgName is required!");
return false;
}
return true;
}
} // validation
}, // OrgID_FK
Nikolay Rusev
Telerik team
answered
on
02 Jan 2014
