Main Menu
Knowledge Base
Product Registration
Log an Incident
Request a Feature
Search Incidents/Bug Reports

Search KB

Please note: In an effort to better serve you, we are in the process of restructuring DevCenter. In the process, we have moved many items that you may be used to finding in DevCenter over to the Main Site. If you are having trouble locating something, please try looking at the following places:

Knowledge Base Article: KB02906

HOWTO:How to change valuelists from one row to another

The information in this article applies to:
UltraWebGrid (v1.0.6007)
  Article Created: 

Last Updated:

Article Type
How To
Page Options
Average Rating:
5 out of 10

Rate this page
Print this page
E-mail this page
Add to Favorites


While supplying different valuelists on different rows is not an feature intrinsic to the grid, it is easy to simulate this functionality. We can change the makeup of a valuelist on the client-side programmatically. Suppose there is a grid with three columns. In the first and second column, we can choose teams, say baseball teams who are playing each other. In the third column, we will choose the team we think will win. Naturally, the valuelist in the third column should show only two entries, those teams shown in the first two columns.

Additional Information

The code for this project is in the samples directory under "DifferentValuelists".


In the form load event we have the following code:

            ' Add three columns
            UltraWebGrid1.Columns.Add("Team 1", "Team 1")
            UltraWebGrid1.Columns.Add("Team 2", "Team 2")
            UltraWebGrid1.Columns.Add("Winner", "Winner")

            ' Create a ValueList and add some teams
            Dim vlist As New ValueList(True)
            vlist.ValueListItems.Add("Red Sox")
            vlist.ValueListItems.Add("White Sox")

            ' Set the ValueList for each of the three columns
            UltraWebGrid1.Columns(0).ValueList = vlist
            UltraWebGrid1.Columns(1).ValueList = vlist
            UltraWebGrid1.Columns(2).ValueList = vlist

            ' The three columns must also be of type "DropDownList"
            UltraWebGrid1.Columns(0).Type = ColumnType.DropDownList
            UltraWebGrid1.Columns(1).Type = ColumnType.DropDownList
            UltraWebGrid1.Columns(2).Type = ColumnType.DropDownList

            ' Add 6 rows just to give you room to play around

            ' Make sure we can update the grid
            UltraWebGrid1.DisplayLayout.AllowUpdateDefault = AllowUpdate.Yes

With the comments, most of this is self explanatory, so we will move on.

In the .aspx page, click the HTML view button in the lower left corner of the Designer. Notice in the there is the following script block:

    function BeforeEnterEditMode(tableName, cellName)
        var col = igtbl_getColumnById(cellName);
        if (col.Key != "Winner")
        var row = igtbl_getRowById(cellName);
        var vlist = new Array(2);
        vlist[0] = new Array(row.getCell(0).getValue(), row.getCell(0).getValue());
        vlist[1] = new Array(row.getCell(1).getValue(), row.getCell(1).getValue());
        col.ValueList = vlist

This is where the work gets done. This may look strange if you have never worked with javascript or our client-side events before. Here is what's happening: We are handling the BeforeEnterEditMode event here. This event will get called after the user double clicks a cell in the grid to edit it, but before it actually goes into edit mode.

First we are getting the Column that the cell is in. If this cell is not in the "Winner" column, we don't want to do anything, so we return from this funcion. ("return" is equivalent to VB's "Exit Sub.") We then get the row of the current cell.

Since a valuelist is represented simply as an array of arrays, we can construct our valuelist as shown here. Once the valuelist has been constructed, we assign it to the column's valuelist.

The items in the valuelist are represented as an array because they have both a value and a display text. For the purpose of simplifying this sample, we have used the name of the baseball team as both the value and the display text.

The last step is to tell the grid that this javascript function exists, so that the function gets called at the appropriate time.

To do this, you need to switch back to the Design view, click on the grid, and navigate in the property sheet to DisplayLayout->ClientSideEvents->BeforeEnterEditModeHandler. Set this value to "BeforeEnterEditMode". Note that if we had called our function "MakeTheWinnerValueListOnlyShowTwoTeams", we would set the value of the BeforeEnterEditModeHandler to "MakeTheWinnerValueListOnlyShowTwoTeams". That is, you can call the function anything you want, as long as you tell the grid what that name is.

If you started this project from scratch, you may also want to set some colors on the grid so that you can see where the cells are. To do this quickly, right click on the grid and choose Auto-Format. Choose a format here, say "Contrast II", as I did.

Run the project. Double click in the first cell, choose a team. Double Click in the second cell, choose a team. Double click in the third cell and notice that the only two teams to choose from are the two in the first two columns. Continue to play around in the rest of the rows.

 Creating different valuelists for each row

How would you rate the quality of this content?
Poor -----------------------------------------> Outstanding

Tell us why you rated the content this way. (optional)