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");
}
});
}
}
Related
How can I change the color of my text in a specific row of my dataGrid?
I can use this code for changing the bg-color but why is the color not changing?
dojo.connect(mygrid, 'onStyleRow', this, function (row) {
var item = mygrid.getItem(row.index);
if (row.index === 14) {
row.customClasses = "highlightRow";
row.customStyles += 'background-color:#E20074;';
row.customStyles += 'color:#ffffff;';
}
});
You can use onStyleRow function: https://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#grid-styling-rows
Function should be connected before DataGrid started - in declaration.
I've been searching a lot for ways to make my gridview header fixed I came across this JQuery code:
$(document).ready(function () {
// Code to copy the gridview header with style
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
//Code to remove all the rows but the first row which is header row
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
// Here Set Width of each th from gridview to new table th
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
// Append Header to the div controlHead
$("#controlHead").append(gridHeader); // <-- HERE is WHEN IT DAMAGES OTHER JS FUNCTIONALITY
// Set its position to be fixed
$('#controlHead').css('position', 'fixed');
// Put it on top
$('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
It actually works but it makes my other JS functions to malfunction when I append this cloned header to the empty div "gridHeader"
Like this JS Function that is in charge of highlighting the selected row, it just doesn't find the Gridview anymore
// Method that will highlight row
function gridviewManipulation() {
// Get Gridview
var gridView = document.getElementById("<%= GridView1.ClientID %>");
// Loop through the Gridview
for (var i = 1; i < gridView.rows.length; i++) {
// Get the radio button of each row in the gridview and see if its checked
if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == true)
{
// Place the color for selection
gridView.rows[i].style.background = '#9bc27e';
}
else if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == false && i % 2 == 0)
{
// If its even then place white color back
gridView.rows[i].style.background = '#FFFFFF';
}
else
{
// If its odd place the bluish back on
gridView.rows[i].style.background = '#E3EAEB';
}
}
}
Any suggestions?
Thank you!!
I believe the problem is that you are using the ID of the element to identify it.
When you run this line:
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
You create a 2nd table element with the same ID. Subsequent calls to that ID are not working as you expect.
I'd try the following to change the id of the cloned table you create:
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true).attr('id', 'newID');
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 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;
}
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.