Trying to refresh the datasource of multiple kendo treeview controls dynamically by updating the view model. Parent nodes are rendered but child nodes wont show.
HTML:
<div id="trees-vm">
<h1>Trees</h1>
<ul data-template="tree" data-bind="source: treesData"></ul>
</div>
<script id="tree" type="text/x-kendo-template">
<li>
<h2 data-bind="text: treeName"></h2>
<div data-role="treeview" data-bind="source: treeData"></div>
</li>
</script>
JS:
var viewModel = kendo.observable({
treesData:[],
setSource:function(){
var trees = [];
for (i = 1; i < 11; i++) {
var tree = {};
tree.treeName = 'Tree ' + i;
tree.treeData = [{ text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]},
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }]
}];
trees.push(tree);
}
this.set('treesData', trees);
}
});
kendo.bind($("#trees-vm"), viewModel);
viewModel.setSource();
example: https://jsfiddle.net/63hc9qdd/
Does someone know why this doesn't work?
Telerik support has provided an explanation/solution:
It seems that there is a problem when the DataSource for the Kendo UI TreeView is nested in each object the ul template is bound to. In this http://dojo.telerik.com/ikulA example the treeViewData is a hash object that holds the DataSource for the Kendo UI TreeView.
<html>
<head>
<title>Nested Treeview with Hash OBject and templates</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
<div id="trees-vm">
<h1>Trees</h1>
<ul data-template="tree" data-bind="source: treesData"></ul>
</div>
<script id="tree" type="text/x-kendo-template">
<li>
<h2 data-bind="text: treeName"></h2>
<div data-role="treeview" data-bind="source: treeViewData['#=treeName#']"></div>
</li>
</script>
<script>
var viewModel = kendo.observable({
treesData:[],
treeViewData: {},
setSource:function(){
var trees = [];
for (i = 1; i < 5; i++) {
var tree = {};
tree.treeName = 'Tree' + i;
this.treeViewData[tree.treeName] = [
{ text: "Furniture", items: [
{ text: "Tables & Chairs", hasChildren: false },
{ text: "Sofas", hasChildren: false},
{ text: "Occasional Furniture", hasChildren: false }
] },
{ text: "Decor", items: [
{ text: "Bed Linen", hasChildren: false },
{ text: "Curtains & Blinds", hasChildren: false },
{ text: "Carpets", hasChildren: false }
] }
];
trees.push(tree);
}
this.set('treesData', trees);
}
});
kendo.bind($("#trees-vm"), viewModel);
viewModel.setSource();
</script>
</body>
</html>
Related
I have a grid that has a grid in the detailInit and when I add a new row to the grid in the detailInit the detailInit collapses.
How can I stop it from collapsing when a new record is added? I have tried using e.preventDefault() on the button click event of adding a new row but that didn't work out.
You cannot prevent it from collapsing because every time you change something to the data it automatically rebinds and redraw the table.
What you can do however is to capture the rebinding, find the opened details and after the binding finish reopen them:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
let data = [{id: 1, FirstName: "Nancy", LastName: "Davolio", orders: [{title: 1}, {title: 2}]}];
$(document).ready(function () {
let expanded = [];
var element = $("#grid").kendoGrid({
dataSource: data,
toolbar: [{name: "create"}],
height: 600,
detailInit: detailInit,
editable: true,
columns: [
{
field: "id",
title: "id",
},
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{command: ["destroy"]},
],
dataBinding: function (e) {
expanded = $.map(this.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
return $(row).data("uid");
});
},
dataBound: function (e) {
this.expandRow(this.tbody.children().filter(function (idx, row) {
return $.inArray($(row).data("uid"), expanded) >= 0;
}));
},
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (options) {
options.success(e.data.orders);
},
}
},
});
}
</script>
</div>
</body>
</html>
To get row information of currently selected row we can do this
var current = e.sender.dataItem(e.sender.select());
But how to get the same when i click on Edit button?
I tried $("#grid").data("kendoGrid").dataItem($(e.sender).closest("tr")); it didnt work.
EDIT
I tried ways as suggested on the answers below, but its still giving me null.
in the screenshot the commented code doesn't work either
COMPLETE CODE
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>-->
<!--<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>-->
<script src="Scripts/KendoUI.js" type="text/javascript">
</head>
<body>
<div id="grid">
</div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" },
{ command: "list" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" }
}
}
}
},
editable: "popup",
toolbar: ["create"],
dataBound: function (e) {
//<input name="age" class="k-input k-textbox" type="text" data-bind="value:age">
},
edit: function (e) {
//This currentItem is null :(
var currentItem = $("#grid").data("kendoGrid").dataItem($(e.sender).closest("tr"));
if (!e.model.isNew()) {
$('.k-window-title').text("Newton Sheikh");
}
}
});
</script>
</body>
</html>
If you use the edit function in the grid, you can access the data item attributes which is in edit mode using:
var grid = $("#yourGrid").kendoGrid({
dataSource: yourGridDatasource,
...
edit: function (e) {
var attribute = e.sender.dataItem(e.container).attributeName;
// or simply
var attribute2 = e.model.attributeName;
}
});
You should use e.container instead of e.sender, like this:
$("#grid").data("kendoGrid").dataItem($(e.container).closest("tr"))
Update to make it work with a popup
If you are using a popup editor, then the container will be the popup itself and the above will not work.
In that case, you can use the uid of the row to locate it within the table:
var row = $("#grid").data("kendoGrid").tbody.find("tr[data-uid='" + e.model.uid + "']");
If you do not need a reference to the actual row, but only the data item, then you can simply use e.model. I have created a dojo with your code and if you check the console after you click "edit", you will see that there is no difference: http://dojo.telerik.com/iqAPO
var gridDataById= $("#grid").data("kendoGrid");
//Getting selected row
var selectedRow = gridDataById.dataItem(gridDataById.select());
console.log(selectedRow);
I'm new to kendo and I would like to know whether is there a way to program my kendo grid like the image below.
I had saw some sample online where they use kendo-grid grouping but it doesn't generate the layout I needed
Output
Yes, it is possible by using a column template with a script expression that will transform the array of child items into an HTML list:
http://dojo.telerik.com/AqezO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Grid</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var sampleData = [
{ id: 1, name: "name", items: ["foo", "bar"] }
];
$(function () {
var dataSource = new kendo.data.DataSource({
data: sampleData,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
name: { },
items: { }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "id" },
{ field: "name" },
{ field: "items", template: "#= showItems(items) #" }
]
});
});
function showItems(arr) {
return "<ul><li>" + arr.join("</li><li>") + "</li></ul>";
}
</script>
</body>
</html>
I wanted to filter UnitPrice and ProductID. This is the sample, you want more using the jsfiddle link. Check this jsfiddle for more detail & work my program in that
//change event
$("#category").keyup(function () {
var selecteditem = $('#category').val();
var kgrid = $("#grid").data("kendoGrid");
selecteditem = selecteditem.toUpperCase();
var selectedArray = selecteditem.split(" ");
if (selecteditem) {
});
var orfilter = { logic: "or", filters: [] };
var andfilter = { logic: "and", filters: [] };
$.each(selectedArray, function (i, v) {
if (v.trim() == "") {
}
else {
$.each(selectedArray, function (i, v1) {
if (v1.trim() == "") {
}
else {
orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 },
{ field: "QuantityPerUnit", operator: "contains", value:v1});
andfilter.filters.push(orfilter);
orfilter = { logic: "or", filters: [] };
}
});
}
});
kgrid.dataSource.filter(andfilter);
}
else {
kgrid.dataSource.filter({});
}
});
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/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/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 230px" />
<input id="reset" type="button" value="Reset" />
<input id="reset1" type="button" value="ORLOGIC" />
</div>
</div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize: 7,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
sortable: true,
pageable: true,
columns: [
{
field: "ProductID",
width: 100
},
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
width: 100
},
{
field: "QuantityPerUnit",
title: "Quantity Per Unit"
}
]
});
//change event
$("#category").keyup(function () {
var selecteditem = $('#category').val();
var kgrid = $("#grid").data("kendoGrid");
var gridListFilter = { filters: [] };
var gridDataSource = kgrid.dataSource;
gridListFilter.logic = "or"; // a different logic 'and' can be selected
gridListFilter.filters.push({ field: "ProductID", operator: "eq", value: parseInt(selecteditem) });
gridListFilter.filters.push({ field: "UnitPrice", operator: "eq", value: parseInt(selecteditem) });
gridDataSource.filter(gridListFilter);
gridDataSource.read();
});
$('#reset').click(function () {
//not working yet
$('#category').val('');
$("#grid").data("kendoGrid").dataSource.filter([]);
});
//Or LOGIC HERE... DOESN'T WORK
$('#reset1').click(function () {
$("#grid").data("kendoGrid").dataSource.filter({
logic: "or",
filters: [
{
field: "ProductName",
operator: "eq",
value: "Chang"
},
{
field: "QuantityPerUnit",
operator: "contains",
value: "box"
}
]
});
});
});
</script>
</body>
</html>
Let me know if any concern.
I need get changes in my array then i edit data in user controls. In this snipet my example. As I did not try, I can not do it. How I can make it?
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</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/kendo.all.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>
</head>
<body>
<a id="btnShowTest" href="#">Test</a>
<div id="layout"></div>
<script>
var root = {};
root.data =
[
{
code: 1,
name: "Test1",
status: true
},
{
code: 2,
name: "Test2",
status: true
},
{
code: 3,
name: "Test3",
status: false
},
];
$(function () {
$("#btnShowTest").kendoButton().click(function (e) {
Show();
});
root.ds = new kendo.data.DataSource(
{
pageSize: 10,
schema:
{
model:
{
id: "code",
fields:
{
code:
{
editable: false,
nullable: true
},
name:
{
type: "string"
},
status:
{
type: "boolean"
},
}
}
},
data: root.data
});
$("#layout").kendoListView(
{
dataSource: root.ds,
template: kendo.template($("#managersTemplate").html())
});
});
function Show() {
//root.ds.sync();
// var arr = root.ds.data();
var arr = root.data;
var str = "";
for (var i = 0; i < arr.length; ++i) {
str += arr[i].status + ", ";
}
alert(str);
}
function testclick(obj) {
var arr = root.data;
for (var i = 0; i < arr.length; ++i) {
if (arr[i].code == $(obj).attr('id')) {
arr[i].status = $(obj).prop('checked');
}
}
}
</script>
<script type="text/x-kendo-tmpl" id="managersTemplate">
<div >
<input type="checkbox" data-bind="checked:status" name="status" id="#:code#" onclick="testclick(this)" />
<span class="checkbox">#:name#</span>
</div>
</script>
</body>
</html>
Let me know if any concern.