We have selections persisting, maybe just a bit too much. :D
For example, if you have a multipage kendo grid with client side data, do this with a client side kendo grid:
Select a row on Page 1
Go to Page 2
Select a row on Page 2 THEN deselect it and select another row
Go back to Page 1 (row selection persists)
Go back to Page 2
Row selection persists, but also the row that was previously deselected is also selected.
Is there a solution to this? Something we can use in the change event:
http://dojo.telerik.com/#crunchfactory/uhEZe/7
Thank you,
j
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var selectedOrders = [];
var idField = "ProductID";
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
selectable: "multiple, row",
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
],
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>
</div>
</body>
</html>
Let me know if any concern.
Related
I'm using KendoUI Grid to display some data, the grid is pageable and scrollable, right now I'm able to select and scroll to a specific row, but now when I'm there I also should be able to navigate and select a specific cell (td) of that row. This is what I've so far.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/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.1207/js/kendo.all.min.js"></script>
</head>
<body>
Select row with ID = <input id="numeric" /> (1-78)
<button id="searchBtn" class="k-button">Go</button>
<div id="grid"></div>
<script>
function selectGridRow(searchedId, grid, idField){
var dataSource = grid.dataSource;
var filters = dataSource.filter() || {};
var sort = dataSource.sort() || {};
var models = dataSource.data();
// We are using a Query object to get a sorted and filtered representation of the data, without paging applied, so we can search for the row on all pages
var query = new kendo.data.Query(models);
var rowNum = 0;
var modelToSelect = null;
models = query.filter(filters).sort(sort).data;
// Now that we have an accurate representation of data, let's get the item position
for (var i = 0; i < models.length; ++i) {
var model = models[i];
if (model[idField] == searchedId) {
modelToSelect = model;
rowNum = i;
break;
}
}
// If you have persistSelection = true and want to clear all existing selections first, uncomment the next line
// grid._selectedIds = {};
// Now go to the page holding the record and select the row
var currentPageSize = grid.dataSource.pageSize();
var pageWithRow = parseInt((rowNum / currentPageSize)) + 1; // pages are one-based
grid.dataSource.page(pageWithRow);
var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "']");
if (row.length > 0) {
grid.select(row);
// Scroll to the item to ensure it is visible
grid.content.scrollTop(grid.select().position().top);
}
}
$(document).ready(function () {
$("#searchBtn").click(function(){
var grid = $("#grid").data("kendoGrid");
var searchedId = $("#numeric").data("kendoNumericTextBox").value();
selectGridRow(searchedId, grid, "ProductID");
});
$("#numeric").kendoNumericTextBox({
min: 1,
max: 78,
format: "n0"
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 10
},
height: 350,
sortable: true,
filterable: true,
selectable: "row",
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{
field: "ProductID",
title: "ID",
width: 100
},{
field: "ProductName",
title: "Product Name",
width: 180
},{
field: "ProductName",
title: "Product Name 2",
width: 230
},{
field: "ProductName",
title: "Product Name 3",
width: 230
},{
field: "ProductName",
title: "Product Name 4",
width: 230
},{
field: "ProductName",
title: "Product Name 5",
width: 230
},{
field: "UnitPrice",
title: "Unit Price",
width: 150
}, {
field: "UnitsInStock",
title: "Units in Stock",
width: 150
}, {
field: "Discontinued",
width: 150
}]
});
});
</script>
</body>
</html>
For example what I want to do is to navigate to row 4 (this is working) but also navigate to column Discontinued and select that cell of that row.
Is there any way to do it? Using JavaScript or jQuery or a native function from KendoUI?
Here is a Dojo to play with.
Add a class to your Discontinued column definition:
{
field: "Discontinued",
width: 150,
attributes: {
class: "discontinued"
}
}
Change the selector you're using to select the row to the following:
var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "'] td.discontinued");
Replace grid.content.scrollTop(grid.select().position().top); with row[0].scrollIntoView();.
I create a similar demo relate with my situation. What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
It's possible to do like this without using column template for the checkbox.
DEMO IN DOJO
Example like this screen shot. (this one manually checked)
p/s: I found a similar demo, but this one using column.template for the checkbox.
This example code (which is based on your sample code) answers your requirement, which is...
What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
Try this in the Telerik DOJO. We need to wait for Kendo to finish expanding the detail row (making sure all HTML elements are fully built), hence the setTimeout in detailExpand. Change the delay depending on your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Grid Master Detail Checkbox</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
detailExpand: function(e) {
var $checkbox = $(e.masterRow.context);
if ($checkbox.is(":checked")) {
setTimeout(function() {
e.detailRow.find("tbody tr").each(function() {
var $row = $(this);
$row.find(".k-checkbox").each(function() {
var $checkbox = $(this);
$checkbox.attr("checked", true);
});
$(this).addClass("k-state-selected");
});
}, 250);
}
},
columns: [
{ selectable: true, width: 50 },
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
}).data("kendoGrid");
grid.tbody.on("click", ".k-master-row .k-checkbox", function(e) {
var $checkbox = $(this);
if ($checkbox.is(":checked")) {
var $tr = $checkbox.closest("tr");
var $a = $tr.find(".k-hierarchy-cell a.k-icon");
if ($a.length) {
if ($a.hasClass("k-i-expand")) {
grid.expandRow($tr);
}
}
}
});
});
function detailInit(e) {
var detailgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: {
field: "EmployeeID",
operator: "eq",
value: e.data.EmployeeID
}
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ selectable: true, width: 50, headerTemplate: ' '},
{
field: "OrderID",
width: "110px"
},
{
field: "ShipCountry",
title: "Ship Country",
width: "110px"
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipName",
title: "Ship Name",
width: "300px"
}
]
}).data("kendoGrid");
}
</script>
</div>
</body>
</html>
I adapted your first snippet based on the second one that you provided. Check out this revised demo.
Basically, you need to call getKendoGrid() and assign its return value (the actual grid) to the grid variable.
After that, add the change event listener as shown in the second demo snippet that you provided.
grid.tbody.on("change", ".k-checkbox", function() {
var checkbox = $(this);
var nextRow = checkbox.closest("tr").next();
// Note: the row should be expanded at least once as otherwhise there will be no child grid loaded
if (nextRow.hasClass("k-detail-row")) {
// And toggle the checkboxes
nextRow.find(":checkbox")
.prop("checked", checkbox.is(":checked"));
}
});
Also note that it's not .master as in the second demo, but .k-checkbox, as you are not providing a template in the first column (which the second demo does and the checkbox there has the master class).
I have Kendo grid id = AddressID. when page load how can i click the first row automatically?
i tried the code below but no luck
var grid = $("#AddressGrid").data("kendoGrid");
grid.select("tr:eq(1)");
i tried this it selects the row but i want to trigger click
$(document).ready(function () {
var grid = $("#AddressGrid").data("kendoGrid");
grid.select(grid.tbody.find("tr:eq(1)").click());
});
If your data hasn't been loaded yet, there is nothing to select. You will have to specify the dataBound event and add you own handler.
Update: The change event fires whenever a row is selected either programatically or by the user's mouse.
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
selectable: "row",
pageable: { refresh: true, pageSizes: true, buttonCount: 5 },
columns: [
{ field: "ContactName", title: "Contact Name" },
{ field: "ContactTitle", title: "Contact Title" },
{ field: "CompanyName", title: "Company Name" },
{ field: "Country" }
],
change: onChange,
dataBound: onDataBind // Callback handler
});
function onDataBind(e) {
this.select("tr:eq(0)"); // this === $("#grid").data("kendoGrid")
}
function onChange(arg) {
const selected = [...this.select()].pop(); // multi-select is off
const record = this.dataItem(selected);
console.log(record.ContactName);
}
.as-console-wrapper { max-height: 4em !important; }
.as-console .as-console-row .as-console-row-code,
.as-console-row-code, .as-console-row:after { font-size: smaller; }
.k-grid { font-size: 0.667rem; }
.k-grid td { line-height: 1.667rem; }
<link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.common-material.min.css" rel="stylesheet">
<link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.materialblack.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
<div id="grid"></div>
I have a page that may create several grids at any time. I am trying to set a single event handler for all of them by adding a delegate for the groupor dataBoundevent but it never triggers.
I am trying this
$(document).on('dataBound', 'div.k-grid', onGridDataBound);
Is it possible to do this without hooking on to each individual grid's settings when it is being created or without having to bind the event per grid?
I can suggest you two alternatives:
Override the Grid prototype (before creating any Grids) and inject the event handler(s) directly there:
function onGridDataBound(e) {
alert(e.sender.wrapper.attr("id") + " was databound");
}
kendo.ui.Grid.fn.options.dataBound = onGridDataBound;
Here is a full example:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<p>Grid 1</p>
<div id="grid1"></div>
<p>Grid 2</p>
<div id="grid2"></div>
<script>
function onGridDataBound(e) {
alert(e.sender.wrapper.attr("id") + " was databound");
}
$(function() {
kendo.ui.Grid.fn.options.dataBound = onGridDataBound;
var gridOptions = {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 200,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}]
};
$("#grid1").kendoGrid(gridOptions);
$("#grid2").kendoGrid(gridOptions);
});
</script>
</body>
</html>
Create a custom Kendo UI widget that has the desired event handlers attached initially.
(function($) {
var kendo = window.kendo,
ui = kendo.ui,
Grid = ui.Grid
var MyGrid = Grid.extend({
init: function(element, options) {
Grid.fn.init.call(this, element, options);
this.bind("dataBound", onGridDataBound);
},
options: {
name: "MyGrid"
}
});
ui.plugin(MyGrid);
})(jQuery);
function onGridDataBound(e) {
alert(e.sender.wrapper.attr("id") + " was databound");
}
Here is a full example:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title>Kendo UI default event handlers via prototype</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<p>Grid 1</p>
<div id="grid1"></div>
<p>Grid 2</p>
<div id="grid2"></div>
<script>
(function($) {
var kendo = window.kendo,
ui = kendo.ui,
Grid = ui.Grid
var MyGrid = Grid.extend({
init: function(element, options) {
Grid.fn.init.call(this, element, options);
this.bind("dataBound", onGridDataBound);
},
options: {
name: "MyGrid"
}
});
ui.plugin(MyGrid);
})(jQuery);
function onGridDataBound(e) {
alert(e.sender.wrapper.attr("id") + " was databound");
}
$(function() {
var gridOptions = {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 200,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}]
};
$("#grid1").kendoMyGrid(gridOptions);
$("#grid2").kendoMyGrid(gridOptions);
});
</script>
</body>
</html>
So I ended up doing something really inefficient to get this done. Since only the default browser events seem to be delegated, I ended up adding a binder for mousedown on any of the grid headers. The handler for that would then bind to the group event for that grid since then it is guaranteed to be on the page.
var boundGrids = [];
function onGridGroup(e) {
//Grid group code
};
function onGridHeaderClick(e) {
var grid = $(this).closest('.k-grid').data('kendoGrid');
if (!grid._attachedGroup) {
grid._attachedGroup = true;
boundGrids.push(grid);
grid.bind('group', onGridGroup);
}
};
$(document).on('mousedown', '.k-grid th a.k-link', onGridHeaderClick);
Check this thread. Only difference is that in your case you got multiple grids. Due that I would do something like:
var grids = $('div.k-grid');
grids.each(function(e) {
var grid = $(this).data('kendoGrid');
grid.bind("dataBound", function () {
alert('Databounded');
});
});
In a custom button in my pager, I call grid.jqGrid("getGridParam", "data"), "data") to get all the data in the grid but it returns empty array. When I call grid.jqGrid("getGridParam", "data") in the loadComplete function, it still returns an empty array. However if I call grid.jqGrid('getRowData') it gives me the data I am looking for. See my code below.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/css/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/css/ui.jqgrid.css"/>
<!-- Overide css styling to ensure that calendar image is inline with text box -->
<style type="text/css">.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select,
.ui-jqgrid .ui-search-table .ui-search-input > img {vertical-align: middle; display: inline-block;}
</style>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/grid.locale-en.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<title>Trucks Overview</title>
<script type="text/javascript">
jQuery().ready(function () {
var grid = jQuery("#truck_grid");
var orderGridDialog = $('#truck_grid_dialog');
var gridData;
getUniqueNames = function(columnName) {
var texts = grid.jqGrid('getCol', columnName, false);
var uniqueTexts = [], textsLength = texts.length, text, i, textsMap = {};
for (i=0;i<textsLength;i++) {
text = texts[i];
if (text != undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
};
buildSearchSelect = function(uniqueNames) {
var values=":All";
$.each (uniqueNames, function() {
values += ";" + this + ":" + this;
});
return values;
};
setSearchSelect = function(columnName) {
grid.jqGrid('setColProp', columnName,
{ stype: 'select',
searchoptions: {
value:buildSearchSelect(getUniqueNames(columnName)),
sopt:['eq']
}
}
);
};
var initDateWithButton = function (elem) {
if (/^\d+%$/.test(elem.style.width)) {
// remove % from the searching toolbar
elem.style.width = '';
}
// to be able to use 'showOn' option of datepicker in advance searching dialog
// or in the editing we have to use setTimeout
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'mm/dd/yy',
showOn: 'button',
changeYear: true,
changeMonth: true,
buttonImageOnly: true,
buttonImage: "images/calendar.gif",
buttonText: "Select date",
showButtonPanel: true,
onSelect: function (dateText, inst) {
inst.input.focus();
if (typeof (inst.id) === "string" && inst.id.substr(0, 3) === "gs_") {
$(inst.id).val(dateText);
grid[0].triggerToolbar();
}
else {
// to refresh the filter
$(inst).trigger("change");
}
}
});
}, 100);
};
grid.jqGrid({
url: '${pageContext.request.contextPath}/getTrucksJSONAction',
datatype: "json",
mtype: 'GET',
colNames: ['Truck ID', 'Status', 'Carrier Code', 'Date Created', 'Date Closed', 'T1 Status', 'Truck Arrived'],
colModel: [
{name: 'truckId', key:true, index: 'truckId', align: 'center', width: 100},
{name: 'status', index: 'status', align: 'center', width: 100},
{name: 'carrierName', index: 'carrierName', align: 'center', width: 100},
{name: 'createdDate', index: 'createdDate', align: 'center', width: 100},
{name: 'closedDate', index: 'closedDate', align: 'center', width: 100},
{name: 't1Status', sortable: false, align: 'center', width: 100, fixed: true,
formatter: function (celvalue) {
return celvalue ?
"<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>" :
"<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:10px;height:10px'/>";
}} ,
{name: 'truckArrived', sortable: false, align: 'center', width: 100, fixed: true,
formatter: function (celvalue) {
return celvalue ?
"<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>" :
"<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:10px;height:10px'/>";
}}
],
rowNum: 10,
height: 300,
autoheight: true,
autowidth: true,
rowList: [10, 20, 30],
pager: jQuery('#truck_grid_pager'),
sortname: 'truckId',
sortorder: "desc",
jsonReader: {
root: "records",
page: "page",
total: "total",
records: "rows",
repeatitems: false
},
viewrecords: true,
altRows: false,
gridview: true,
hidegrid: false,
multiselect:true,
recordtext: '',
emptyrecords: 'No Trucks',
forceFit: true,
caption: "Trucks Overview",
loadComplete: function() {
// Reload the grid after changing paginattion
var allRecords = grid.getGridParam('lastpage') * grid.getGridParam('records');
grid.jqGrid('setGridParam', {
recordtext: allRecords + ' Trucks(s) Found. Displaying {0} to {1}'});
$(this).trigger("reloadGrid");
async: false,
setSearchSelect('status');
setSearchSelect('carrierName');
grid.jqGrid('setColProp', 'truckId', {
searchoptions : {
sopt : [ 'bw' ],
dataInit : function(elem) {
$(elem).autocomplete({
source : getUniqueNames('truckId'),
delay : 0,
minLength : 0
});
}
}
});
grid.jqGrid('setColProp', 'createdDate', {
sorttype: 'date', editable: true,
editoptions: { dataInit: initDateWithButton, size: 8 },
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateWithButton
}
});
gridData = $(this).jqGrid("getGridParam", "data");
grid.jqGrid('filterToolbar', {autoSearch: true});
},
}).navGrid('#truck_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true})
.navButtonAdd('#truck_grid_pager', {caption:"Truck Arrived", buttonicon:"ui-icon-flag", position:"first", title:"Truck Arrived",
onClickButton: function(){
var i;
var data = grid.jqGrid("getGridParam", "data");
var selRowIds = grid.jqGrid('getGridParam', 'selarrrow');
for (i = 0; i < data.length; i++) {
if (selRowIds.indexOf(data[i].truckId) > -1) {
data[i].truckArrived = true;
}
}
grid.trigger("reloadGrid");
}
})
.navButtonAdd('#truck_grid_pager', {caption:"Ship Confirm", buttonicon:"ui-icon-circle-check", position:"first", title:"Ship Confirm",
onClickButton: function(){
alert("Ship has been confirmed");}
});
orderGridDialog.dialog({
autoOpen: false,
width: 1000,
height: 400,
draggable: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 250
},
close: function(event, ui){
orderGridDialog.text('Loading Grid...');
}
});
});
</script>
</head>
<body>
<table id="truck_grid"></table>
<div id="truck_grid_pager"></div>
<div id="truck_grid_dialog" title="Orders Overview">Loading...</div>
</body>
</html>
The problem happens in the last section of the code, namely:
.navButtonAdd('#truck_grid_pager', {caption:"Truck Arrived", buttonicon:"ui-icon-flag", position:"first", title:"Truck Arrived",
onClickButton: function(){
var i;
var data = grid.jqGrid("getGridParam", "data");
var selRowIds = grid.jqGrid('getGridParam', 'selarrrow');
for (i = 0; i < data.length; i++) {
if (selRowIds.indexOf(data[i].truckId) > -1) {
data[i].truckArrived = true;
}
}
grid.trigger("reloadGrid");
}
})
The second problem I have is when grid.trigger("reloadGrid") is called, the truckArrived icon is not changed from red to green as expected.
The internal parameter data will be used only if one uses datatype: "local". You use datatype: "json". It means that the server hold whole dataset only. The url: '${pageContext.request.contextPath}/getTrucksJSONAction' receive request for the page of sorted and filtered data. The server should implement sorting, filtering/sorting and paging.
There exists a special case: one use remote datatype ("json" or "xml"), but one uses loadonce: true parameter additionally. In the case the server should return all unfiltered data instead of providing the page of data. The returned data should be still sorted corresponds to sortname, sortorder parameter (which will be sent to the server as sidx and sord). jqGrid displays the first page of returned data, but it fills the internal data parameter with whole rows of data returned from the server. After the first loading of data jqGrid changes datatype to "local" and so the later sorting, paging and filtering of data will be like in case of datatype: "local". In the case yoou will be able to get all the data using grid.jqGrid("getGridParam", "data"), but you can do this of case after the data will be once loaded.