Hi,
I am using IgniteUi & Asp.net MVC.
I have an igGrid which has checkbox column. I want to allow the user to check only one checkbox in all the rows at any given time.
If the user checks one checkbox, the already checked checkbox should be unchecked. Basically I want the functionality like that of radio button which allows only one item to be checked at any given time. Is there a way to do that through IgniteUi's helper methods or do I have to do it manually through jQuery? Also the checkboxes in iggrid are rendered in span tags instead of input tags which is also going to be a problem for me if I do it manually.
Hello Imran,
Configuring a bool column in igGrid to function similarly to a radio button column may be achieved by manually subscribing a click handler to the grid's checkbox elements (which are rendered as spans). For instance:
$("#grid").on("click", ".ui-state-default", function () { var rowId = $($(this).parents("tr")).attr("data-id"); var rows = $("#grid").igGrid("allRows"); $.each(rows,function (index, value) { var iteratedRowId = $(this).attr("data-id"); if (iteratedRowId != rowId) { if ($("#grid").igGrid("getCellValue", iteratedRowId, "BoolCol") == true) { $("#grid").igGridUpdating("setCellValue", iteratedRowId, "BoolCol", false); } } }); })
$("#grid").on("click", ".ui-state-default", function () {
var rowId = $($(this).parents("tr")).attr("data-id");
var rows = $("#grid").igGrid("allRows");
$.each(rows,function (index, value) {
var iteratedRowId = $(this).attr("data-id");
if (iteratedRowId != rowId) {
if ($("#grid").igGrid("getCellValue", iteratedRowId, "BoolCol") == true) {
$("#grid").igGridUpdating("setCellValue", iteratedRowId, "BoolCol", false);
}
});
})
Hope this helps. Attached is also my test sample for your reference.
Works perfectly. Thanks alot.
Hi Petar,
Thanks for your concern.
I changed your code snippet a bit to update the whole row instead of just the cell value because of some back end constraints. I need to return the whole row instead of just the changed column therefore I am using "updateRow" instead of "setCellValue".
Heres the changed version:
if ($("#JournalDetailViewGrid").igGrid("getCellValue", iteratedRowId, "acc_jrnl_default") == true) {
//manually getting all the columns of the iterated grid one by one var txt_ac_name = $("#JournalDetailViewGrid").igGrid("getCellValue", iteratedRowId, "ac_name"); var txt_jrnl_cd = $("#JournalDetailViewGrid").igGrid("getCellValue", iteratedRowId, "jrnl_cd"); $("#JournalDetailViewGrid").igGridUpdating("updateRow", iteratedRowId, { ac_cd: iteratedRowId, ac_name: txt_ac_name,
jrnl_cd: txt_jrnl_cd, acc_jrnl_default: false });
//$("#JournalDetailViewGrid").igGridUpdating("setCellValue", iteratedRowId, "acc_jrnl_default", false); }
How can I get the iterated row in a row object so that I dont have to write it manually each column one by one. I am using 2013.2 version and rowById is not avaialable to me and also findRecordByKey(iteratedRowId) method of 2013.2 API return null. How can I get the whole iterated row as an object?
I appreciate your help. Thanks for your time.
Hi Imran,
Thank you for your reply.
The row element in the context of the $.each call can be accessed viathis(which returns the respective tr element). At this point the whole row can be updated only via the updateRow method and that would require setting the key value pairs in the object that is passed to the row.
Hope this helps. Please let me know if you need more information.
Oh ok. So i wont get a row object but a tr element. Any idea why I get null in findRecordByKey(rowId) ?
Thanks again.
FindRecordByKey requires that the grid has a primaryKey configured. If that is not the issue in your case I would need a working sample to investigate this further. Please feel free to contact me with any updates.
Feel free to contact me if you have any further questions regarding this matter.