This is a migrated thread and some comments may be shown as answers.

Drop down List In Template Column

1 Answer 276 Views

Grid

This is a migrated thread and some comments may be shown as answers.

License asked on 16 Feb 2012, 04:35 PM

I need to have a status dropdown in each row of my RadGrid. This is something I want displayed and functional at all times, not just in edit mode. What I've done so far is use a template column with a dropdownlist inside, hard-coding the 3 status options. On the radgrid_ItemDataBound I grab the data row and set the selected value of the dropdown based on the data from the server. Now I need to fire and update when the dropdown is changed. I can point the dropdownlist to fire a Public Sub from the OnSelectedIndexChanged property but I need to it pass another value from the datarow. My first thought was to programmatically add in the status items w/ a unique id pulled from the database attached as the corresponding value but for some reason, it no longer fires the OnSelectedIndexChanged event.

Any ideas on how this can be achieved?

1 Answer, 1 is accepted

Accepted

answered on 20 Feb 2012, 09:44 PM

RadCombBoxInGrid.png

Robert:

The following JavaScript code will allow you to get the Order ID from the row in which the nested RadComboBox item selection is changed on the client side, if this helps.

Default.aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadComboBox_RadGrid._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

<style type="text/css">

.itemHighlight

{

color: #fff;

font-weight: bold;

background-color: #888;

}

.altItemHighlight

{

color: #ccc;

font-weight: bold;

background-color: #777;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function ClientSelectedIndexChanged(sender, args) {

// Gets a handle to the row containing the RadComboBox with selected item

var row = sender.get_element().parentNode.parentNode;

var item = args.get_item();

var grid = $find("<%=RadGrid1.ClientID %>");

var MasterTable = grid.get_masterTableView();

// Get the Order ID value from the 'ddlOrderID' column

var celltext = row.cells[1].innerHTML;

alert('The Status of Order ID: ' + celltext + ' = ' + item.get_text());

}

</script>

</telerik:RadCodeBlock>

<div>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ajaxsettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</ajaxsettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadGrid Width="97%" ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"

OnItemCreated="RadGrid1_ItemCreated">

<pagerstyle mode="NextPrevAndNumeric" />

<mastertableview autogeneratecolumns="false" width="100%">

<Columns>

<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="Order Status">

<ItemTemplate>

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="ClientSelectedIndexChanged" >

<Items>

<telerik:RadComboBoxItem Text="New" />

<telerik:RadComboBoxItem Text="In Process" />

<telerik:RadComboBoxItem Text="Completed" />

</Items>

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridDropDownColumn UniqueName="ddlOrderID" ListTextField="OrderID" ListValueField="OrderID"

ListDataMember="Orders" DataField="OrderID" HeaderText="Order ID" DropDownControlType="RadComboBox" />

<telerik:GridBoundColumn UniqueName="ShipName" DataField="ShipName" HeaderText="Ship name" />

<telerik:GridBoundColumn UniqueName="ShipAddress" DataField="ShipAddress" HeaderText="Ship address" />

<telerik:GridDropDownColumn UniqueName="ddlQuantity" ListTextField="Quantity" ListValueField="Quantity"

ListDataMember="Orders" DataField="Quantity" HeaderText="Quantities in stock"

DropDownControlType="RadComboBox" />

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" />

</Columns>

<EditFormSettings>

<EditColumn ButtonType="ImageButton" />

</EditFormSettings>

</mastertableview>

</telerik:RadGrid>

<br />

</div>

</form>

</body>

</html>

See attached screenshot.

Regards,