I am new to jqGrid and I need help with a scenario that I am not able to figure out.
I am able to make a cell un-editable using the following code:
jQuery("#updAssist").jqGrid('setCell',rowid,'precPsProg','','not-editable-cell');
Now I want to make the cell editable again based on some condition.
What class should I use to achieve that?
Is there a 'editable-cell' class that I can use?
You should remove 'not-editable-cell' class from the cell (<td> element)
td.removeClass('not-editable-cell');
You should select all cells (<td> element) which you want make editable.
I made the demo which demonstrate how to do this. The most important code fragment from the demo is
var grid = $("#list");
var getColumnIndexByName = function(gr,columnName) {
var cm = gr.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
var changeEditableByContain = function(gr,colName,text,doNonEditable) {
var pos=getColumnIndexByName(gr,colName);
// nth-child need 1-based index so we use (i+1) below
var cells = $("tbody > tr.jqgrow > td:nth-child("+(pos+1)+")",gr[0]);
for (var i=0; i<cells.length; i++) {
var cell = $(cells[i]);
//var cellText = cell.text();
var unformatedText = $.unformat(cell,{rowId:cell[0].id,
colModel:gr[0].p.colModel[pos]},pos);
if (text === unformatedText) { // one can use cell.text() instead of
// unformatedText if needed
if (doNonEditable) {
cell.addClass('not-editable-cell');
} else {
cell.removeClass('not-editable-cell');
}
}
}
};
grid.jqGrid({
datatype: "local",
...
cellEdit: true,
cellsubmit: 'clientArray',
loadComplete: function() {
changeEditableByContain(grid,'name','test',true);
}
});
$("#doEditable").click(function(){
changeEditableByContain(grid,'name','test',false);
});
$("#doNonEditable").click(function(){
changeEditableByContain(grid,'name','test',true);
});
In the demo the cells from the 'Client' column having the text "test" will be marked as "non-editable". Later one can make the cells "editable" or "non-editable" be clicking on the corresponding button.
Related
I am trying to add a kendoToolTip to the cells of a specific column on my grid. Right now, the tooltip works, but it displays when hovering over any cell on the grid.
I want to get the specific cell index of the item im hovering over, so that I can only display the tooltip when hovering over cell index 9 for example.
The code i have always returns me cell index of -1. I can make it work with an onclick event, but i cannot get it to work with on hover.
Any help would be appreciated.
$("#samplerequest-grid").kendoTooltip({
filter: "td",
content: function(e) {
var grid = $("#samplerequest-grid").data("kendoGrid");
var dataItem = grid.dataItem(e.target.closest('tr'));
var rowIdx = $("tr", grid.tbody).index(dataItem);
var colIdx = $("td", dataItem).index(this); // Always returns -1
console.log("row:" + rowIdx + " col:" + colIdx + " msg: " + dataItem.sampleStatusMsg);
return dataItem.sampleStatusMsg;
}
});
UPDATE:
Thank you for the answers. They both would have worked, and i may change my solution to use them. Before seeing your answers i did find my own solution, which was to add a template to the cell and filter for that id.
Grid Column Declaration:
{
field: "sampleStatus",
title: "Sample Status",
width: "110px",
locked: true,
lockable: true,
template: "<span id='sampStatus'>#=getValue(sampleStatus)#</span>"
},
Controller function for tooltip
$("#samplerequest-grid").kendoTooltip({
filter: "#sampStatus",
content: function(e) {
var grid = $("#samplerequest-grid").data("kendoGrid");
var dataItem = grid.dataItem(e.target.closest('tr'));
return dataItem.sampleStatusMsg;
}
});
I think you're overcomplicating things here. You can get the indexes with:
e.target.index() the cell index;
e.target.closest('tr') the row index.
You content event should be:
content: function(e) {
var grid = $("#samplerequest-grid").data("kendoGrid");
var tr = e.target.closest('tr');
var dataItem = grid.dataItem(tr);
var rowIdx = tr.index();
var colIdx = e.target.index();
console.log("row:" + rowIdx + " col:" + colIdx + " msg: " + dataItem.sampleStatusMsg);
return dataItem.sampleStatusMsg;
}
Demo
The code to find the index will not work because you are searching for td elements in the context of the dataItem. Also, I don't think that the context of the content function is the current cell. This code should work to find the index:
var row = e.target.closest('tr');
var colIdx = $("td", row).index(e.target);
but IMHO a better approach is to add a class to the column cells and the same class to the filter:
https://dojo.telerik.com/#SiliconSoul/UbImUjOl
I'm basically trying to turn one of the rows in a table to a different color. I'm currently using the jquery plugin Sheetrock to grab information from a google sheet. I want to turn the 9th row red when it's value is lower than 10.
Here is a jsfiddle of what I am working on right now: http://jsfiddle.net/m04ddeu2/435/ .
Here is the google sheet I'm grabbing info from:
https://docs.google.com/spreadsheet/ccc?key=0AlRp2ieP7izLdGFNOERTZW0xLVpROFc3X3FJQ2tSb2c#gid=0
HTML:
<table id="statistics" class="table table-condensed table-striped"></table>
Javascript:
// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AlRp2ieP7izLdGFNOERTZW0xLVpROFc3X3FJQ2tSb2c#gid=0';
// Load an entire sheet.
$('#statistics').sheetrock({
url: mySpreadsheet,
rowHandler: formatRows
});
var formatRows = function (options) {
var columnNumber = 9;
var threshhold = 10;
$('tr', options.target).each(function (i, el) {
var $tableRow = $(el);
var amount = $('td:nth-child(' + columnNumber + ')', $tableRow).text();
if (parseInt(amount) <= threshhold) {
$tableRow.addClass('warning');
}
});
};
CSS:
.warning {
color:red
}
I can't see any issues in my code. Is there something wrong with the way I'm writing my variables?
The function that Sheetrock is looking for for rowHandler needs to be in the following form:
// Default row handler: Output a row object as an HTML table row.
var toHTML = function (row) {
var cell;
var html = '';
// Use "td" for table body row, "th" for table header rows.
var tag = (row.num) ? 'td' : 'th';
// Loop through each cell in the row.
for (cell in row.cells) {
if (row.cells.hasOwnProperty(cell)) {
// Wrap the cell value in the cell tag.
html += wrapTag(row.cells[cell], tag, '');
// you can add your logic here to test for ninth column value under 10
}
}
// Wrap the cells in a table row tag.
return wrapTag(html, 'tr', '');
};
The number of rows are dynamic so I cant fixate on the name of the row, here is the fiddle: http://jsfiddle.net/1vp29wxq/1/
$('.NameOfSensor').on("click", function () {
var tr = $(this).parents('tr:first');
var thisRow = tr.find(".rowMode");
var checkChecked = $("input[class='rowMode']:checkbox:checked");
var checkBoxes = $("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
What I get from that is that all check boxes are selected, but I just want the ones from the row where it is clicked. Also, whatever I tried I cant seem to incorporate the 2 variables (tr and thisRow) I created, can I get some help? Also, the number of columns in which the checkboxes are, are always 6 (sometimes I just hide them).
Change your code into this:
$('.NameOfSensor').on("click", function () {
var tr = $(this).closest('tr');
var checkChecked = $(tr).find("input[class='rowMode']:checkbox:checked");
var checkBoxes = $(tr).find("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
Your selector was wrong and got all rows.
Search for checkboxes within the clicked line:
var tr = $(this).closest('tr'); // fast alternative to `.parents('xxx:first')`
var checkChecked = $("input[class='rowMode']:checkbox:checked", tr),
checkBoxes = $("input[class='rowMode']:checkbox", tr);
DEMO: http://jsfiddle.net/1vp29wxq/2/
I have a scenario where based on some condition I am setting the grid row color, in the same way I need to set the tooltip of the row for which color has changed dynamically using JQuery. Below is the sample that set background color of a row dynamically based on some condition: Any suggestions on how to set the tooltip dynamically for complete row.
function setColors(transStatus) {
var grid = $("#approvaltranslistview").data("kendoGrid");
var data = grid.dataSource.data();
for (var i = 0; i < transStatus.length ; i++) {
grid.tbody.find('>tr').each(function () {
var dataItem = grid.dataItem(this);
if (dataItem.TransId == transStatus[i].Status.transDetails.TransactionId && transStatus[i].Status.transSaveStatus.IsSaved == true) {
$(this).addClass("focus");
}
});
}
}
I have a scenario with grid within grid implemented using the detailInit method. Here when user makes edit, i do some calculations that will change the data in the both parent and child. and then to refresh data, i will call the datasource.read to render data. this works and the data is displayed, however any detail grid which are expanded will be collapsed, is there any way i can prevent this from happening.
To answer this and another question:
"I figured out how to set the data in the master from the child BUT, the
whole table collapses the child grids when anything is updated, this is a
very annoying behavior, is there anyway I can just update a field in
the master table without it collapsing all the child elements?
(basically, update the column, no mass table update)"
in another thread at: telerik
This is extremely annoying behavior of the Kendo Grid and a major bug. Since when does a person want the sub-grid to disappear and hide a change that was just made! But this isn't the only problem; the change function gets called a Fibonacci number of times, which will freeze the browser after a significant number of clicks. That being said, here is the solution that I have come up with:
In the main grid
$('#' + grid_id).kendoGrid({
width: 800,
...
detailExpand: function (e) {
var grid = $('#' + grid_id).data("kendoGrid");
var selItem = grid.select();
var eid = $(selItem).closest("tr.k-master-row").attr('data-uid')
if (contains(expandedItemIDs, eid) == false)
expandedItemIDs.push(eid);
},
detailCollapse: function (e) {
var grid = $('#' + grid_id).data("kendoGrid");
var selItem = grid.select();
var eid = $(selItem).closest("tr.k-master-row").attr('data-uid')
for (var i = 0; i < expandedItemIDs.length; i++)
if (expandedItemIDs[i] == eid)
gridDataMap.expandedItemIDs.splice(i, 1);
},
Unfortunately globally we have:
function subgridChange() {
var grid = $('#' + grid_id).data("kendoGrid");
for (var i = 0; i < expandedItemIDs.length; i++)
grid.expandRow("tr[data-uid='" + expandedItemIDs[i] + "']");
}
function contains(a, obj) {
for (var i = 0; i < a.length; i++)
if (a[i] === obj) return true;
return false;
}
expandedItemIDs = [];
Now the 'subgridChange()' function needs to be called every time a change is made to the subgrid.
The problem is that the number of times the change function in the subgrid gets called increases exponentially on each change call. The Kendo grid should be able to call a stop propagation function to prevent this, or at least give the programmer access to the event object so that the programmer can prevent the propagation. After being completely annoyed, all we have to do is to place the 'subgridChange()' function in the subgrid 'datasource' like so:
dataSource: function (e) {
var ds = new kendo.data.DataSource({
...
create: false,
schema: {
model: {
...
}
},
change: function (e) {
subgridChange();
}
});
return ds;
}
I also had to place the 'subgridChange()' function in the Add button function using something like this
$('<div id="' + gridID + '" data-bind="source: prodRegs" />').appendTo(e.detailCell).kendoGrid({
selectable: true,
...
toolbar: [{ template: "<a class='k-button addBtn' href='javascript://'><span class='k-icon k-add' ></span> Add Product and Region</a>" }]
});
$('.addBtn').click(function (event) {
...
subgridChange();
});
When a user selects a row, record the index of the selected row. Then after your data refresh, use the following code to expand a row
// get a reference to the grid widget
var grid = $("#grid").data("kendoGrid");
// expands first master row
grid.expandRow(grid.tbody.find(">tr.k-master-row:nth-child(1)"));
To expand different rows, just change the number in the nth-child() selector to the index of the row you wish to expand.
Actually all that is needed is the 'subgridChange()' function in the main grid 'dataBound' function:
$('#' + grid_id).kendoGrid({
...
dataBound: function (e) {
gridDataMap.subgridChange();
}
});
Different but similar solution that i used for same problem:
expandedItemIDs = [];
function onDataBound() {
//expand rows
for (var i = 0; i < expandedItemIDs.length; i++) {
var row = $(this.tbody).find("tr.k-master-row:eq(" + expandedItemIDs[i] + ")");
this.expandRow(row);
}
}
function onDetailExpand(e) {
//refresh the child grid when click expand
var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
grid.dataSource.read();
//get index of expanded row
$(e.detailCell).text("inner content");
var row = $(e.masterRow).index(".k-master-row");
if (contains(expandedItemIDs, row) == false)
expandedItemIDs.push(row);
}
function onDetailCollapse(e) {
//on collapse minus this row from array
$(e.detailCell).text("inner content");
var row = $(e.masterRow).index(".k-master-row");
for (var i = 0; i < expandedItemIDs.length; i++)
if (expandedItemIDs[i] == row)
expandedItemIDs.splice(i, 1);
}
function contains(a, obj) {
for (var i = 0; i < a.length; i++)
if (a[i] === obj) return true;
return false;
}