Code Samples: kendo grid

Showing posts with label kendo grid. Show all posts

Monday, October 11, 2021

Kendo Grid Persist Row Selection Example

This article is an example of a Kendo Grid row selection issue. The framework used is Kendo UI for jQuery. Let's begin.

In the persist row selection in this knowledge base article, https://docs.telerik.com/kendo-ui/knowledge-base/persist-row-selection-while-paging, it chooses the wrong rows after choosing the page and going back then Shift+Click a row. Below is the code from the knowledge base article.

	<!-- https://docs.telerik.com/kendo-ui/knowledge-base/persist-row-selection-while-paging -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Kendo UI Snippet</title>

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.default-v2.min.css"/>

	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.3.914/js/kendo.all.min.js"></script>
	</head>
	<body>
	<div id="grid"></div>

	<script>
	$(function () {
	var selectedOrders = [];
	var idField = "OrderID";

	$("#grid").kendoGrid({
	dataSource: {
	type: "odata",
	transport: {
	read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
	},
	schema: {
	model: {
	id: "OrderID",
	fields: {
	OrderID: { type: "number" },
	Freight: { type: "number" },
	ShipName: { type: "string" },
	OrderDate: { type: "date" },
	ShipCity: { type: "string" }
	}
	}
	},
	pageSize: 10,
	serverPaging: true,
	serverFiltering: true,
	serverSorting: true
	},
	height: 400,
	selectable: "multiple",
	pageable: {
	buttonCount: 5
	},
	sortable: true,
	filterable: true,
	navigatable: true,
	columns: [
	{
	field: "ShipCountry",
	title: "Ship Country",
	width: 300
	},
	{
	field: "Freight",
	width: 300
	},
	{
	field: "OrderDate",
	title: "Order Date",
	format: "{0:dd/MM/yyyy}"
	}
	],
	change: function (e, args) {
	var grid = e.sender;
	var items = grid.items();
	items.each(function (idx, row) {
	var idValue = grid.dataItem(row).get(idField);
	if (row.className.indexOf("k-state-selected") >= 0) {
	selectedOrders[idValue] = true;
	} else if (selectedOrders[idValue]) {
	delete selectedOrders[idValue];
	}
	});
	},
	dataBound: function (e) {
	var grid = e.sender;
	var items = grid.items();
	var itemsToSelect = [];
	items.each(function (idx, row) {
	var dataItem = grid.dataItem(row);
	if (selectedOrders[dataItem[idField]]) {
	itemsToSelect.push(row);
	}
	});

	e.sender.select(itemsToSelect);
	}
	});
	});
	</script>
	</body>
	</html>

view raw kendo-grid-persist-row-selection-kb-article.html hosted with ❤ by GitHub

Follow these steps to reproduce the row selection issue.

On page 1, select Brazil (row 3). The Brazil row should be selected.
Go to page 2 then back to page 1. Brazil is still selected. Well and good.
Shift+Click Belgium, the selection now starts from row 1 to row 5 (France, Germany, Brazil, France, Belgium). Selected should be row 3 to 5 (Brazil, France, Belgium).

Kendo Grid Persist Row Selection Example

Kendo Grid Persist Row Selection Problem

Now that we have seen the problem, let's see the solution. Why is this happening? When we switched pages the grid no longer knows which row was focused previously. So what we do now is utilize the persistSelection option. Since we have the persistSelection, we no longer need to handle the change event. On dataBound, we find which rows were selected and set the focus to that row.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

	<!-- https://jpllosa.blogspot.com -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Kendo Grid Persist Row Selection Example</title>

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.default-v2.min.css"/>

	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="http://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
	</head>
	<body>
	<div id="grid"></div>

	<script>
	$(function () {
	$("#grid").kendoGrid({
	dataSource: {
	type: "odata",
	transport: {
	read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
	},
	schema: {
	model: {
	id: "OrderID",
	fields: {
	OrderID: { type: "number" },
	Freight: { type: "number" },
	ShipName: { type: "string" },
	OrderDate: { type: "date" },
	ShipCity: { type: "string" }
	}
	}
	},
	pageSize: 10,
	serverPaging: true,
	serverFiltering: true,
	serverSorting: true
	},
	height: 400,
	selectable: "multiple",
	persistSelection: true,
	pageable: {
	buttonCount: 5
	},
	sortable: true,
	filterable: true,
	navigatable: true,
	columns: [
	{
	field: "ShipCountry",
	title: "Ship Country",
	width: 300
	},
	{
	field: "Freight",
	width: 300
	},
	{
	field: "OrderDate",
	title: "Order Date",
	format: "{0:dd/MM/yyyy}"
	}
	],
	dataBound: function (e) {
	var grid = e.sender;
	var selectedRows = grid.select();

	if (selectedRows.length > 0) {
	var lastRow = selectedRows[selectedRows.length - 1];
	grid.selectable._lastActive = lastRow;
	grid.current($(lastRow).find("td:first"));
	}
	}
	});
	});
	</script>
	</body>
	</html>

view raw kendo-grid-persist-row-selection-solution.html hosted with ❤ by GitHub

Output:

Kendo Grid Persist Row Selection Solution

There you have it. A quick and simple example of how to persist a row selection on a Kendo Grid.

Monday, July 12, 2021

Kendo Grid Copy Text Example

This article is an example of copying text in a Kendo Grid Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to be able to copy text in a Kendo Grid when multiple selection is enabled.

This article is based on an answer I made in Stack Overflow - Kendo Grid UI: Enable custom text copy. When the selectable option is set to multiple or others, you can't select text over a mouse-drag action. So we have to handle the copy text operation. First off, we create a Kendo ContextMenu that targets the grid component. When the context menu is opened, we display the text via an input tag wherein the user can copy the text as he pleases.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Kendo Grid Copy Text Example</title>

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
	</head>
	<body>

	<div id="grid"></div>
	<ul id="context-menu">
	<li id="copyText" style="width: 180px">
	<input id="valueText"></input>
	<span id="closeValueText" class="k-icon k-i-close"></span>
	</li>
	</ul>

	<script>
	$(document).ready(function() {
	$("#grid").kendoGrid({
	selectable: "multiple row",
	allowCopy: true,
	columns: [
	{ field: "productName" },
	{ field: "category" }
	],
	dataSource: [
	{ productName: "Tea", category: "Beverages" },
	{ productName: "Coffee", category: "Beverages" },
	{ productName: "Ham", category: "Food" },
	{ productName: "Bread", category: "Food" }
	]
	});

	var closeContextMenu = false;

	var contextMenu = $("#context-menu").kendoContextMenu({
	target: "#grid",
	filter: "td",
	close: function(e) {
	if (!closeContextMenu) {
	e.preventDefault();
	}
	},
	open: function(e) {
	var cell = e.target;
	var row = $(cell).parent()[0];
	var grid = $("#grid").data("kendoGrid");
	var itemId = e.item.id;

	var cellText = cell.innerText;

	$(e.item).find("#valueText").val(cellText);

	closeContextMenu = false;
	}
	}).data("kendoContextMenu");

	$("#closeValueText").on("click", function(e) {
	closeContextMenu = true;
	contextMenu.close();
	});
	});
	</script>
	</body>
	</html>

view raw kendo-grid-copy-text.html hosted with ❤ by GitHub

You should see something like below when you run the program.

Kendo Grid Copy Text

There you have it. A quick and simple example of how to copy a text from a Kendo Grid with selection features enabled.

Sunday, April 25, 2021

Kendo Grid Frozen Row Example

This article is an example of the Kendo Grid Component with a frozen row. The framework used is the Kendo UI for jQuery. In this example, our requirement is to freeze a row at the top of the grid. This is based on the https://docs.telerik.com/kendo-ui/knowledge-base/grid-frozen-rows example. Unfortunately, as of this writing, the grid does not produce the expected result when adding the following options:

Resizable columns.
Group by column.
Show/hide columns.
Filter by column.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Kendo Grid Frozen Row Example</title>
	<link rel="stylesheet"
	href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css"/>

	<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
	</head>

	<body>
	<style>
	.frozen-row,
	.k-alt.k-master-row.frozen-row {
	font-weight: bold;
	font-size: 0.9em;
	background-color: #bde0ed;
	}
	</style>
	<div id="example">
	<div id="grid"></div>
	<script>
	$(document).ready(function () {
	$("#grid").kendoGrid({
	dataSource: {
	data: [
	{
	reference: "001",
	name: "Ragnar",
	description: "Lothbrok",
	},
	{
	reference: "002",
	name: "Ivar",
	description: "The boneless",
	},
	{
	reference: "003",
	name: "Bjorn",
	description: "Ironside",
	},
	{
	reference: "004",
	name: "Rollo",
	description: "",
	},
	{
	reference: "005",
	name: "Lagertha",
	description: "",
	},
	{
	reference: "006",
	name: "Aslaug",
	description: "",
	},
	{
	reference: "007",
	name: "Torvi",
	description: "Ironside",
	},
	{
	reference: "008",
	name: "Siggy",
	description: "Haraldson",
	},
	]
	},
	height: 250,
	sortable: true,
	resizable: true,
	groupable: true,
	columnMenu: true,
	filterable: true,
	columns: [{
	field: "reference",
	title: "Reference",
	}, {
	field: "name",
	title: "Name"
	}, {
	field: "description",
	title: "Description"
	}],
	dataBound: function(e) {
	var grid = e.sender;
	var items = grid.items();
	grid.element.height(grid.options.height);
	var $table = grid.element.find(".k-grid-header table");
	var $frozenRow = $table.find(".frozen-row");

	items.each(function() {
	var $row = $(this);
	var dataItem = grid.dataItem($row);
	if (dataItem.reference === "005") {
	if ($frozenRow.length === 0) {
	// no frozen row yet, let's add one
	var $item = $row.clone();
	$item.addClass("frozen-row");
	$table.append($item);
	grid.element.height(grid.element.height()
	+ $row.height());
	}
	$row.hide();
	}
	});
	},
	columnHide: function(e) {
	var $table = e.sender.element
	.find(".k-grid-header table");
	var $frozenRow = $table.find(".frozen-row");
	$frozenRow.find('[data-field="'
	+ e.column.field + '"]').hide();
	},
	columnShow: function(e) {
	var $table = e.sender.element
	.find(".k-grid-header table");
	var $frozenRow = $table.find(".frozen-row");
	$frozenRow.find('[data-field="'
	+ e.column.field + '"]').show();
	},
	group: function(e) {
	var $table = e.sender.element
	.find(".k-grid-header table");
	var $frozenRow = $table.find(".frozen-row");
	$frozenRow.remove();
	},
	});
	});
	</script>
	</div>
	</div>
	</body>
	</html>

view raw kendo-grid-frozen-row.html hosted with ❤ by GitHub

The main difference here is our target row (frozen row) is appended to the table instead of the thead element. We also handle the columnHide and columnShow events to hide/show the frozen row's cell. And when a column is grouped, we remove the frozen row so that on dataBound, it is recreated. Recreating it aligns the columns.

For this example, Reference 005 is the target row. At the start, you will see something like this:

Kendo Grid Frozen Row

Try sorting, grouping, hiding/showing columns, and filtering. Our target row remains where it is supposed to be.

Kendo Grid Frozen Row Grouped by Column

Kendo Grid Frozen Row Sorted Column

Kendo Grid Frozen Row Resized Column

There you have it. A quick and simple example of how to use the Kendo Grid with a frozen row.

Saturday, April 17, 2021

Kendo Grid Double Click Row Example

This article is an example of the Kendo Grid Component with a row double click event handler. The framework used is the Kendo UI for jQuery. As of this writing, there is no built-in double click event for Kendo Grid. We will have to use jQuery to handle a double click event on a row.

You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

Here is the example code. Just comment/uncomment some of the lines to see how it works.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Kendo Grid Double Click Row TR Example</title>
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css"/>

	<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
	</head>

	<body>
	<div id="example">
	<div id="grid"></div>
	<script>
	$(document).ready(function () {
	var grid = $("#grid").kendoGrid({
	dataSource: {
	data: [
	{
	reference: "001",
	name: "Ragnar",
	description: "Lothbrok",
	},
	{
	reference: "002",
	name: "Ivar",
	description: "The boneless",
	},
	{
	reference: "003",
	name: "Bjorn",
	description: "Ironside",
	},
	]
	},
	height: 250,
	sortable: true,
	reorderable: true,
	resizable: true,
	groupable: true,
	columnMenu: true,
	filterable: true,
	columns: [{
	field: "reference",
	title: "Reference",
	}, {
	field: "name",
	title: "Name"
	}, {
	field: "description",
	title: "Description"
	}],
	dataBound: function(e) {
	console.log("dataBound");

	// Option 1: event handler on every row
	var self = e.sender;
	self.tbody.find("tr").dblclick(function(e) {
	console.log("option 1: row double clicked");
	console.log(self.dataItem(this));
	});
	},
	}).data("kendoGrid");

	// Option 2: one event handler, only on tbody
	// grid.tbody.off("dblclick");
	// grid.tbody.on("dblclick", "tr", function(e) {
	// console.log("option 2: row double clicked");
	// console.log(grid.dataItem(this));
	// });

	// Option 1.a: event handler on every row but is torn down when
	// adding a new row
	// grid.tbody.find("tr").dblclick(function(e) {
	// console.log("option 1.a: row double clicked");
	// console.log(grid.dataItem(this));
	// });

	// triggers a dataBound event which removes tr event handlers
	// comment out to make Option 1.a work.
	// Option 1 works because event handlers are added back on dataBound
	grid.dataSource.insert(0, {
	reference: "004",
	name: "Rollo",
	description: "",
	});

	for (var a = 0; a < grid.dataSource.total(); a++) {
	console.log($._data(grid.tbody.find("tr").eq(a)[0], "events"));
	}

	console.log($._data(grid.tbody[0], "events"));
	});
	</script>
	</div>
	</div>
	</body>
	</html>

view raw kendo-grid-double-click-tr.html hosted with ❤ by GitHub

We have two options of adding the double click event handler. First is adding it inside the dataBound event of the grid. As shown in line 57. When we load the page and double click on a row, we should should see a console output like so:

Console Output 1

Option 1

As we can see, dataBound is called twice. First, when the grid is initialized and second, when a new data is inserted (line 83). The console output on line 90 shows the double click handler bound to the row or tr element. There is one double click handler per row. Now, imagine if we have a thousand rows. We will have a thousand double click handlers!!! One positive is that on the second dataBound event the first double click handlers were automatically destroyed otherwise rows two to four would have two double click handlers.

Option 1.a

Next, let's do option 1.a. Let's comment out line 58 to 62. and then uncomment line 75 to 78. Save and reload the page and double click on a row. Now, we are binding the event handler outside the dataBound event. The console output should look something like below:

Console Output 1.a

Double click is gone!! Comment out the addition of new data (line 83 to 87). Save and reload the page and double click on a row. There should be a row double clicked in the output:

Console Output 1.aa

So what happend? The dataBound event was not invoked again because we didn't add new data. Therefore, the event handlers were not torn down.

Option 2

Uncomment the addition of new data (line 83 to 87). Comment out the option 1 code and uncomment the option 2 code (line 67 to 71). Save and relaod the page and double click on a row. We should see something like this in the console output:

Console Output 2

Now it's back to two dataBound events as per usual. The difference now is no event handler is bound to tr elements. Our double click event handler is bound to tbody. And it's bound only once. Even if we have a thousand rows, we will only have one event handler. Goodie! We could put the binding code inside dataBound but do we want to unbind (off) and bind (on) every time a new row is added or removed? I don't think so. From the looks of it option 2 is the way to go.

Why does option 2 work? In short, delegated event handler. We provided a selector to the on method making it a deletegated event handler. The old way of doing this is the delegate method which is now deprecated but might still work. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated event handlers to avoid the need to frequently attach and remove event handlers.

There you have it. A Kendo Grid double click row example. Happy coding.

Sunday, April 4, 2021

Kendo Grid Sticky Row Example

This article is an example of the Kendo Grid Component with a sticky row. The framework used is the Kendo UI for jQuery. In this example, we are tasked to make a particular row stick to the header so that it is always shown when the grid is scrolled. This is particularly useful when an important row is associated to something else shown on the screen that you want to highlight.

On dataBaound, we find the row we want to be sticky and add the necessary CSS to it. That's all there is to it.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Kendo Grid Sticky Row Example</title>
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css"/>

	<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
	</head>

	<body>
	<style>
	.sticky-cell {
	background: lightblue;
	position: sticky;
	top: 0;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
	}
	</style>
	<div id="example">
	<div id="grid"></div>
	<script>
	$(document).ready(function () {
	$("#grid").kendoGrid({
	dataSource: {
	data: [
	{
	reference: "001",
	name: "Ragnar",
	description: "Lothbrok",
	},
	{
	reference: "002",
	name: "Ivar",
	description: "The boneless",
	},
	{
	reference: "003",
	name: "Bjorn",
	description: "Ironside",
	},
	{
	reference: "004",
	name: "Rollo",
	description: "",
	},
	{
	reference: "005",
	name: "Lagertha",
	description: "",
	},
	{
	reference: "006",
	name: "Aslaug",
	description: "",
	},
	{
	reference: "007",
	name: "Torvi",
	description: "Ironside",
	},
	{
	reference: "008",
	name: "Siggy",
	description: "Haraldson",
	},
	]
	},
	height: 250,
	sortable: true,
	reorderable: true,
	resizable: true,
	groupable: true,
	columnMenu: true,
	filterable: true,
	columns: [{
	field: "reference",
	title: "Reference",
	}, {
	field: "name",
	title: "Name"
	}, {
	field: "description",
	title: "Description"
	}],
	dataBound: function(e) {
	var grid = e.sender;
	var rows = grid.items();

	for (let a = 0; a < rows.length; a++) {
	var row = $(rows[a]);
	var dataItem = grid.dataItem(row);

	if (dataItem.reference === "003") {
	row.find("td").each(function() {
	$(this).addClass("sticky-cell");
	});
	break;
	}
	}
	},
	});
	});
	</script>
	</div>
	</div>
	</body>
	</html>

view raw kendo-grid-sticky-row.html hosted with ❤ by GitHub

For this example, Reference 003 is the important row. At the start, you will see something like this:


Kendo Grid Sticky Row in the Middle

After scrolling fully up, the important row sticks to the header and is always shown, like so:

Kendo Grid Sticky Row at the Top

There you have it. A quick and simple example of how to use the Kendo Grid with a sticky row.

Sunday, March 28, 2021

Kendo Menu and Grid Example

This article is an example of the Kendo Menu combined with the Kendo Grid. The framework used is the Kendo UI for jQuery. In this example, we are tasked to create a menu that disables its items depending on the selected row in the grid. It's is something like, you can't work on a row if you own it. Hence, the owner's name is disabled in the menu item.

	<!DOCTYPE html>
	<html>
	<head>
	<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
	<title>Kendo Menu and Grid Example</title>
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css" />

	<script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>

	</head>
	<body>
	<ul id="menu"></ul>
	<div id="grid"></div>
	<script>
	$(document).ready(function() {
	$("#menu").kendoMenu({
	dataSource: {
	data: [{
	text: "Root",
	items: [{
	text: "Menu",
	items: [{
	text: "Alpha"
	},{
	text: "Bravo"
	},{
	text: "Charlie"
	}]
	}]
	}]
	},
	open: function(e) {
	var menu = this;
	var lis = $(e.item).find("li");

	for (let i = 0; i < lis.length; i++) {
	var li = lis[i];
	menu.enable(li, true);
	}

	var rows = grid.select();
	if (rows.length > 0) {
	var dataItem = grid.dataItem(rows[0]);

	for (let i = 0; i < lis.length; i++) {
	var $li = $(lis[i]);

	if ($li.text() === dataItem.owner) {
	menu.enable($li, false);
	}
	}
	}

	}
	});

	var grid = $("#grid").kendoGrid({
	dataSource: {
	data: [{
	owner: "Alpha",
	description: "a description..."
	},{
	owner: "Bravo",
	description: "bee on a flower..."
	},{
	owner: "Charlie",
	description: "chocolate factory..."
	}]
	},
	columns: [{
	field: "owner",
	title: "Owner",
	},{
	field: "description",
	title: "Description",
	}],
	selectable: "row"
	}).data('kendoGrid');
	});
	</script>
	</body>
	</html>