Intersoft Community - WebGrid Enterprise - Dynamically Enabling/Disabled Columns

Dynamically Enabling/Disabled Columns

andi@intersoftpt.com — Mon, 14 Jun 2010 14:31:50 GMT

Hi John,

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.

Best Regards,

Andi Santoso

Dynamically Enabling/Disabled Columns

JohnnyBravo — Mon, 14 Jun 2010 13:11:45 GMT

This does it. Thank you very much....

Dynamically Enabling/Disabled Columns

andi@intersoftpt.com — Fri, 11 Jun 2010 16:37:33 GMT

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

Dynamically Enabling/Disabled Columns

JohnnyBravo — Fri, 11 Jun 2010 13:41:22 GMT

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?

Dynamically Enabling/Disabled Columns

yudi — Fri, 11 Jun 2010 04:17:19 GMT

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.

Dynamically Enabling/Disabled Columns

JohnnyBravo — Thu, 10 Jun 2010 14:43:45 GMT

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....

Dynamically Enabling/Disabled Columns

andi@intersoftpt.com — Thu, 10 Jun 2010 13:49:04 GMT

Hi John,

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.

Best Regards,

Andi Santoso

Dynamically Enabling/Disabled Columns

JohnnyBravo — Wed, 09 Jun 2010 18:03:27 GMT

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.