How to retain grid select row value in radcombo on postback

[prashanth_t]

Hello, I'm using the ASP.NET AJAX controls version 2009.2.826.35.
1) I want to have a radcombo filled with a radgrid (with ID, Title columns). On making a selection from the radgrid the Title shold be selected in the radcombo.
2) Also I'll need to set the visibility of certain panels to true/false, populate another dropdownlist, etc.... based on the selection made.

Using the examples provided I was able to achive what is mentioned under (1)
However the selected value is showed in the radcombo only when there is no postback. If I do a postback (for example if autopostback is set to true for radcombo, or else EnablePostBackOnRowClick="true") the selected Title value is not showed in the radcombo.

How can I retain the selection on postback and how can I hadle the serverside events followed after the selection is made from the grid.

Find below the source. Please note the radgrid is loaded with data from simple datasource. There is no searching involved (like I've seen on one of the examples). Users are not allowed to type in radcombo hence AllowCustomText = "false"

Any solutions?

<telerik:RadCodeBlock ID="rcb1" runat="server">
            <script type="text/javascript">

                function RowSelected(sender, args) {
                    var selectedText = args.getDataKeyValue("Title");
                    var selectedValue = args.getDataKeyValue("ID");

                    var combo = $find('<%= trcJobList.ClientID %>');

                    if (selectedValue.length > 0) {
                        combo.trackChanges();
                        combo.set_text(selectedText);
                        combo.get_items().getItem(0).set_text = selectedText;
                        combo.get_items().getItem(0).set_value(selectedValue);
                        combo.commitChanges();
                        combo.hideDropDown();
                    }
                }

               </script>
</telerik:RadCodeBlock>

<telerik:RadComboBox ID="trcJobList" Width="210px" runat="server" MarkFirstMatch="false" AllowCustomText="false" Skin="Telerik" ExpandAnimation-Type="None" CollapseAnimation-Type="None">
                                    <ItemTemplate>
                                        <telerik:RadGrid OnItemCommand="trgJobList_ItemCommand" id="trgJobList" Width="200px" runat="server" Skin="Telerik" OnNeedDataSource="trgJobList_NeedDataSource">
                                            <MasterTableView NoMasterRecordsText="" AutoGenerateColumns="false" DataKeyNames="ID, Title" Width="190px" ClientDataKeyNames="ID, Title" TableLayout="Fixed">
                                                <Columns>
                                                    <telerik:GridBoundColumn
                                                       HeaderText="ID"
                                                       DataField="ID"
                                                       UniqueName="ID">
                                                       <HeaderStyle Width="30px" />
                                                     </telerik:GridBoundColumn>
                                                     <telerik:GridBoundColumn
                                                       HeaderText="Title"
                                                       DataField="Title"
                                                       UniqueName="Title">
                                                       <HeaderStyle Width="100px" />
                                                     </telerik:GridBoundColumn>
                                                </Columns>
                                            </MasterTableView>
                                            <ClientSettings EnablePostBackOnRowClick="true">
                                            <Selecting AllowRowSelect="true" />
                                            <ClientEvents OnRowSelected="RowSelected"/>
                                            <Scrolling
                                             AllowScroll="true"
                                             UseStaticHeaders="true"
                                             ScrollHeight="150px" />
                                            </ClientSettings>
                                        </telerik:RadGrid>
                                    </ItemTemplate>
                                    <Items>
                                        <telerik:RadComboBoxItem runat="server" Text=" "></telerik:RadComboBoxItem>
                                    </Items>
</telerik:RadComboBox>

[Simon]

Hello prashanth_t,

This happens because the AllowCustomText property is set to false - RadComboBox resets its Text on postback if no matching Item is found.

You can avoid this by setting the AllowCustomText property to true and handling the client-side Load event in this way:

function onLoad(sender) {
    sender.get_inputDomElement().readOnly = "readonly";
}

As a result the Text will persist across postbacks and the user will be unable to type in the RCB at the same time.

Kind regards,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[prashanth_t]

Hello Simon,
Thanks for your reply. I tried with your suggestion. But still the value is not retained on postback.

Setting OnClientLoad="onLoad" does keep the RCB in read only mode. However I noticed that as soon as AllowCustomText="true" is set, the selected item is not being shown (this is true in both cases whether EnablePostBackOnRowClick is set to true/false)

Thank you.
Regards,
prashanth

[Simon]

Hello prashanth_t,

This is strange. What happens if set the EnablePostBackOnRowClick to false and select a row in the Grid? Does the selected Row text appear in the input?

Kind regards,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[prashanth_t]

Hi Simon,
Thats correct whether EnablePostbackOnRowClick is set to "true" or "false"; as long as AllowCustomText is set to "true" the value is not being selected in the RCB.

Thanks.
Regards,
Prashanth

[prashanth_t]

Hi Simon,
Find below source for my sample project

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>Untitled Page</title>
    <telerik:RadCodeBlock ID="rcb1" runat="server">
    <script type="text/javascript">

        function RowSelected(sender, args) {
            var selectedText = args.getDataKeyValue("Title");
            var selectedValue = args.getDataKeyValue("ID");

            var combo = $find('<%= trcJobList.ClientID %>');

            if (selectedValue.length > 0) {
                combo.trackChanges();
                combo.set_text(selectedText);
                combo.get_items().getItem(0).set_text = selectedText;
                combo.get_items().getItem(0).set_value(selectedValue);
                combo.commitChanges();
                combo.hideDropDown();
            }
        }

        function onLoad(sender) {
            sender.get_inputDomElement().readOnly = "readonly";
        }

       </script>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadComboBox OnClientLoad="onLoad" ID="trcJobList" Width="210px" runat="server" MarkFirstMatch="false" AllowCustomText="true" Skin="Telerik" ExpandAnimation-Type="None" CollapseAnimation-Type="None">
            <ItemTemplate>
                <telerik:RadGrid OnItemCommand="trgJobList_ItemCommand" id="trgJobList" Width="200px" runat="server" Skin="Telerik" OnNeedDataSource="trgJobList_NeedDataSource">
                    <MasterTableView NoMasterRecordsText="" AutoGenerateColumns="false" DataKeyNames="ID, Title" Width="190px" ClientDataKeyNames="ID, Title" TableLayout="Fixed">
                        <Columns>
                            <telerik:GridBoundColumn
                               HeaderText="ID"
                               DataField="ID"
                               UniqueName="ID">
                               <HeaderStyle Width="30px" />
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn
                               HeaderText="Title"
                               DataField="Title"
                               UniqueName="Title">
                               <HeaderStyle Width="100px" />
                             </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings EnablePostBackOnRowClick="true">
                    <Selecting AllowRowSelect="true" />
                    <ClientEvents OnRowSelected="RowSelected"/>
                    <Scrolling
                     AllowScroll="true"
                     UseStaticHeaders="true"
                     ScrollHeight="100px" />
                    </ClientSettings>
                </telerik:RadGrid>
            </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem runat="server" Text=" "></telerik:RadComboBoxItem>
            </Items>
        </telerik:RadComboBox>
    </div>
    <br />
    <asp:Panel id="pnlProf" runat="server" Visible="false">
    <asp:Label ID="lblName" runat="server" Text="Name :"></asp:Label>
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    </asp:Panel>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Telerik.Web.UI;
using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void trgJobList_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataSet ds = new DataSet();
        ds.ReadXml(MapPath("names.xml"));

        RadGrid grid = sender as RadGrid;
        grid.DataSource = ds.Tables[0];
    }

    protected void trgJobList_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == "RowClick" && e.Item is GridDataItem)
        {
            e.Item.Selected = true;
            GridDataItem gdi = e.Item as GridDataItem;

            if (gdi["Title"].Text == "Prof.")
            {
                pnlProf.Visible = true;
            }
            else
            {
                pnlProf.Visible = false;
            }
        }
    }
}

names.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<names>
    <name>
        <ID>1</ID>
        <Title>Mr.</Title>
    </name>
    <name>
        <ID>2</ID>
        <Title>Mrs.</Title>
    </name>
    <name>
        <ID>3</ID>
        <Title>Dr.</Title>
    </name>
    <name>
        <ID>4</ID>
        <Title>Prof.</Title>
    </name>
</names>

web.config

<?xml version="1.0"?>
<!--
    Note: As an alternative to hand editing this file you can use the
    web admin tool to configure settings for your application. Use
    the Website->Asp.Net Configuration option in Visual Studio.
    A full list of settings and comments can be found in
    machine.config.comments usually located in
    \Windows\Microsoft.Net\Framework\v2.x\Config
-->
<configuration>
    <configSections>
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere"/>
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                    <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                </sectionGroup>
            </sectionGroup>
        </sectionGroup>
    </configSections>
    <appSettings/>
    <connectionStrings/>
    <system.web>
        <!--
            Set compilation debug="true" to insert debugging
            symbols into the compiled page. Because this
            affects performance, set this value to true only
            during development.
        -->
        <compilation debug="true">
            <assemblies>
                <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
            </assemblies>
        </compilation>
        <!--
            The <authentication> section enables configuration
            of the security authentication mode used by
            ASP.NET to identify an incoming user.
        -->
        <authentication mode="Windows"/>
        <!--
            The <customErrors> section enables configuration
            of what to do if/when an unhandled error occurs
            during the execution of a request. Specifically,
            it enables developers to configure html error pages
            to be displayed in place of a error stack trace.

        <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
            <error statusCode="403" redirect="NoAccess.htm" />
            <error statusCode="404" redirect="FileNotFound.htm" />
        </customErrors>
        -->
        <pages>
            <controls>
                <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            </controls>
        </pages>
        <httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
        </httpHandlers>
        <httpModules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </httpModules>
    </system.web>
    <system.codedom>
        <compilers>
            <compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
                <providerOption name="CompilerVersion" value="v3.5"/>
                <providerOption name="WarnAsError" value="false"/>
            </compiler>
            <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" type="Microsoft.VisualBasic.VBCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
                <providerOption name="CompilerVersion" value="v3.5"/>
                <providerOption name="OptionInfer" value="true"/>
                <providerOption name="WarnAsError" value="false"/>
            </compiler>
        </compilers>
    </system.codedom>
    <!--
        The system.webServer section is required for running ASP.NET AJAX under Internet
        Information Services 7.0.  It is not necessary for previous version of IIS.
    -->
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <modules>
            <remove name="ScriptModule"/>
            <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </modules>
        <handlers>
            <remove name="WebServiceHandlerFactory-Integrated"/>
            <remove name="ScriptHandlerFactory"/>
            <remove name="ScriptHandlerFactoryAppServices"/>
            <remove name="ScriptResource"/>
            <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </handlers>
    </system.webServer>
    <runtime>
        <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
            <dependentAssembly>
                <assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/>
                <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>
            </dependentAssembly>
            <dependentAssembly>
                <assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/>
                <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>
            </dependentAssembly>
        </assemblyBinding>
    </runtime>
</configuration>

Please add version 2009.2.826.35 of Telerik.Web.UI.dll in the bin.
From the sample provided if you select ".Prof" it will make a panel visible. However the title value won't be shown in the radcombo.
Appreciate if you could send a fix using the same sample project.

Thank you.

Regards,
Prashanth

[Kunal Bagga]

Hello,
I am having the same problem. Any solutions?

Thanks

[Simon]

Hello prashanth_t and Kunal Bagga,

After running the page prashanth_t helped me build I observed the erroneous behavior. There was something suspicious I noticed before in the pasted code, still was unsure of its relation to the issue:

function RowSelected(sender, args) {
    var selectedText = args.getDataKeyValue("Title");
    var selectedValue = args.getDataKeyValue("ID");

    var combo = $find('<%= trcJobList.ClientID %>');

    if (selectedValue.length > 0) {
        combo.trackChanges();
        combo.set_text(selectedText);
        combo.get_items().getItem(0).set_text = selectedText;
        combo.get_items().getItem(0).set_value(selectedValue);
        combo.commitChanges();
        combo.hideDropDown();
    }
}

You need to change that line to:

combo.get_items().getItem(0).set_text(selectedText);

as the set_text member of a RadComboBoxItem object is method with one parameter - the value that will be set as the Text property of the Item. The previous code did not work and after the postback the Text of the selected Item (which always remains equal to " ") remains.

I hope this helps.

All the best,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[prashanth_t]

Thanks. That did work.

Have couple of related questions.
1) Once the value is selected if I want to get the value of the selection at server side on button click how can I get it.
(I can get the title using the "Text" property of the RCB. Both SelectedItem, SelectedValue properties are empty. How to get the "ID". Right now I'm using a hidden variable)

2) If I put the RCB and panel under an asp:updatepanel I get this runtime exception when a selection is made from the RCB.
(Error: Sys.InvalidOperationException: Two components with the same id 'trcJobList_i0_trgJobList' can't be added to the application.)

Is there a fix?

Thanks.
Regards,
Prashanth

[Simon]

Hi prashanth_t,

You can get the selected value on the server from the Item of the RadComboBox, i.e.

trcJobList.Items[0].Value;

The issue you describe in the second point I was unable to reproduce on my side. Please see the attached page. Am I missing something?

All the best,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[prashanth_t]

Hello,
Thanks for the tip on reading the value.
As for the runtime error, I tried with the attached files; still it is the same.
Exception is thown on selecting a value from the RCB.
In IE exception is shown, in FireFox it is not shown (however in both cases I am not able to select a value for the second time from RCB). Tested on IE 7, IE8, FF 3.6.2

Find attached image.

Thanks.
Regards,
Prashanth

[Simon]

Hello prashanth_t,

I am still unable to reproduce this error.

Please see my test project (attached to this message) and let me know what I am missing.

Best wishes,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[prashanth_t]

Hello Simon,
The test project you sent works fine. After comparing the source with mine I didn't notice any difference at all.
However a setting in the web.config is actually causing this. Go ahead and change the following from "false" to "true".

<compilation debug="false">

Now you should be able to reproduce the error. On development debug is set to "true"; until we deploy it in the production this is not going to be set to "false". Though we can live with this setting (debug = "false"), is this really a bug in the control or the update panel?

Thanks.
Regards,
Prashanth