I have implemented kendo grid in my project. I want to show "No Records Available" message to grid if data is not present. I set noRecords to true for my grid and it is working as expected. Now I have so many grids in my project so I want to globally set this setting for all the grids.
Is there a way to achieve so?
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/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.1.117/js/kendo.all.min.js"></script>
</head>
<body>
First Grid:
<div id="grid"></div>
Second Grid:
<div id="grid1"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available"
},
dataSource: {
page: 1,
pageSize: 10
}
});
$("#grid1").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
dataSource: {
page: 1,
pageSize: 10
}
});
</script>
</body>
</html>
You can find a working dojo here.
Hi you can extend the grid like this. You can put this in a separate js file and include it before you use a grid.
(function ($, kendo) {
var _init = kendo.ui.Grid.fn.init;
var extendedGrid = kendo.ui.Grid.extend({
init: function (element, options) {
var getTemplate = function (textP, iconP) {
var icon = iconP || 'icon';
var text = textP || 'No data available';
var tpl = `<div class="no-records-table"><div class="no-records-table-cell"><div class="grid-no-records-icon ${icon}"></div><div>${text}</div></div></div>`;
return tpl;
}
options = $.extend({
noRecords: {
template: getTemplate(options.noRecordsText, options.noRecordsIcon)
}
}, options);
//call the base constructor.
_init.call(this, element, options);
}
});
kendo.ui.plugin(extendedGrid);
}(window.kendo.jQuery, window.kendo));
You can check the the dojo here
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 have a Kendo UI Grid, which contains four columns:
Highlight MAC Time Message
The Highlight column can contain the values "yes" or "no", and this column is hidden.
I need to create a row template that will highlight (change the color or something) the row if the value is yes.
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.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/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.1.318/js/kendo.all.min.js"></script>
<style>
.change-background {
background-color: red;
}
</style>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
var ds = new kendo.data.DataSource({
data: [{
Highlight: "Yes",
MAC: "111",
Time: "aaa",
Message: "a1"
}, {
Highlight: "No",
MAC: "222",
Time: "bbb",
Message: "b2"
}]
});
$("#grid").kendoGrid({
dataSource: ds,
dataBound: onDataBound,
columns: [
{ hidden: true, field: "Highlight" },
{ field: "MAC" },
{ field: "Time" },
{ field: "Message" }
],
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
if (row.Highlight == "Yes") {
var element = $('tr[data-uid="' + row.uid + '"] ');
$(element).addClass("change-background");
}
});
}
</script>
</body>
</html>
Let me know if any concern.
You can apply condition in Row Template, Try Something like below
$("#grid").kendoGrid({
dataSource: ds,
rowTemplate: '<tr class="#:Highlight ==\"Yes\"? \"red\" : \"white\"#" data-uid="#= uid #"><td>#: MAC #</td><td>#:Time #</td><td>#:Message#</td></tr>'
});
DataSource
var ds = new kendo.data.DataSource({
data: [{
Highlight : "Yes",
MAC :"...",
Time :"...",
Message:"...."
}, {
Highlight : "No",
MAC :"...",
Time :"...",
Message:"...."
}]
});
hey hi everyone i am try to insert new record using kendo grid.
it's work fine.
but i want to set hide and show.
when its new then hide second column.
only on this row not other all.
here is my code:-
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var users = [{ UserId: 1, UserName: "Robin", IsAdmin: true }
, { UserId: 2, UserName: "Hood", IsAdmin: false }];
var t = $("#grid").kendoGrid({
dataSource: { data: users, pageSize: 10 }// binding data
,pageable: true
, selectable: "multiple row"
, toolbar: ["create"]
, columns: [
{ field: "UserId" }
, { field: "UserName"},
{ command: "destroy", title: " ", width: "100px" }
],
editable: true,
edit: function(e)
{
if(e.model.isNew())
{
$("td:nth-child(2)").css("display","none");
}
}
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="button" value="Iterate" onclick="iterate()"/>
<div id="grid"></div>
</body>
</html>
please help if is possible when insert new record hide there second td.
thanks.
Try this,
Below code set in document.ready
$(".k-button,.k-button-icontext,.k-grid-add").click(function(){
var activityGrid = $("#grid").data("kendoGrid");
activityGrid.hideColumn(1);
});
Updated Code:
var cnt = 1;
$(".k-button,.k-button-icontext,.k-grid-add").click(function () {
cnt = 0;
});
var hideFieldName = "UserName";
$(".k-textbox").live("focusin", function (e) {
if (cnt == 0) {
if ($(this).attr("name") == hideFieldName) {
if ($(this).closest('tr').index() == cnt) {
$(this).attr("readonly", "readonly");
}
}
}
});
So, below code worked as per your requirement. But in this case textbox was generated but user can't enter any value.
Let me know if any issue....