How can I make a column as DropDownList using DropDownProvider in RowEditingTemplate? The sample shows the DropDownList in edit mode within the cell https://es.infragistics.com/samples/aspnet/data-grid/dropdown-editors
Hello Ram,Thank you for posting your inquiry to the Infragistics ASP.Net forums. To embed a WebDropDown in the WebDataGrid RowEditTemplate, add the WebDropDown control to the RowEditTemplate for the Column where you want the DropDownList to display. Set the DisplayMode to "DropDownList", the TextField to the Name of the Column to display in the WebDropDown, the ValueField to the Column Key which the WebDropDown is bound to, and EnableDropDownAsChild to "true". The Z-Index for the DropDown needs to be set to a higher value or the DropDownList will not display properly. To do this, you can set the Z-Index in the Client-Side Initialize event to a new Z-Index value.
In the Behaviors of the EditingCore, under ColumnSettings, set the ColumnKey to the Column where the WebDropDown was added.
In the RowEditTemplate under the ClientBindings, the RowEditingClientBinding for the Column with the WebDropDown needs to use the $find command to locate the WebDropDown control so its current value may be retrieved and to also set its new value.
The following Markup Code is based on three of the columns from the sample in our Samples Browser which you had referenced in your post. This code will demonstrate how to embed a WebDropDown in a WebDataGrid RowEditTemplate:
<ig:WebDataGrid ID="dg" runat="server" Height="500px" width="800px" DataSourceID="Orders" DataKeyFields="OrderID" AutoGenerateColumns="False" OnRowUpdating="dg_RowUpdating"> <Columns> <ig:BoundDataField DataFieldName="OrderID" Key="OrderID"> <Header Text="Order ID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="ContactName" Key="CustomerID"> <Header Text="Contact Name" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="ShippingCompany" Key="ShipperID"> <Header Text="Shipper" /> </ig:BoundDataField> </Columns> <Behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing Enabled="true" > <ColumnSettings> <ig:EditingColumnSetting ColumnKey="ShipperID" /> </ColumnSettings> </ig:CellEditing> <ig:RowDeleting Enabled="true" /> <ig:RowEditingTemplate CancelButton="buttonCancel" OKButton="buttonOK"> <ClientBindings> <ig:RowEditingClientBinding ColumnKey="OrderID" ControlID="control_OrderID" GetValueJavaScript="$get({ClientID}).value" SetValueJavaScript="$get({ClientID}).value={value}" /> <ig:RowEditingClientBinding ColumnKey="CustomerID" ControlID="control_ContactName" GetValueJavaScript="$get({ClientID}).value" SetValueJavaScript="$get({ClientID}).value={value}" /> <ig:RowEditingClientBinding ColumnKey="ShipperID" ControlID="control_Shipper" GetValueJavaScript="$find({ClientID}).get_currentValue()" SetValueJavaScript="$find({ClientID}).set_currentValue({value},true)" /> </ClientBindings> <Template> <div style="background-color:white;border:1px solid black; height:auto; width:auto"> OrderID: <asp:TextBox ID="control_OrderID" runat="server"/> <br /> ContactName: <asp:TextBox ID="control_ContactName" runat="server"/> <br /> Shipper: <ig:WebDropDown ID="control_Shipper" DisplayMode="DropDownList"DataSourceID="Shippers" TextField="CompanyName" ValueField="ShipperID" runat="server" Width="200px" EnableDropDownAsChild="true" ClientEvents-Initialize="setZIndex"DropDownItemBinding-TextField="CompanyName" DropDownItemBinding-ValueField="ShipperID"> </ig:WebDropDown> <br /> <asp:Button ID="buttonOK" runat="server" OnClientClick="return" Text="OK" UseSubmitBehavior="False" /> <asp:Button ID="buttonCancel" runat="server" CausesValidation="False" OnClientClick="return" Text="Cancel" UseSubmitBehavior="False" /> </div> </Template> </ig:RowEditingTemplate> <ig:RowAdding Enabled="False"> <EditModeActions EnableOnActive="True" EnableOnKeyPress="True" MouseClick="Single" /> </ig:RowAdding> </Behaviors> </ig:EditingCore> <ig:Activation /> <ig:RowSelectors /> <ig:Selection RowSelectType="Single" /> </Behaviors></ig:WebDataGrid>
The following code snippet is an example on how to set the zIndex for the DropDownList of the WebDropDown:
function setZIndex(sender, args) { sender.behavior.set_zIndex(100000);}
Please let me know if this information is helpful or if you have any questions or need further assistance.
Thank you.
Sincerely,Mike D.Developer Support EngineerInfragisticswww.infragistics.com/support
Thanks Mike, I got your sample to work.
I see the edit window flickering on hovering over the WebDropDown control and the down arrow is not shown. I am using Infragistics 2010 Vol.2. Is there any solution or fix for it?
What would be the client bindings - GetValueJavaScript and SetValueJavaScript for a regular ASP.Net DropDownList control, if I have to use instead of Infragistics WebDropDown control?
How can we populate the ASP.Net DropDownList or Infragistics WebDropDown within the <RowEditingTemplate> from code-behind and by not using SqlDataSource design control?
I would appreciate your response!
Hello Ram,
The following code demonstrates how to retrieve the embedded WebDropDown by its ID in the WebDataGrid RowEditTemplate using the FindControl method in the server-side WebDataGrid DataBound event:
protected void dg_DataBound(object sender, EventArgs e){ var ram = dg.Behaviors.EditingCore.Behaviors.RowEditTemplate.TemplateContainer.FindControl("WebDropDown ID");}Please let me know if this helps.Sincerely,Mike D.Developer Support EngineerInfragisticswww.infragistics.com/support
Thanks Mike for providing the code to find a WebDropDown control from code-behind.
What would be the client bindings - GetValueJavaScript and SetValueJavaScript for a regular ASP.Net DropDownList control when used in a <RowEditingTemplate>?
Hello Ram,For the ASP.Net DropDownList control, you would need to pass in the javascript using the getValue() and setValue().
Hi Mike,
getValue() and setValue() methods are not available on the ASP.Net DropDownList control. I get an error saying "Microsoft JScript runtime error: Object doesn't support this property or method". Please advise.
Thanks
Hello Ram,A simpler way would be to call a function from the DropDownList in the RowEditTemplate after the user selects a new value. The following code demonstrates how to use a DropDownList to call a function in the WebDataGrid RowEditTemplate in place of the WebDropDown:Replace the RowEditingClientBinding for the WebDropDown with the code for the DropDownList as shown here:<ig:RowEditingClientBinding ColumnKey="ShipperID" ControlID="control_Shipper" GetValueJavaScript="getSelectedText({ClientID})" />Add this function to the page: function getSelectedText(clientID) { var dropDown = document.getElementById(clientID); var selectedText = dropDown.item(dropDown.selectedIndex).text; return selectedText; }The above code will return the newly selected value in the DropDownList to the WebDropDown.Please let me know if this information is helpful.Thank you.Sincerely,Mike D.Developer Support EngineerInfragisticswww.infragistics.com/support
Thanks for GetValueJavaScript for an ASP:DropDownList. How do you SetValueJavaScript for ASP:DropDownList?