Combobox selection issue

2 posts, 0 answers
  1. Prasad
    Prasad avatar
    27 posts
    Member since:
    Oct 2009

    Posted 14 Nov 2011 Link to this post

    I've used Radcombobox in microsoft gridview as template field and succeeded binding with images to the combobox. My problem is,
    I have 2 rows in the grid and trying to select combox values (images) in 2 rows but when I select second row combobox value then first row combobox value is not displaying.

    Below code I'm using suggested by you in one of the forum topic

     

     

     

    <%@ Page Title="Specimen Tracking System - External Lab Details" Language="C#" MasterPageFile="~/ExternalLab.master" AutoEventWireup="true" CodeFile="ExternalLabDetails.aspx.cs" Inherits="ExternalLabDetails" %>
      
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
      
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
      
    <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
      
    <script language="javascript" type="text/javascript">
      
    changeBackground('BatchDetails');
      
    function showalert(message) {
      
    alert(message);
      
    return;
      
    }
      
    function clearFields() {
      
       
      
      
    }
      
    function clearfields(message) {
      
    if (message) {
      
    // clearFields();
      
    alert(message);
      
    return;
      
    }
      
    }
      
    function validations() {
      
    if (document.getElementById('ctl00_ContentPlaceHolder1_ddlBatchNumber').value == "Select Batch Number") {
      
    alert("Select Batch Number");
      
    document.getElementById('ctl00_ContentPlaceHolder1_ddlBatchNumber').focus();
      
    return false;
      
    }
      
    if (document.getElementById('ctl00_ContentPlaceHolder1_DateReceived').value == '') {
      
    alert("Select Received Date");
      
    return false;
      
    }
      
    }
      
    </script>
      
    <script language="javascript" type="text/javascript">
      
    function showImageOnSelectedItemChanging(sender, eventArgs) {
      
    var input = sender.get_inputDomElement()
      
    input.style.background =
      
    "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
      
    input.style.paddingLeft = "22px";
      
    }
      
       
      
       
      
    function showSelectedImage(sender) {
      
    var input = sender.get_inputDomElement();
      
    var item = sender.get_selectedItem();
      
    // input.style.background =
      
    // "url(" + item.get_imageUrl() + ") no-repeat";
      
    // input.style.paddingLeft = "22px";
      
    }
      
      
    </script>
      
    <table width="760" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      
    <tr>
      
    <td height="5"></td>
      
    </tr>
      
    <tr>
      
    <td align="left" style="border: solid 1px #9ce3ff; padding-left:5px;">
      
    <!-- Add Table Start Here -->
      
    <table width="750" border="0" cellspacing="0" cellpadding="0">
      
    <tr>
      
    <td height="5"></td>
      
    </tr>
      
    <tr>
      
    <td align="left"><h3><img src="images/External_lab-title.gif" alt="Form FT" height="29" border="0" /></h3></td>
      
    </tr>
      
    <tr>
      
    <td align="left">
      
    <table width="745" border="0" cellspacing="0" cellpadding="0">
      
    <tr>
      
    <td colspan="2" align="left"> </td>
      
    <td colspan="2" height="30" align="right" class="smallText">( <span class="mandatory">*</span> = Required )</td></tr>
      
    <tr>
      
    <td width="113" height="28" class="heading">Batch Number:</td>
      
    <td width="350" height="28" align="left">
      
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      
    <ContentTemplate>
      
    <asp:DropDownList ID="ddlBatchNumber" CssClass="dropdown" Width="150px" 
      
    runat="server" AutoPostBack="True" 
      
      
    onselectedindexchanged="ddlBatchNumber_SelectedIndexChanged">
      
    </asp:DropDownList><span class="mandatory">*</span>
      
    </ContentTemplate>
      
    </asp:UpdatePanel>
      
    </td>
      
    <td width="90" class="heading">Courier Name:</td>
      
    <td width="192" align="left">
      
    <asp:UpdatePanel ID="UpdatePanel3" runat="server">
      
    <ContentTemplate>
      
    <asp:TextBox ID="txtCourierName" runat="server" 
      
    Width="176px" Enabled="False"></asp:TextBox>
      
    </ContentTemplate>
      
    </asp:UpdatePanel></td>
      
    </tr> 
      
      
    <tr>
      
    <td height="28" class="heading">Tracking Number:</td>
      
    <td align="left">
      
    <asp:UpdatePanel ID="UpdatePanel4" runat="server">
      
    <ContentTemplate>
      
    <asp:TextBox ID="txtTrackNumber" runat="server" Enabled="false"
      
    Width="146px"></asp:TextBox>
      
    </ContentTemplate>
      
    </asp:UpdatePanel>
      
    </td>
      
    <td height="28" class="heading">Date Shipped:</td>
      
    <td height="28" align="left">
      
    <asp:UpdatePanel ID="UpdatePanel5" runat="server">
      
    <ContentTemplate>
      
    <telerik:RadDateTimePicker ID="DateShipped" 
      
    Runat="server" Enabled="False">
      
    <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" 
      
    ViewSelectorText="x">
      
    </Calendar>
      
    <TimeView CellSpacing="-1">
      
    </TimeView>
      
    <TimePopupButton HoverImageUrl="" ImageUrl="" />
      
    <DatePopupButton HoverImageUrl="" ImageUrl="" />
      
    <DateInput DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy">
      
    </DateInput>
      
    </telerik:RadDateTimePicker>
      
    </ContentTemplate>
      
    </asp:UpdatePanel>
      
      
    </td>
      
    </tr> 
      
      
    <tr>
      
    <td height="28" class="heading">Received Date:</td>
      
    <td align="left">
      
    <asp:UpdatePanel ID="UpdatePanel7" runat="server">
      
    <ContentTemplate>
      
    <telerik:RadDateTimePicker ID="DateReceived" 
      
    Runat="server">
      
    </telerik:RadDateTimePicker><span class="mandatory">*</span>
      
    </ContentTemplate>
      
    </asp:UpdatePanel></td>
      
    <td height="28" class="heading" colspan="2"></td>
      
    </tr> 
      
    <tr><td colspan="4" height="20"></td></tr> 
      
    <tr>
      
    <td colspan="4" align="left" valign="top">
      
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
      
    <ContentTemplate>
      
    <asp:GridView ID="gvSpecimens" runat="server" AutoGenerateColumns="False" 
      
    AllowPaging="True" 
      
    PageSize="14" 
      
    CellPadding="4" ForeColor="#333333" Width="747px" 
      
    onpageindexchanging="gvSpecimens_PageIndexChanging1" 
      
    >
      
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
      
    <RowStyle BackColor="#FFFFF4" Height="25px" />
      
    <Columns>
      
    <asp:BoundField HeaderText="Specimen Number" DataField="Specimen Number">
      
    <HeaderStyle CssClass="GridHeading" Width="80px" />
      
    <ItemStyle CssClass="GridText" Width="150px" />
      
    </asp:BoundField>
      
      
      
      
    <asp:TemplateField HeaderText="Lab Accession Number" >
      
    <ItemTemplate>
      
    <asp:TextBox ID="txtAccessionNumber" runat="server" CssClass="inputBox" Width="95px"
      
    Enabled="False" ReadOnly="True"></asp:TextBox>
      
    </ItemTemplate>
      
    <HeaderStyle CssClass="GridHeading" Width="80px"></HeaderStyle>
      
    </asp:TemplateField>
      
      
    <asp:BoundField HeaderText="Specimen Condition assigned by NSABP DMG" DataField="Specimen Condition">
      
    <HeaderStyle CssClass="GridHeading" Width="100px" />
      
    <ItemStyle CssClass="GridText" />
      
    </asp:BoundField>
      
      
    <asp:TemplateField HeaderText="Specimen Condition">
      
    <ItemTemplate>
      
    <asp:DropDownList ID="ddlSpecimenCondition" runat="server" CssClass="dropdown1" 
      
    Width="203px" Height="30px">
      
    </asp:DropDownList>
      
    </ItemTemplate>
      
    <HeaderStyle CssClass="GridHeading" Width="110px"></HeaderStyle>
      
    </asp:TemplateField>
      
    <asp:BoundField HeaderText="LabNumber" DataField="LabNumber">
      
    <HeaderStyle CssClass="hideGridColumn" Width="10px" />
      
    <ItemStyle CssClass="hideGridColumn" />
      
    </asp:BoundField>
      
    <asp:TemplateField HeaderText="Temperature" HeaderStyle-CssClass="GridHeading">
      
    <ItemTemplate>
      
    <asp:Label runat="server" ID="lblTemperature" CssClass="GridText" Text='<%# Bind("NSABPTemperature") %>'></asp:Label>
      
    </ItemTemplate>
      
    </asp:TemplateField>
      
    <asp:TemplateField HeaderText="Temperature Received">
      
    <ItemTemplate>
      
    <telerik:RadComboBox ID="ddlTemperature" Runat="server" Width="120px" 
      
    OnClientLoad="showSelectedImage"
      
    OnClientSelectedIndexChanging="showImageOnSelectedItemChanging">
      
    </telerik:RadComboBox>
      
    </ItemTemplate>
      
    <HeaderStyle CssClass="GridHeading" Width="80px"></HeaderStyle>
      
    </asp:TemplateField>
      
    <asp:TemplateField HeaderText="Multi Core" ItemStyle-HorizontalAlign=Center>
      
    <ItemTemplate>
      
    <asp:CheckBox ID="chkMultiCore" runat="server" AutoPostBack="true" OnCheckedChanged ="chkMultiCore_CheckedChanged">
      
    </asp:CheckBox>
      
    </ItemTemplate>
      
    <HeaderStyle CssClass="GridHeading"></HeaderStyle>
      
    </asp:TemplateField>
      
    <asp:BoundField HeaderText="CoreNumber" DataField="CoreNumber">
      
    <HeaderStyle CssClass="hideGridColumn" Width="10px" />
      
    <ItemStyle CssClass="hideGridColumn" />
      
    </asp:BoundField>
      
    <asp:TemplateField HeaderText="No.of Cores" ItemStyle-HorizontalAlign=Center >
      
    <ItemTemplate >
      
    <asp:DropDownList ID="ddlCoreNumbers" runat="server" Width="38px" AutoPostBack=true OnSelectedIndexChanged="ddlCoreNumbers_SelectedIndexChanged">
      
    <asp:ListItem Value="1">1</asp:ListItem>
      
    <asp:ListItem Value="2">2</asp:ListItem>
      
      
    </asp:DropDownList>
      
    </ItemTemplate>
      
    <HeaderStyle CssClass="GridHeading"></HeaderStyle>
      
    </asp:TemplateField>
      
    </Columns>
      
      
    <PagerStyle BackColor="#F7F4D2" ForeColor="#333333" HorizontalAlign="Center" 
      
    Font-Bold="true" Font-Size="12px" />
      
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
      
    <HeaderStyle BackColor="#F7F4D2" Font-Bold="True" ForeColor="White" />
      
    <EditRowStyle BorderStyle="None" BackColor="#2461BF" />
      
    <AlternatingRowStyle BackColor="White" />
      
    </asp:GridView>
      
    </ContentTemplate>
      
    </asp:UpdatePanel>
      
      
    </td>
      
    </tr>
      
    </table> </td>
      
    </tr>
      
    <tr>
      
    <td height="5" align="left"></td>
      
    </tr>
      
    <tr>
      
    <td align="center">
      
    <table width="160" border="0" cellspacing="3" cellpadding="0">
      
    <tr>
      
    <td align="center">
      
    <asp:UpdatePanel ID="UpdatePanel6" runat="server">
      
    <ContentTemplate>
      
    <asp:ImageButton ID="btnSave" ImageUrl="~/Images/save.gif" runat="server" 
      
    onclick="btnSave_Click" />
      
    </ContentTemplate>
      
    </asp:UpdatePanel>
      
    </td>
      
    <td align="center"><asp:ImageButton ID="btnCancel" ImageUrl="~/Images/cancel.gif" 
      
    runat="server" onclick="btnCancel_Click" /></td>
      
    </tr>
      
    </table> </td>
      
    </tr>
      
    </table>
      
    <!-- Add Table End Here --> 
      
    </td>
      
    </tr>
      
    </table>
      
    </asp:Content>

     

     

     

    Sever side code:
    I'm using below code bind images to gridview Radcombobox

     

     

     

    RadComboBox ddlTemperature = ((RadComboBox)gvSpecimens.Rows[i].FindControl("ddlTemperature"));

     

     

     

    DirectoryInfo imgDir = new DirectoryInfo(Server.MapPath("TemperatureIcons/"));

     

     

     

    RadComboBoxItem item1 = new RadComboBoxItem("Select", "0");

     

    ddlTemperature.Items.Add(item1);

     

     

    foreach (FileInfo file in imgDir.GetFiles("*.gif"))

     

    {

     

     

    RadComboBoxItem item = new RadComboBoxItem("", file.Name.Replace(".gif", ""));

     

    item.ImageUrl =

     

    "TemperatureIcons/" + file.Name;

     

    ddlTemperature.Items.Add(item);

    }

    Could you please tell me the reason what it could be and suggest me to move from my struckpoint. 

  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 17 Nov 2011 Link to this post

    Hi Prasad,

    I did not manage to determine what causes the described behavior from the code provided.
    However, I have prepared a sample web page, which demonstrates the behavior of a ComboBox placed in a GridView and populated with image items. The selection in every combo works as it should.
    You could download the attached files and test the page locally.

    If this is not helping, please open a support ticket and send us a runnable sample page reproducing the issue attached to it, so we will be able to troubleshoot this behavior locally.

    Greetings,
    Ivana
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top