Hi,
I have to make iggrid particular column to be readonly based on the radio button value
radio button on change function()
if(radio button value="no")
{
$("#selector).attr("disabled", "true");
}
selector->columnkey
i have tried like above.But it didnt work.
Hello George,
Thank you for posting in our forum.
The igGridUpdating feature has a boolean option called “readOnly”, which could be set on a per-column basis and it allows the user to declare whether a given column would be editable or not. This option has to be set in the “columnSettings” array when initializing the grid and toggling it at runtime is currently not supported out-of-the-box. This is why if you open the API documentation, you would notice we do not provide a setter, but only a getter.
As a possible workaround (if it suits your scenario) I would suggest that you try the following: create a new columnSettings array in the onchange event handler. These new column settings would contain the columnKey of the column that should be read only, as well as the option itself. When the two radio buttons get clicked, they would toggle it and pass it to the Updating feature as new columnSettings.
Please note this would make the grid dataBind() again and re-render itself, which might not suit your scenario if the grid’s loading time is too slow (for example if the remote data takes some time to load) or the user has to toggle the radio buttons too many times. Also this is a custom solution and we cannot guarantee it would work in every possible situation.
Here is a code sample if you want to see the aforementioned approach in code:
<!DOCTYPE html> <html> <head> <title>Sample</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.loader.js"></script> </head> <body> <div style="margin: auto; width:1000px; text-align: center"> <table id="grid"></table> <p> Category column is currently :</p> <div> <input type="radio" id="editable" name="setMode" value="editable" onchange="radioHandler(this)" checked> <label for="editable">Editable</label> </div> <div> <input type="radio" id="readonly" name="setMode" value="readonly" onchange="radioHandler(this)"> <label for="editable">Readonly</label> </div> </div> <script> let readOnlyColumnSettings = [{ columnKey: "CategoryName", readOnly: false}] function radioHandler(elem) { if (elem.value === "readonly"){ readOnlyColumnSettings[0].readOnly = true } $("#grid").igGridUpdating("option", "columnSettings", readOnlyColumnSettings) } $.ig.loader({ scriptPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/", cssPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/", resources: "igGrid.*", ready: function () { let ds = [ { "ProductID": 1, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 6 }, { "ProductID": 2, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 }, { "ProductID": 3, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 }, { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 }, { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 }, { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 }, { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 }, { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 }, { "ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 10, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 11, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 }, { "ProductID": 12, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 }, { "ProductID": 13, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 }, { "ProductID": 14, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 }, { "ProductID": 15, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 }, { "ProductID": 16, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 }, { "ProductID": 17, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 17 }, { "ProductID": 18, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 }, { "ProductID": 19, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }, { "ProductID": 20, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 } ] $("#grid").igGrid({ dataSource: ds, responseDataKey: "results", primaryKey: "ProductID", width: "1000px", height: '560px', autoCommit: true, columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "33%"}, { headerText: "Category", key: "CategoryName", dataType: "string", width: "33%"}, { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "34%" } ], features: [ { name: "Updating", editMode: "row" } ] }) } }) </script> </body> </html>
If you need any additional assistance, feel free to contact me.