I have a hierarchical grid that i populate data with 2 page methods. When the page loads the is no problem how ever if i reload the grid the rows wont expand. the detailInit event fires. (if i reload it again after the rows don't expand. then everything loads and functions correctly)
function loadGrid(startDate, endDate) {
$("#rgLeaderBoardByManager").kendoGrid({
dataSource: {
data: data
},
dataBound: function (e) {
var grid = this;
$(".k-grouping-row").each(function (e) {
grid.collapseGroup(this);
});
},
sortable: true,
scrollable: true,
detailInit: detailInit,
columns: [
{
field: "Manager",
title: "Manager"
},
{
field: "TotalSalesByManager",
title: "Total Sales"
}
]
});
function detailInit(e) {
var sd1, ed1;
var dateRange = FindControl('<%= rcmLeaderBoardByManagerWidget.ClientID %>').value;
switch (dateRange) {
case "Today":
sd1 = new Date();
ed1 = new Date();
break;
case "Yesterday":
sd1 = new Date().Add("D", -1);
ed1 = new Date().Add("D", -1);
break;
case "Week to Date":
sd1 = new Date().Add("D", -(new Date().getDay()));
ed1 = new Date();
break;
case "Last Week":
sd1 = new Date().Add("D", -(new Date().getDay() + 7));
ed1 = new Date().Add("D", -(new Date().getDay() + 1));
break;
case "Month to Date":
sd1 = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
ed1 = new Date();
break;
case "Last Month":
var endOfLastMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 1).Add("D", -1);
sd1 = new Date(endOfLastMonth.getFullYear());
ed1 = endOfLastMonth;
break;
}
CallWidgetHelper("GetLeaderByManagerWidgetData", function (response) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: response.d
},
scrollable: false,
sortable: true,
columns: [
{ field: "UserFullName" },
{ field: "TotalSales", title:"User"}
]
});
}, null, "startDate", sd1.format('M/d/yyyy'), "endDate", ed1.format('M/d/yyyy'),
"includeCancels", FindControl('<%= hdnIncludeCancels.ClientID %>').value,
"includeChecksPending", FindControl('<%= hdnIncludeChecksPending.ClientID %>').value, "managerId", e.data.ManagerId);
}
}
Hi All
I want to ask about grid, how to call function 'update' in kendo grid from custom function or custom button ?
Thank's
I'm trying to make the text label not crowded in a lot of data and I can not successful.
{
dataSource: modelStats,
legend: {
visible: false
},
xAxis: {
min: -2,
max: 2,
labels: {
format: "{0:n1}"
}
},
yAxis: {
labels: {
format: "{0:n2}"
}
},
series: [
{
name: "Fleet Avg",
type: "line",
aggregate: "avg",
field: "fleetAvg",
categoryField: "date",
color: "#a0b751",
},
{
name: "Driver",
type: "line",
aggregate: "avg",
field: "value",
categoryField: "date",
color: "#219dd0",
},
{
name: "Driver previous period",
type: "line",
aggregate: "avg",
field: "valueFrom_SameDateLastPeriod",
categoryField: "date",
color: "#10b4b6",
}
],
seriesDefaults: {
aggregate: "avg",
type: "line",
width: 3,
margin: 30,
markers: {
size: 15,
width: 10
}
},
categoryAxis: {
baseUnit: me.baseUnitDefault[0],
labels: {
dateFormats: {
weeks: tFormat
},
font: "13px Arial,Helvetica,sans-serif",
rotation: "auto"
},
},
tooltip: {
visible: true
},
pannable: true,
onZoom: onChartZoom,
});
http://dojo.telerik.com/izOFU
I'm trying to be a kendo right now. I found it very successful. In the above example I get the error "There are no items to view" when I turn the code below. Also, the page number is 0.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script></head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
data: {
"items" :[
{
"employee": "John Doe",
"team": "INFRASTRUCTURE"
},
{
"employee": "Jane Doe",
"team": "INFRASTRUCTURE"
}
]
},
schema: {
data: "items"
}
},
height: 540,
sortable: true,
reorderable: true,
groupable: {
messages: {
empty: "Gruplandırılacak Kolonları Buraya Sürükleyin."
}
},
resizable: true,
filterable: true,
columnMenu: true,
pageable: {
info: true,
previousNext: true,
numeric: true,
pageSize: 2,
messages: {
display: "Showing {0}-{1} from {2} data items",
itemsPerPage: "Kayıt Sayısı"
}
},
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
},
scrollable: {
endless: true
},
columns: [
{
field: "employee",
title: "Employee"
},
{ field: "team",
title: "Team",
}
]
})
</script>
</body>
</html>
Hi,
I am looking to configure my treelist so that certain columns are editable for only "parent" node while some others are editable for only children.
I see that TreeListDataSource.fields can have "editable" set as true or false, but is there a way to conditionally set them to true or false, based on whether I am dealing with parent or child row?
Say I have the following columns A, B, C, D, E.
I want A, and B to be editable at the parent level, while C, D and E should be editable at children level
Thanks,
Labhesh
Hello,
I have a Kendo UI Mobile ModalView that I use as a message dialog. It is rather simple (html code below),
and used to work fine by calling open and close methods and changing view data in between.
Now I have a situation where the modal view is already open and needs to be closed and
immediately reopened again with new data. It goes like this:
$("#modalview-alert").data("kendoMobileModalView").close();
changeSomeAlertData(); // update title and message text
$("#modalview-alert").data("kendoMobileModalView").open(); // opens view but immediately closes it
However the view doesn't reopen, apparently previous close method closes it too.
I tried to put a delay around close and I see that the view is reopened but immediately
closed after delay expires. Later on reopen works OK, this problem only happens if
open is done immediately after close. How can I close and immediately open the modal view again?
Thanks.
ps I use it on Android 7.0, Samsung Internet.
Regards,
Oleg
<div data-role="modalview" id="modalview-alert" data-close="onModalViewAlertClose">Hello,
When rendering a very big diagram in our application we found out that there is a scroll limit when using maximum zoom in the diagram.
In the simple example below: max zoom to the first diagram element on the left and then by ctrl + left mouse click scroll to the right, around yellow shape you come to the limit and you cannot scroll anymore to the right.
The workaround is to zoomout to the initial position and zoom in again to the yellow element.
I found out that the limit of scrolling is around 20000px. Is there any way to change it or is there any workaround for this? I found a solution for this and I did my own scrolling mechanism and I can scroll on the diagram wherever I want with no limitations but then when using the kendoContextMenu on the diagram the function open() on this menu causes diagram to be scrolled back to the 20000px limit.
Example (without context menu but with the scroll limit):
https://dojo.telerik.com/AREcIrIk
I use Kendo Editor in the body text for email and I don't know how to set and get error message for Kendo Editor.
I set the maximum length to 8000 for the body text and when copy and paste more than 8000 characters into it, it will show a error message "Body Text is required" which is not correct. The error should be something like "The text must be less than 8000 characters."
Here is my code.
In Form.cshtml
<form id=
"email"
class
=
"hidden"
>
<ul>
<li
class
=
"k-state-active"
>Email</li>
<li>Preview</li>
</ul>
<div>
......
@Html.DecoratedField(x => x.AssignEmail.BodyText, required:
true
, maxLength: 8000, type:
"textarea"
)
......
</div>
<button id=
"action"
type=
"button"
class
=
"k-primary k-button"
>Save and Preview</button>
<button id=
"backButton"
type=
"button"
class
=
"k-button"
>Back to List</button>
@Html.AntiForgeryToken()
</form>
In Form.chhtml.cs
[HttpPost]
public
async Task<IActionResult> OnPostAssignMail([FromQuery]
int
sessionId, [FromForm] AssignEmailSaveModel model)
{
. . . . . .
AssignEmail =
new
AssignEmail()
{
BodyText = model.Body,
};
. . . . . .
}
In AssignEmail.cs
namespace
assign.intranetv2.Models
{
[Table(
"Emails"
)]
public
class
AssignEmail
{
... ...
[StringLength(8000)]
[Required]
public
string
BodyText {
get
;
set
; }
... ...
}
}
In Javascript
// INIT
var
bodyEditor = emailBodyKendoEditorSetup();
var
emailBodyKendoEditorSetup =
function
() {
return
$(
'#AssignEmail_BodyText'
).kendoEditor().data(
'kendoEditor'
);
};