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: KB05206

HOWTO:Placing complex controls into the RowEditTemplate


The information in this article applies to:
UltraWebGrid (v3.0.20041)
  Article Created: 
3/30/2004

Last Updated:
4/15/2004

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 Infragistics WebGrid control provides several methods for updating and adding data, one of which is the Row Template. The Row Template allows the developer to create a more logical arrangement of input controls to ease data entry for the end user by adding a textbox for each column in a row to the template, and automatically transferring information from the row to the template. However, there are times when a simple textbox does not provide the UI the developer is looking for, and he\she may desire to use more complex tools, such as DropDownLists, WebDateChoosers, WebCombos, etc. The WebGrid does not provide the automatic wire up from the grid's rows to these controls, so the developer will need to bridge the gap. This article describes the steps necessary, and provides a sample in C# and VB that uses a DropDownList and WebDateChooser in the Row Template.

Additional Information

The first step is to add the controls you wish to use to the Row Template. Right click on the WebGrid and select 'Edit Template' -> 'Band x edit row template', where 'x' is the number of the band whose template you are creating. After doing this, you will be asked if you want to enable editing for the grid so the template can be used, and if you would like to create a textbox for each column in the grid. Choose yes for the first question; the second is up to you. If you want textboxes for some columns, then choose yes, if you plan on adding controls for columns you want to appear in template, choose no. You should now see the Row Edit Template, which should (at the very least) display an 'OK' and 'Cancel' button.
You could start to add controls directly to the template, but you may want to add a Grid Layout Panel first(located in the 'HTML' tools tab in your VS.NET Toolbox), which will allow you to position your controls exactly where you would like them. Add the Grid Layout Panel outside of the Template at first, then add the controls you want associated with you columns. After adding all the needed controls to the Grid Layout Panel, move the Panel into the Row Edit Template. Right click on the Template and select 'End Template Editing'.

Now that you've added controls, you need to wire up those controls so that data from the grid can populate those controls, and vice versa. In order to do this, you need to add event handlers for the 'BeforeRowTemplateOpen' and 'AfterRowTemplateClose' events. Below is the javascript used in the samples:

Javascript

function UltraWebGrid1_AfterRowTemplateCloseHandler(gridName, rowId){
//Check to see which button in the Row Template fired this event
    if(event.srcElement.id == "igtbl_reOkBtn") {
    //First get a reference to the row that opened the Row Edit Template
    var row = igtbl_getRowById(rowId);

//Because the WebDateChooser and DropDownList have been reparented to the WebGrid
//their ID's have changed to reflect the new hierarchy. To determine the new client
//side ID, run the application, right click on the page and choose 'View Source'.
//Hit 'Ctrl+F' and search for the original ID you gave the control (e.g DropDownList1)
    var combo = igdrp_getComboById("UltraWebGrid1xxctl0xWebDateChooser1");
    var dd = document.getElementById("UltraWebGrid1__ctl0_DropDownList1");
            
//With references to the controls in the template, and the row itself, retrieve
//the values from the controls and set the appropriate cell's values.
    row.getCell(0).setValue(combo.getValue());
    row.getCell(1).setValue(dd.value);
    }
}
    
function UltraWebGrid1_BeforeRowTemplateOpenHandler(gridName, rowId, templateId){
//First get a reference to the row that opened the Row Edit Template
    var row = igtbl_getRowById(rowId);


//Because the WebDateChooser and DropDownList have been reparented to the WebGrid
//their ID's have changed to reflect the new hierarchy. To determine the new client
//side ID, run the application, right click on the page and choose 'View Source'.
//Hit 'Ctrl+F' and search for the original ID you gave the control (e.g DropDownList1)
    var combo = igdrp_getComboById("UltraWebGrid1xxctl0xWebDateChooser1");
    var dd = document.getElementById("UltraWebGrid1__ctl0_DropDownList1");


//With references to the controls in the template, and the row itself, retrieve
//the values from the cells and set the appropriate control's values
    combo.setValue(row.getCell(0).getValue());
    dd.value = row.getCell(1).getValue();
}

Samples

webgridcomplexrowtemplate.zip
 Complex controls in a row edit template



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

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