iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
I'd like to disable/enable certain columns in my WebGrid dynamically depending on what the user selected. For Example.
Let's say there are 3 columns. One has a dropdown that has in the list Phone and Circuit.
The other columns are for quantity and minutes. If the user selects Phone from the dropdown, I want to allow the user to enter values for quantity and minutes. If the user selects Circuit from the dropdown, quantity and minutes become disabled.
How can I do this in JavaScript on the client side. This needs to happen when the user first starts to edit a record and then when the user makes a selection from the dropdown.
Hi John,
Here is the snippet to catch that event. We can use OnAfterExitEditMode of client side event and make the validation in here. However, after we have lost focus on those two columns(in your case, it would be quantities and minutes), those two column will be editable again.
This is happened because we only set those validation on after the user make a selection of those drop down list. Here is the snippet:
function WebGrid1_OnAfterExitEditMode(controlId, tableName, editObject) { var grid = ISGetObject(controlId); var RowObject = grid.GetSelectedObject().ToRowObject(); if (editObject.cellElement.innerText == "USA") { RowObject.GetCells()[2].SetForceNoEdit(true); RowObject.GetCells()[3].SetForceNoEdit(true); } else { RowObject.GetCells()[2].SetForceNoEdit(false); RowObject.GetCells()[3].SetForceNoEdit(false); } }
Same as before, in this snippet, I made a validation if the dropdown list's value is equal to USA, it will force no edit on those two columns. I hope it helps. Thank you and have a nice day.
Best Regards,
Andi Santoso
After I read through your scenario, I believe we do not need to have the condition of when the user first starts to edit a record and when the users make a selection from dropdown list. We can simple use a client side of OnRowSelect and make a validation based on what is the value in the validation column.
If it meets the validation, it will automatically set the edit to false. Here is the snippet on how to do so. In here, I make a validation if the Customer ID is "HANAR", the other two columns are not able to be edited.
function WebGrid1_OnRowSelect(controlId, tblName, rowIndex, rowEl) { var grid = ISGetObject(controlId); if (grid.GetSelectedObject().ToRowObject().GetCells().GetNamedItem("CustomerID").Value == "HANAR") { grid.GetSelectedObject().ToRowObject().GetCells()[2].SetForceNoEdit(true); grid.GetSelectedObject().ToRowObject().GetCells()[3].SetForceNoEdit(true); } }
However, please let me know if it does not meet your scenario. Thank you and have a nice day.
Ok, this seems to work. Now I have another question.
What event is tied to when the user make a change to a cell (let's say they selected an option in a drop down list)? I also have to see that if they selected a specific option in the dropdown to not allow editing for certain columns....
I enclosed one simple sample of WebGrid based on your scenario.
The grid binds to ‘Products’ table of Northwind database using ISDataSource control. There are four columns inside the grid, “ProductID”, “CategoryID”, “ProductName”, and “SupplierID”. “CategoryID” column uses value list so that the ‘CategoryName’ will be showed instead of the id.
Within the page, WebCombo is added. Combo binds to ‘Categories’ table of Northwind database using ISDataSource control and used as “CategoryID” column (of WebGrid) edit type.
When user selects “Category” where the “CategoryID” value is odd (CategoryID = 1; or CategoryID = 3; and so on), then “ProductName” column will be disabled. When user selects “Category” where the “CategoryID” value is even (CategoryID = 2; or CategoryID = 4; and so on), then “SupplierID” column will be disabled.
For more detail information, please check the attached sample.
Sorry Yudi,
I am not using a WebCombo. I'm using a dropdown list object. ( EditType="DropdownList")
How can I do this with a dropdown?
This does it. Thank you very much....
Glad to know it has solved your problem. Please do not hesitate to ask if you have any other questions. Thank you and have a nice day.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname