Hello Everyone,
I am developing a ASP.NET MVC program with angular kendoUI, my program gets JSON data successfully, but the data can not display in kendo GRID normally. Could anyone provide some advice, thank you.
Image:
Javascript:
function getDetailRouting(dataItem) { return { dataSource: { //data: $scope.Structure //type: "Json", transport: { read: "/api/routings/details/" + dataItem.Model + "/" + dataItem.PCBA } , schema: { data: "data", model: { fields: { Model: { type: "string" }, PCBA: { type: "string" }, SeqNo: { type: "int" }, Process: { type: "string" }, FailedUnitReturnTo: { type: "string" }, MaxTestRound: { type: "int" }, MaxFailure: { type: "int" }, StandardTime: { type: "date" }, SamplingTest: { type: "boolean" }, SamplingLogic: { type: "string" }, PanelMatching: { type: "boolean" }, PanelSize: { type: "int" }, RetestFlag: { type: "string" }, MatchingbyExtSN: { type: "boolean" }, Label1: { type: "string" }, Label2: { type: "string" }, Label3: { type: "string" }, } } }, serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 5, ////filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID } }, height: 150, scrollable: true, sortable: true, pageable: true, filterable: true, columns: [ { field: "Model", title: "Model", width: "56px" }, { field: "PCBA", title: "PCBA", width: "110px" } ] }; }Html:
<div kendo-grid id="grid" k-options="StructureGrid" k-data-source="StructureGrid.dataSource"> <div k-detail-template> <kendo-tabstrip> <ul> <li class="k-state-active">Routing</li> <li>Contact information</li> </ul> <div> <div kendo-grid k-options="getDetailRouting(dataItem)"></div> </div> <div> <ul class="contact-info-form"> <li><label>SeqNo:</label> <input class="k-textbox" ng-model="dataItem.Country" /></li> <li><label>Process:</label> <input class="k-textbox" ng-model="dataItem.City" /></li> <li><label>Failed Unit Return TO:</label> {{dataItem.Address}}</li> </ul> </div> </kendo-tabstrip> </div></div>I don't know exactly how to replicate it in our environment, but it appears to only happen after an autofit operation is done on all the columns. After attempting to resize a header column, the row columns become misaligned.
See the attachment for an example of what I'm talking about. It also happens if I simply place my mouse cursor so that it changes to the "resize column" pointer vs. the default pointer and move the pointer down.
Our treelist code is very cumbersome or I'd post it here -- we're updating the control in JavaScript based on user-defined attributes -- so I'm not sure if adding it here would help. I've tried replicating this on the treelist demo page as well as in the dojo, but as of yet have been unsuccessful. (The dojo represents the code we created for the treelist as closely as possible.)
Has anyone experienced this before and, if so, how did you resolve it?
I am looking for something similar to a previous question, Foreign Key with Column Template. However, I need to have my code use AngularJS. Is there a way to hand off the javascript function using $scope or $ctrl from within the grid columns?
Thanks!
Hello,
Is it possible to create a line chart that consists of multiple curve lines (in my case 3), each with different x values and y values? For instance, I have one line (curve) that has x values ranging from 0-900 and y values ranging from 0.10-0.90. Then I have another line with x values ranging from 0-900, and y values 10,000-15,000. So on for the other line. These lines may share the same x-axis (although their x values will differ), but they will all have different y-axes. Is this possible? I'm currently trying to create a chart with my scenario, but all the documentation seems to only show how to have an x-axis that acts as a "category" where each line shares the same x-value. If I set the datasource, that will work work if I have a single line, so I don't think I can use the datasource property since I have 3 separate lines. I've also seen that you can set the "data" property of each series, but that appears to only be y-values. How do I just load data and set coordinates individually for each series?
$(document).ready(function () { $.support.cors = true; // For IE8 & 9 $("#patientList").kendoGrid({ dataSource: { transport: { read: { url: "http://10.100.23.92:8082/biodose-connect/patients", dataType: "json", type: "GET" } }, pageSize: 5 }, schema: { model: { fields: { fullname: { type: "string" }, date_of_birth: { type: "date" }, nhsnumber: { type: "string" }, postcode: { type: "string" } } } }, reorderable: true, groupable: true, sortable: true, filterable: { mode: "row" }, pageable: { refresh: true, pageSizes: true, buttonCount: 5, messages: { itemsPerPage: "patients per page" } }, columnMenu: { columns: true, filterable: false, sortable: true }, columns: [ { width: 60, template: "<i class='glyphicon glyphicon-user default-userImg'> </i>" }, { field: "title", title: "Title", width: 100, filterable: false }, { field: "fullname", title: "Patient Name", filterable: { cell: { showOperators: true, operator: "contains", suggestionOperator: "contains" } } }, { field: "date_of_birth", title: "DOB", format: moment().format("Do MMM YYYY"), width: 200, filterable: { ui: "datepicker", cell: { showOperators: false, operator: "contains", suggestionOperator: "contains" } } }, { field: "nhsnumber", title: "NHS Number", width: 200, filterable: { cell: { showOperators: false } } }, { field: "postcode", title: "Postcode", width: 200, filterable: { cell: { showOperators: false, operator: "contains", suggestionOperator: "contains" } } } ], selectable: "row", change: function(e) { var grid = $("#patientList").data("kendoGrid"); var selectedRow = grid.dataItem(grid.select()); console.log(selectedRow.patient_id) } });});
Hello.
We have build a Scheduler page using Kendo UI MVC Scheduler and we have a weird issue.
When I double click on an existing schedule item, the edit form pops up always. The problem is when I want to add a new item, by double clicking on the "white" area. This is not always working. After trying 2 or 3 times (maybe doing an edit pop up in between), the add new item popup starts to work. After poping out once, it works always, until a page reloads. The issue is more common in firefox, but it does happen in chrome as well.
Note that our scheduler only contains all-day items, so we show a week view with only the all day area visible. Please check screenshot.
I know it sounds a bit vague, but it does consistently happen, so I was wondering if other people face the same issue and what they do to overcome it.
Thanks in advance!

Hi, I have a situation where the field in a grid column is an ID, we display a description using the template. In this case, it's a grade level, and for example "0" is "Kindergarten". We want to display Kindergarten instead of 0 if possible in the group header, it's clearer to our users.
Here is the current column definition. I've tried different things using a function, haven't found the right code, if it's even possible.
{ field: "GradeLevelId", title: "Grade Level", width: 120, template: function (dataItem) { return dataItem.GradeLevel; } , aggregates: ["count"], groupHeaderTemplate: "Grade Level: #=value# - Count: #=count#"},What I would like it to have the GradeLevel field show somewhere in the GroupHeaderTemplate instead of/or even in addition to, the value that is the GradeLevelID.
Thanks for any help.
Lisa
We have a dynamic web site which uses the Kendo grid to continually update statistics. While leaving a grid displayed and updating and while using aggregates, the grid will eventually consume enough memory to kill the browser window. This is due to the fact that DOM elements are being orphaned when the grid refreshes new data. If a memory snapshot is taken in the developer pane of the browser, you will notice many HTMLDivElements with class "k-grid-footer-wrap" and "k-grid-footer-locked" are still in memory but not attached to the DOM. Each element only takes 92 bytes, but they accumulate over time and are never released. The problem is reproducible and shown in the below code.
Removing the aggregate data and the footer templates from the kendo initialization causes the memory to remain stable.
Please advise. Thanks.
<!DOCTYPE html><html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head> <title>Realtime Table</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.common-office365.min.css" type="text/css"> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.rtl.min.css" type="text/css"> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.default.min.css" type="text/css"> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.dataviz.min.css" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.js"></script> <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="/OptiRampWeb5/Script/kendo.all.min.js"></script> <script type="text/javascript" src="/OptiRampWeb5/Script/console.js"></script></head><body> <div id="mainbody"> <div style="position:absolute;left:29.0px;top:21.0px;background-color:#FFFFFF;border:1.0px Solid #000000;" selectionoffset="3" oncontextmenu="return false;" objecttype="RealtimeTable" onmousedown="objectOnMouseDown(event)" uniqueid="5113,5117,5121,5114,5118,5122,5115,5119,5123" uniquepath="Системa1.Reference Table Test.Folder #1.Tag #1,Системa1.Reference Table Test.Folder #2.Tag #1,Системa1.Reference Table Test.Folder #3.Tag #1,Системa1.Reference Table Test.Folder #1.Tag #2,Системa1.Reference Table Test.Folder #2.Tag #2,Системa1.Reference Table Test.Folder #3.Tag #2,Системa1.Reference Table Test.Folder #1.Tag #3,Системa1.Reference Table Test.Folder #2.Tag #3,Системa1.Reference Table Test.Folder #3.Tag #3" url="http://TEST-LENOVO:9001/api/RTData"> <div id="object_14-header" style="width:740.0px;text-align:center;color:#000000;font-size:12pt;font-weight:Bold;font-family:Tahoma;background-color:#FFFFFF;" uniqueid="5113,5117,5121,5114,5118,5122,5115,5119,5123" uniquepath="Системa1.Reference Table Test.Folder #1.Tag #1,Системa1.Reference Table Test.Folder #2.Tag #1,Системa1.Reference Table Test.Folder #3.Tag #1,Системa1.Reference Table Test.Folder #1.Tag #2,Системa1.Reference Table Test.Folder #2.Tag #2,Системa1.Reference Table Test.Folder #3.Tag #2,Системa1.Reference Table Test.Folder #1.Tag #3,Системa1.Reference Table Test.Folder #2.Tag #3,Системa1.Reference Table Test.Folder #3.Tag #3" url="http://TEST-LENOVO:9001/api/RTData">This is the title</div> <div id="object_14" style="width:740.0px;height:190.0px;" uniqueid="5113,5117,5121,5114,5118,5122,5115,5119,5123" uniquepath="Системa1.Reference Table Test.Folder #1.Tag #1,Системa1.Reference Table Test.Folder #2.Tag #1,Системa1.Reference Table Test.Folder #3.Tag #1,Системa1.Reference Table Test.Folder #1.Tag #2,Системa1.Reference Table Test.Folder #2.Tag #2,Системa1.Reference Table Test.Folder #3.Tag #2,Системa1.Reference Table Test.Folder #1.Tag #3,Системa1.Reference Table Test.Folder #2.Tag #3,Системa1.Reference Table Test.Folder #3.Tag #3" url="http://TEST-LENOVO:9001/api/RTData"></div> </div> </div> <script>
var object_14data = new kendo.data.ObservableArray([
new kendo.data.ObservableObject({ col0: "Folder #1", folderId: "5110", folderIndex: "1", folderPath: "Системa1.Reference Table Test.Folder #1", col1: "---", col2: "---", col3: "---", col0uid: "-1", col1uid: "5113", col2uid: "5114", col3uid: "5115", col0path: "Системa1.Reference Table Test.Folder #1", col1path: "Системa1.Reference Table Test.Folder #1.Tag #1", col2path: "Системa1.Reference Table Test.Folder #1.Tag #2", col3path: "Системa1.Reference Table Test.Folder #1.Tag #3" }),
new kendo.data.ObservableObject({ col0: "Folder #2", folderId: "5116", folderIndex: "2", folderPath: "Системa1.Reference Table Test.Folder #2", col1: "---", col2: "---", col3: "---", col0uid: "-1", col1uid: "5117", col2uid: "5118", col3uid: "5119", col0path: "Системa1.Reference Table Test.Folder #2", col1path: "Системa1.Reference Table Test.Folder #2.Tag #1", col2path: "Системa1.Reference Table Test.Folder #2.Tag #2", col3path: "Системa1.Reference Table Test.Folder #2.Tag #3" }),
new kendo.data.ObservableObject({ col0: "Folder #3", folderId: "5120", folderIndex: "3", folderPath: "Системa1.Reference Table Test.Folder #3", col1: "---", col2: "---", col3: "---", col0uid: "-1", col1uid: "5121", col2uid: "5122", col3uid: "5123", col0path: "Системa1.Reference Table Test.Folder #3", col1path: "Системa1.Reference Table Test.Folder #3.Tag #1", col2path: "Системa1.Reference Table Test.Folder #3.Tag #2", col3path: "Системa1.Reference Table Test.Folder #3.Tag #3" })
]);
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$.support.cors = true;
if ($("#object_14").data("kendoGrid") == null) {
$("#object_14").kendoGrid({
dataSource: {
data: object_14data,
schema: {
model: {
fields: {
col0: { type: "string" },
col1: { type: "number" },
col2: { type: "number" },
col3: { type: "number" },
}
}
},
aggregate: [
{ field: "col1", aggregate: "sum" },
{ field: "col2", aggregate: "average" },
]
},
groupable: false,
resizable: true,
sortable: false,
pageable: false,
columns: [
{
field: "col0",
locked: true,
footerTemplate: "<div style='text-align:center;font-family: \"Arial\";font-size: 8pt;font-weight: normal;'>Tot/Avg:</div>",
title: "Name<br/><div> </div>",
headerAttributes: { "style": "text-transform: none;text-align:center;font-family: \'Arial\';font-size: 8pt;font-weight: normal;" },
width: 419,
template: '<div onmousedown="objectOnMouseDown(event);" istablecell="true" tableid="object_14" uniqueid="#= col0uid #" uniquepath="#= col0path #" style="text-align:left;"><span style="font-family: \'Arial\';font-size: 8pt;font-weight: normal;">#= col0 #</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-left:5px;display:none;" width="16.0px" height="16.0px"><image width="16px" height="16px" x="0" y="0" xlink:href="http://localhost/OptiRampWeb5/images/warning3.svg"></image></svg></div>'
},
{
field: "col1",
locked: false,
footerTemplate: "<div style='text-align:center;font-family: \"Arial\";font-size: 8pt;font-weight: normal;'>#=kendo.format('{0:n2}',sum)#</div>",
title: "Tag #1<br/><div></div>",
headerAttributes: { "style": "text-transform: none;text-align:center;font-family: \'Arial\';font-size: 8pt;font-weight: normal;" },
width: 100,
template: '<div onmousedown="objectOnMouseDown(event);" istablecell="true" tableid="object_14" uniqueid="#= col1uid #" uniquepath="#= col1path #" style="text-align:center;"><span style="font-family: \'Arial\';font-size: 8pt;font-weight: normal;">#= (col1 == null) ? "---" : kendo.toString(col1, "0.00") #</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-left:5px;display:#=(col1 == "---") ? \'inline\' : \'none\' #;" width="16.0px" height="16.0px"><image width="16px" height="16px" x="0" y="0" xlink:href="http://localhost/OptiRampWeb5/images/warning3.svg"></image></svg></div>'
},
{
field: "col2",
locked: false,
footerTemplate: "<div style='text-align:center;font-family: \"Arial\";font-size: 8pt;font-weight: normal;'>#=kendo.format('{0:n2}',average)#</div>",
title: "Tag #2<br/><div></div>",
headerAttributes: { "style": "text-transform: none;text-align:center;font-family: \'Arial\';font-size: 8pt;font-weight: normal;" },
width: 100,
template: '<div onmousedown="objectOnMouseDown(event);" istablecell="true" tableid="object_14" uniqueid="#= col2uid #" uniquepath="#= col2path #" style="text-align:center;"><span style="font-family: \'Arial\';font-size: 8pt;font-weight: normal;">#= (col2 == null) ? "---" : kendo.toString(col2, "0.00") #</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-left:5px;display:#=(col2 == "---") ? \'inline\' : \'none\' #;" width="16.0px" height="16.0px"><image width="16px" height="16px" x="0" y="0" xlink:href="http://localhost/OptiRampWeb5/images/warning3.svg"></image></svg></div>'
},
{
field: "col3",
locked: false,
footerTemplate: "<div style='text-align:center;font-family: \"Arial\";font-size: 8pt;font-weight: normal;'></div>",
title: "Tag #3<br/><div></div>",
headerAttributes: { "style": "text-transform: none;text-align:center;font-family: \'Arial\';font-size: 8pt;font-weight: normal;" },
width: 100,
template: '<div onmousedown="objectOnMouseDown(event);" istablecell="true" tableid="object_14" uniqueid="#= col3uid #" uniquepath="#= col3path #" style="text-align:center;"><span style="font-family: \'Arial\';font-size: 8pt;font-weight: normal;">#= (col3 == null) ? "---" : kendo.toString(col3, "0.00") #</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-left:5px;display:#=(col3 == "---") ? \'inline\' : \'none\' #;" width="16.0px" height="16.0px"><image width="16px" height="16px" x="0" y="0" xlink:href="http://localhost/OptiRampWeb5/images/warning3.svg"></image></svg></div>'
},
]
});
}
startTimer();
});
function startTimer() {
timerVar = setInterval(changeData, 2000, 0);
}
function changeData() {
var grid = $("#object_14").data("kendoGrid");
grid.dataSource._data.forEach(function (item) {
item.col1 = Math.random() * 100;
item.col2 = Math.random() * 100;
item.col3 = Math.random() * 100;
});
grid.refresh();
grid.dataSource.read();
}
</script>
</body>
</html>
I have create a simple kendo grid with sample data where i would like to optimize the grid. is there a way to remove or hide the "Quantity" field whenever the my sample data doesn't contain quantity?
How do you set the Title using the new predefined kendo alert?
kendo.alert("This is a Kendo UI Alert message.");