WebGrid V2.1: Embeddable Editor Controls

Summary: How to create an embeddable control and attach it to the WebGrid.

Background Different types of data shown by UltraWebGrid require different kinds of controls to edit that specific data. This tutorial explains how to make your own embeddable ASP.NET web control and how to attach it to the UltraWebGrid. Question • I have a control that perfectly edits the data that is represented in one of the columns of my grid. How can I make this control appear in the grid when the column is in edit mode? Solution The IProvidesEmbeddableEditor interface must be implemented by the control, and then the grid will recognize it as an external editor. Also client side object of the control (if it does not have one then it has to be created) must have a few additional functions which are called by the grid’s client side API. Sample Project and Code Discussion These code samples and project use WebDateChooser as a control to edit date information in the grid. Implementation of the IProvidesEmbeddableEditor interface on the server is very simple. It has only two properties that need to be implemented. EditorID – id of the control on the server, which is used by the grid to embed the editor; EditorClientID – id of the HTML element on the client that contains a reference to the client side object of this control. public class WebDateChooser : WebControl, IProvidesEmbeddableEditor, … { …  string IProvidesEmbeddableEditor.EditorID { get { return this.ID; } }  string IProvidesEmbeddableEditor.EditorClientID { get { return (this.dropdown!=null?this.dropdown.rp.Name:this.UniqueID); } } … } The client side requires an object that represents basic features of the control on the client. During initialization its reference has to be assigned to the Object attribute of the HTML element, which ID is returned by the IProvidesEmbeddableEditor .EditorClientID property on the server. The client side object of the control is required to have the following properties and methods: Property Type Description Element Object HTML object of the working element on the client endEditCell Function Initialized by the grid. Function reference that should be called from within control’s onblur event handler Method Return type Description getVisible() Boolean Returns current visibility state of the control on the client setVisible(bVisible,left,top,width,height) Show/hides the control and positions it on the client getValue() Control’s type Returns current value of the control setValue(Value) Puts new value in the control As shown in the description the endEditCell property is initialized by the grid as a reference to a function with no parameters and needs to be called by the control from within the onblur event handler to conform to the standard behavior of other controls that are able to edit the grid. Here is how it’s done in WebDateChooser: function igdrp_combo(comboElement,comboProps) { …  this.Element  = comboElement;  this.endEditCell  = null; …  this.getVisible = function(){return (this.Element.style.display != "none" &&      this.Element.style.visibility != "hidden");}  this.setVisible = function(bVisible,left,top,width,height)  {   this.Element.style.display=(bVisible?"":"none");   this.Element.style.visibility=(bVisible?"visible":"hidden");   if(this.Dropped&&!bVisible) this.setDropDownVisible(false);   if(top!=null&&bVisible==true){    this.Element.style.position="absolute";    this.Element.style.top=top-1;    this.Element.style.left=left;    this.Element.style.fontSize="0pt";    this.setHeight(height);    this.setWidth(width);   }  } …  this.setValue=function(date,fireEvent){   this.editor.setDate(date); …  }  this.getValue=function(){   return this.editor.getDate();  }  this.onBlur=function(oEditor,value,oEvent){ … if(oCombo.endEditCell!=null&&!(oCombo.isDropDownVisible())) oCombo.endEditCell();  } } After these preparations, your control should be ready to be embedded in the UltraWebGrid. All you need to do is hook it up to the grid: This sample project displays the Northwind Employees table and allows the user to update cells. To create this project, perform the following steps: 1. Start a new Web Forms project. 2. From Toolbox, Data drag an OleDbDataAdapter to the WebForm1.aspx designer and complete the Data Adapter Configuration Wizard as follows: • On Choose Your Data Connection: select a known data connection or click New Connection and complete the Data Link Properties dialog to create a connection to the Access database. Typically the NWind.mdb file will be at a path something like C:Program FilesInfragisticsUltraWebGridv2.1SamplesDataNWind.mdb • Choose a Query Type: Use SQL statements. • Generate the SQL Statements: Click Query Builder, Add Employees and click Close, click (All Columns) and click OK. • Click Finish. 3. From the main Menu select Data, Generate Dataset and click OK. 4. From the Toolbox, drag an UltraWebGrid to the WebForm1.aspx designer, position and size as desired. 5. In the Solution Explorer expand the References node. Look for a reference to Infragistics.WebUI.Shared. If the reference is not included, right-click the References node, select Add Reference, and add the reference from the .NET tab. 6. Click the Infragistics.WebUI.Shared reference and set the following properties: CopyLocal = True 7. Click on the WebGrid and set the following properties: DataSource = DataSet11 DataMember = Employees 8. Add the following code to the page's Load event to fill the dataset and bind it to the WebGrid: In Visual Basic: If Me.IsPostBack = False Then    Me.OleDbDataAdapter1.Fill(DataSet11)    Me.UltraWebGrid1.DataBind() End If 9. From the Toolbox, drag a WebDateChooser to the WebForm1.aspx designer, position and size as desired. 10. Set the DropDownStyle.BackColor property to some color so it would not be transparent. 11. Right click the WebGrid and choose Edit Columns. 12. For the BirthDate columns set the following properties: AllowUpdate = Yes EditorControlID = WebDateChooser1 Format = MM/dd/yyyy Type = Custom 13. Run the project. Double click on any cell in the BirthDate column. WebDateChooser appears over the cell and the date can be picked naturally. Review This project shows how to create an external editor for use in the UltraWebGrid.

Article provided by: