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 contacting Infragistics!
You can get a specific cell or that cells value by calling on of the API methods:https://www.igniteui.com/help/api/2017.1/ui.iggrid_hg#methods:getCellValue
https://www.igniteui.com/help/api/2017.1/ui.iggrid_hg#methods:cellById
https://www.igniteui.com/help/api/2017.1/ui.iggrid_hg#methods:cellAt
Same for a row: https://www.igniteui.com/help/api/2017.1/ui.iggrid_hg#methods:rowById
https://www.igniteui.com/help/api/2017.1/ui.iggrid_hg#methods:rowAt
Also as long as your other field are bound any changes made to them would be in the transactions log so if changes are not there they were not made.
Hi Mike,
Thanks for your reply.
Before I try to access these cells I need to access the transactions that have changed. The cells which are changing are at the child level band i.e. at 2nd level and I am not able to access them using:
I have also tried
var trans = grid.igGrid("pendingTransactions");
I change anything in the grid nothing appears in them.
I have another page where the changes are at the parent level and the above lines of code gives me the changes but the pages which have editable columns in the child level don't get anything in these.
Can you please tell me the syntax of how can I access the pending transactions in the child grid?
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://www.infragistics.com/community/forums/t/91412.aspx
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.
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
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");