Develop Reference

AngularJs Kendo Grid Detail Template: Updating based on selected row in detail template

I am playing around with the KendoUI AngularJS Grid detail template.
I would like to be able to update a panel based on a selected row in the detail template grid.
I have correctly wired up the on change event to select a value from the detail template grid. But when I try to update a variable on the $scope object the value remains the same (the default value).
What is causing the variable on the #scope object not to update?
<div id="example">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul class="contact-info-form">
<li><label>Country:</label> <input class="k-textbox" ng-model="dataItem.Country" /></li>
<li><label>City:</label> <input class="k-textbox" ng-model="dataItem.City" /></li>
<li><label>Address:</label> {{dataItem.Address}}</li>
<li><label>Home phone:</label> {{dataItem.HomePhone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
<div class="panel panel-default">
<div class="panel-heading">Content</div>
<div class="panel-body">
{{content}}
</div>
</div>
</div>
<script>
angular.module("app", [ "kendo.directives" ])
.controller("MyCtrl", function ($scope) {
$scope.content = 'test';
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
selectable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID"
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
},
scrollable: false,
sortable: true,
selectable: true,
change: onChange,
pageable: true,
columns: [
{ field: "OrderID", title:"ID", width: "56px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "190px" }
]
};
};
function onChange(arg) {
console.log("The selected product id: [" + this.dataItem($(this.select()[0]).closest("tr")).id + "]");
$scope.content = this.dataItem($(this.select()[0]).closest("tr")).id;
}
})
I have tried using an inline Kendo provided on change function like this:
<div kendo-grid k-options="detailGridOptions(dataItem)" k-on-change="handleChange(data, dataItem, columns)"></div>
But it doesn't work correctly as the skope of data etc is the parent grid.

I figured out how to fix the issue
I changed selectable: true to selectable: "row".
I also added k-on-change="handleChange(data) to the child and parent grid and handle the change event with the following function on $scope:
$scope.handleChange = function (data) {
$scope.data = data;
};
It is much cleaner then the original approach I took and allows me to access the OrderID like this: {{data.OrderID}}

How to persist Data Table selected items after data is updated/refreshed (Quasar-Framework)

I'm using Quasar Framework with VueJS. I have a Data Table component that allows single item selection. The Data Table data is automatically updated every 5 seconds through websockets events. If I have an item selected, every time the Data Table data is updated, that item gets deselected, and I would like to persist the item selection after the data is updated.
Is there a way to accomplish this? I was thinking in two different approachs, but I have no idea how to do it, at least not from the documentation:
access directly the Data Table selected item
handle an event fired when an item is selected
In both cases the main idea would be to save the selection in a store, an restore the selection when the Data Table items update is done.
<template>
<q-layout>
<!-- Main block start-->
<div class="scroll" style="width: 100%">
<div class="layout-padding">
<div class="row" style="margin-top: 30px;">
<q-data-table :data="dataTableData" :config="config" :columns="columns" #refresh="refresh">
</q-data-table>
</div>
</div>
</div>
<!-- Man block end-->
</q-layout>
</template>
<script>
export default {
sockets:{
connect: function(){
console.log('socket connected')
},
info: function(data){
console.log('sockets: info',data)
//This is where I should get the current selected item if exists
this.dataTableData = data;
//This is where I should restore the selected item
}
},
methods: {
getInfo: function(val){
this.$socket.emit('getInfo', val);
},
refresh (done) {
this.$socket.emit('getInfo');
done();
}
},
created: function(){
this.getInfo()
},
data: function () {
return {
dataTableData: [],
config: {
title: 'My Data Table',
refresh: true,
columnPicker: false,
leftStickyColumns: 0,
rightStickyColumns: 0,
rowHeight: '50px',
responsive: true,
selection: 'single',
messages: {
noData: '<i>warning</i> No data available to show.'
}
},
columns: [
{ label: 'Name', field: 'name', width: '200px', sort: true },
{ label: 'Size', field: 'size', width: '50px', sort: true },
{ label: 'Status', field: 'status', width: '50px', sort: true },
{ label: 'Progress', field: 'progress', width: '150px', sort: false },
{ label: 'Speed', field: 'speed', width: '50px', sort: false },
{ label: 'ETA', field: 'eta', width: '50px', sort: false }
],
pagination: false,
rowHeight: 50,
bodyHeightProp: 'auto',
bodyHeight: 'auto'
}
},
watch: {
}
}
</script>
UPDATE
As far as I can see, they're already working in this enenhancement for the Quasar-Framework v0.14 =)

TypeError : r.getClientRects is not a function

I am trying to create a custom toolbar in KendoUI grid following this link:http://demos.telerik.com/kendo-ui/grid/toolbar-template but getting stuck with an error.
This is what I am trying to do in my code:
<div id="example">
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px" />
</div>
</script>
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data: "Data",
total: function (response) {
return $(response.Data).length;
}
},
pageSize: 10
},
toolbar: kendo.template($("#template").html()),
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CustomerAltID",
filterable: true
},
{
field: "CustomerID",
title: "Customer ID"
},
{
field: "CustomerName",
title: "Customer Name",
template: "<div class='customer-photo'" +
"style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: CustomerName #</div>"
},
{
field: "Gender",
title: "Gender",
template: "<div class='gender-photo'" +
"style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>"
}
]
});
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "Gender",
dataValueField: "CustomerID",
autoBind: false,
optionLabel: "All",
dataSource: {
severFiltering: true,
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data:"Data"
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
});
</script>
</div>
I don't know what the problem is and its been hours that I am unable to figure out the solution for it.
I am using the following versions- Jquery v-3.1 and Jquery UI-1.12

Another possibility as mentioned in this github issue is to include <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> in html. This worked for me.

The problem is likely due to using jQuery v3.1
Kendo does not currently work with jQuery v3, officially. But it apparently can work if you also include jquery-migrate.
http://www.telerik.com/forums/jquery-3-0
The officially supported versions of jQuery are listed here:
http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions
Note that it states that Kendo R3 2016 SP2 should also work with jQuery 3.1.1.
So, you can:
use the version of jQuery that ships with/is supported by whatever
version of Kendo you use
OR use jQuery 3.1 with jquery-migrate
OR use Kendo R3 2016 SP2 and jQuery 3.1.1

Kendo UI Grid cell background color

In kendo ui grid how can i change the background color? I've tried to set the template for the column but when the grid is visualized, it's empty without any color.
I have this code:
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
columns: [
{ field: "Colore", title: "Colore", width: "160px", template: "<div><span style='background-color:red'></span></div>" }
]
};
How can i apply a template to color the background of the cell

how to add conditional cell background?
what it does is: it builds a text row template from all parameters if there is no row template given.
it is possible to add template text in most of the parameters like:
...
//},
columns : [
{
title : 'Questions Translated',
attributes:{ 'style':"#=questions!==questionsMax?'background-color: red; color:white;':''#" },
field : "questions",
width: 140
},
...

Your code is essentially fine. You can do it as you are doing but the you are not seeing it because the span and the div are empty so the element has 0px width and you cannot see it.
Try doing:
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
columns: [
{
field: "Colore",
title: "Colore",
width: "160px",
template: "<div><span style='background-color:red'>This is a test</span></div>"
}
]
};
or
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
columns: [
{
field: "Colore",
title: "Colore",
width: "160px",
template: "<div style='background-color:red'> </div>"
}
]
};
or even:
$scope.thingsOptions = {
sortable: "true",
scrollable: "true",
columns: [
{
field: "Colore",
title: "Colore",
width: "160px",
template: "<span style='float: left; width: 100%; background-color:red'> </div>"
}
]
};
It is important to note that the content of the span and/or div are not empty: they contain a .
BUT if you want it colored and no padding / margin, then you can use:
{
field: "Colore",
title: "Colore",
width: "160px",
attributes: {
style: "background-color: red"
}
}

If you want to color the whole column, you can add attributes property in the column specification.
For example:
columns: [
{
field: "Colore",
title: "Colore",
width: "160px",
attributes: {
"class": "weekend"
}
}
]
And in your .css file you specify the weekend class as:
.weekend{
background-color: #F7DCAA;
}
More info here

You can use the [footerStyle] and [headerStyle] attributes to change the grid color, for example
<kendo-grid [data]="gridData">
<kendo-grid-column
field="ContactName"
title="Contact Name"
[width]="150"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
[style]="{'background-color': '#888','color': '#fff'}"
[footerStyle]="{'background-color': '#888','color': '#fff'}"
>
<ng-template kendoGridFooterTemplate>Contacts: 10</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="CompanyName"
title="Company Name"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
>
</kendo-grid-column>
<kendo-grid-column
field="City"
title="City"
[headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
>
</kendo-grid-column>
</kendo-grid>

Uncaught TypeError : cannot read property 'replace' of undefined In Grid

I'm new in using Kendo Grid and Kendo UI . My question is how can i resolve this Error
Uncaught TypeError: Cannot read property 'replace' of undefined
This is my Code on my KendoGrid
$("#Grid").kendoGrid({
scrollable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
dataSource: {
transport: {
read: {
url: '/Info/InfoList?search=' + search,
dataType: "json",
type: "POST"
}
},
pageSize: 10
},
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
altRowTemplate: kendo.template($("#rowTemplate").html())
});
Line that Causes the Error
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
HTML of rowTemplate
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class='k-alt'>
<td>
${ FirstName } ${ LastName }
</td>
</tr>
</script>

I think jQuery cannot find the element.
First of all find the element
var rowTemplate= document.getElementsByName("rowTemplate");
or
var rowTemplate = document.getElementById("rowTemplate");
or
var rowTemplate = $('#rowTemplate');
Then try your code again
rowTemplate.html().replace(....)

It could be because of the property pageable -> pageSizes: true.
Remove this and check again.

Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/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/2014.1.318/js/kendo.all.min.js"></script>
<script>
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).find('tr').removeClass('k-alt');
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 430,
filterable: true,
dataBound: onDataBound,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
</script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
I have implemented same thing with different way.

In my case, I was using a View that I´ve converted to partial view and I forgot to remove the template from "#section scripts". Removing the section block, solved my problem. This is because the sections aren´t rendered in partial views.

It is important to define an id in the model
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.id))
)