Add new rows to WebCombo in clientside javascript

Knowledge Base Article: KB07700

HOWTO:Add new rows to WebCombo in client-side javascript

The information in this article applies to:
UltraWebGrid (v5.2.20052),
WebCombo (v5.2.20052)

Article Created: 
7/12/2005

Last Updated:
12/19/2007

Article Type: 
How To

Page Options

Average Rating:
6 out of 10

---

Rate this page

Print this page

E-mail this page

Add to Favorites

Summary

The WebCombo does not intriniscally support adding rows through client side JavaScript. With some creative, yet simple, coding tricks we can acheive this functionality.

Additional Information

The WebCombo contains many objects that are derived from the same code base as the WebGrid. If we can work our way to these objects, we can set their properties in the same ways that we can on a regular WebGrid.

Step-By-Step Example

Below are the steps necessary to allow adding and updating to the webcombo:

1. Server side get a hold of the WebGrid that is contained in the WebCombo (WebCombo.Controls[0])

C#

Infragistics.WebUI.UltraWebGrid.UltraWebGrid comboGrid = (Infragistics.WebUI.UltraWebGrid.UltraWebGrid) this.WebCombo1.Controls[0];

VB.NET

Dim comboGrid As Infragistics.WebUI.UltraWebGrid.UltraWebGrid = DirectCast(Me.WebCombo1.Controls(0), Infragistics.WebUI.UltraWebGrid.UltraWebGrid)

2. Then allow add new and updates to the WebGrid

C#

if(comboGrid != null)
{
    comboGrid.DisplayLayout.AllowAddNewDefault = Infragistics.WebUI.UltraWebGrid.AllowAddNew.Yes;
    comboGrid.DisplayLayout.AllowUpdateDefault = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes;
}

VB.NET

If Not comboGrid Is Nothing Then
    comboGrid.DisplayLayout.AllowAddNewDefault = Infragistics.WebUI.UltraWebGrid.AllowAddNew.Yes
    comboGrid.DisplayLayout.AllowUpdateDefault = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes
End If

3. Write javascript to call the igtbl_addNew method to add a new row to the grid inside of the combo:

JavaScript:

function AddNewRow()
{
    var cbo = igcmbo_getComboById('WebCombo1');
    var row = igtbl_addNew(cbo.grid.Id, 0);
    row.getCell(0).setValue(11);
    row.getCell(1).setValue("Name11");
    row.getCell(2).setValue(new Date());
}

Summary

Now that we have this functionality at our fingertips, we are able to allow new rows to be added to the WebCombo through some simple client side JavaScript code. Please make sure you download and review the samples attached to this article.

Samples

webcombo_addnewclientside_2005v2_cs.zip
 Sample project that adds a new row client side to the webcombo (C#)

webcombo_addnewclientside_2005v2_vb.zip
 Sample project that adds a new row client side to the webcombo (VB.NET)