Hi,
I am using Hierarchical grid using load on demand. My grid contains few read only columns and few editable. Editable columns have a checkbox, dropdown and a free text box.
I am able to implement all the above editable controls. On save button click I want to show a message box to the user to confirm before proceeding. If a checkbox has been clicked in one of the rows in the grid I want to check if the dropdown or freetext has been entered or not in the same row. If the checkbox is clicked but none of the values have been entered in the drop down or the textbox I want to ask the user if he still want to continue ? I have written the following javascript to show the message:
$("#saveChanges1").on('igbuttonclick',
function (e) {
var trans = grid.igGrid("transactionsAsString");
if (trans === '[]') {
vex.dialog.alert({
className: 'vex-theme-os',
unsafeMessage: "<b>There are no changes to save.</b>"
});
} else {
vex.dialog.confirm({
message: "A comment is expected – are you sure you want to save without entering a comment?",
buttons: [
$.extend({}, vex.dialog.buttons.YES, { text: 'Confirm' }),
$.extend({}, vex.dialog.buttons.NO, { text: 'Cancel' })
],
callback: function (data) {
if (data) {
//submit form
grid.igGrid("saveChanges", function (data2) {
if (data2.Success === true) {
unsafeMessage: "<b>Changes have been saved successfully</b>"
grid.igGrid("dataBind");
}
}, function () {
unsafeMessage: "<b style='color:red'>There was an error in saving the changes. Please contact the system administrator! </b>"
The above code works using grid.igGrid("transactionsAsString"); and it tells me if something has changed, but I am not sure how to access a particular row and its cells to check which cell have been changed and what is the value in it?
Can someone please help me with this and tell me how to access the grid cells values in javascript on save button click?
Regards
Singh
Hello Singh,
Thank you for the update. The style likely isn’t applying correctly because of the CSS specificity. For you CSS class if you do something like the following it will work for most of the cells:
.ui-iggrid tbody > tr > td.highlight {border: 1px solid red;}
However since the first and last cells in a row share an edge with the grid there is an extra style preventing the shared edge from appearing red. It get around this you can use “!important”.
.highlight {border: 1px solid red !important;}
Example of applying it to some cells:
$("#grid1").igGrid("cellById", 1, "ProductID").addClass("highlight");$("#grid1").igGrid("cellById", 2, "Name").addClass("highlight");$("#grid1").igGrid("cellById", 3, "ProductNumber").addClass("highlight");
Thanks Mike
I have tried that already before sending you the query but that doesn't seems to be working on iggrid cell
if (cellFreetextCommentText == " ") {
$(cellFreetextComment).addClass("Highlight");
I also tried just with borderColor
$(cellFreetextComment).css("borderColor", "Red");
The above 2 don't do anything at all.
Can you please send me any sample solution for the same?
Reagrds
Instead of adding the border color to each side individually and making multiple calls to change CSS I would recommend that you use jQuery’s addClass. And in the class you could setup the style changes you want to make.
https://api.jquery.com/addclass/
This would also allow you to set up the specificity of the CSS class to make sure it gets applied properly.
Thank you for the update. Please see the following forum thread as it goes over how you can get the transactions for the child grids:
https://ko.infragistics.com/community/forums/t/91412.aspx
Hi ,
I am able to find the child level changes now. Along with showing the message box in case of changes I also need to highlight the cell that is missing a value.
I am able to find out the changes but not able to find the class to highlight that particular cell. I am using the following code but it only shows the highlighted color at the left, bottom and right border of the cell when I hover and if I move my mouse away it only shows the bottom border color of the cell red which is odd.
var cellFreetextComment = childrenTransactions.igGrid("cellById", transactionIds[i], "FreetextComment");
var cellFreetextCommentText = $(cellFreetextComment).text();
$(cellFreetextComment).css("borderLeftColor", "Red");
$(cellFreetextComment).css("borderRightColor", "Red");
$(cellFreetextComment).css("borderBottomColor", "Red");
$(cellFreetextComment).css("borderTopColor", "Red");
Is there any css class of the cell which only shows the 4 borders of the cell to be red?