In my ig grid there are 3 check boxes in each row and user can check any one check box from them but only one check box should be checked at a time in a row . i.e., Need to uncheck previous check boxes except the current clicked one.
please try to provide me solution for implementing the above criteria.
Hello Shahin,
This can easily be achieved by a custom editor provider. Basically the idea is to create a input type='radio' editor provider with the same 'name' attribute for the columns which need to be mutually exclusive. However this solution can work only in editMode = "row", because in this mode all the editors are visible at the same time.
Attached you can find a sample which implements custom editor provider named "EditorProviderRadio" . Also because editor providers are visible only in edit mode I've added a formatter function for each of the boolean columns in order to show a radio buttons instead of a checkbox, but this is just a matter of preference.
For the custom editor provider I chose to use radio buttons instead of checkboxes, because they have the mutual exclusive functionality out of the box, while the checkboxes will need much more additional custom code.
Best regards,Martin PavlovInfragistics, Inc.
Hello Martin,
i tired with your sample code but i got one more issue please check following scenario in attached file
1)click on 3rd row then click on 2nd row .when we click on 2nd row previous state of radio button not loading in fist column (radio button is checked but not showing edit mode)
2)when we adding new row it is going to bottom of grid .is there any way to show new records at top of grid with out refreshing page or reloading
Best regards,
Gopi
Hello Shahinkohan,
Please let me know if you have any questions.
shahinkohan said:1)click on 3rd row then click on 2nd row .when we click on 2nd row previous state of radio button not loading in fist column (radio button is checked but not showing edit mode)
You can use the following code in order to fix the issue:
function radioFormatter(val) {
return "<input type='radio' "+ (val === true ? "checked='checked'" : '') +" style='width:100%; margin: 0px;' readonly='readonly' onclick='this.checked = false;'/>";
}
shahinkohan said:2)when we adding new row it is going to bottom of grid .is there any way to show new records at top of grid with out refreshing page or reloading
This is by design. Unfortunately you should reload the data and sort by some criteria it in order to get the newly added rows on the top. Of course you can manually manipulate the DOM and move the last row on the top of the grid, but you should take into account the zebra styles of the rows.
Hope this helps,Martin PavlovInfragistics, Inc.
Hello shahinkohan,
Thank you for the update and sample.
We may have to handle the input.click event and change the input attribute depending on the current state of the input as follows:
input.click(function (ui, evt)
{
var checked = input.attr("checked");
if (input.is(":checked")) {
input.attr("checked", false);
else {
input.attr("checked", true);
updating._notifyChanged();
});
If you have any questions, please let me know as well.
Looking forward to hearing from you.
please provide some solution on above issues ,it is very urgent for me .
Thanks
Gopi.T