[Solved] ComboBox causing RadGrid Ajax to not respond

[Igor]

Hi,
Please note that I am using an older version of Telerik (v: 2009.02.0701.35). 

I am creating a simple RadGrid, each record in the grid has 2 values (city and name). For one of those values (city - type string) I want to use a combobox for editing where the user can also type in a custom value. This all works great. I then added AJAX using the AJAX controls and now when I go to edit mode and either click cancel or update the AJAX loading panel stays on the screen. The values have updated but you can only see that if you refresh the page (F5) or if I disable Ajax then everything works as expected. The culprit is the Combo box (if I remove it then everything works) but I am not sure why. What am I missing?

See my attached screen shot of what happens when clicking either Cancel or Update.

Here is my ASPX code (using .NET 4.0 and Visual Studio 2010).

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="radG" %>

  

<radG:RadGrid id="grdParkingLocations"  runat="server" Width="600px" enableajax="True" GridLines="None"

    PageSize="999" AllowMultiRowSelection="False" ShowStatusBar="true"

    AllowPaging="False" AllowSorting="False" AutoGenerateColumns="False"

    AllowAutomaticDeletes="False" AllowAutomaticInserts="False" AllowAutomaticUpdates="False"

    OnNeedDataSource="grdParkingLocations_NeedDataSource"

    OnItemDataBound="grdParkingLocations_OnItemDataBound"

    OnUpdateCommand="grdParkingLocations_UpdateCommand"

    OnInsertCommand="grdParkingLocations_InsertCommand"

    OnDeleteCommand="grdParkingLocations_DeleteCommand">

    <MasterTableView DataKeyNames="ParkingLocationId" AutoGenerateColumns="False" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage">

        <CommandItemSettings AddNewRecordText="New location"/>

        <Columns>

            <radG:GridEditCommandColumn ButtonType="ImageButton" HeaderText="Edit"/>

            <radG:GridButtonColumn ConfirmText="Delete this parking location?" HeaderText="Delete" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete"/>

            <radg:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name" ItemStyle-Width="300px"/>

            <radG:GridTemplateColumn UniqueName="City" DataField="City" HeaderText="City" ItemStyle-Width="300px">

                              <FooterTemplate>Template footer</FooterTemplate>

                              <FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />

                              <ItemTemplate>

                                   <%#DataBinder.Eval(Container.DataItem, "City")%>

                              </ItemTemplate>

                              <EditItemTemplate>

                                  <radG:RadComboBox runat="server" ID="radComboCity"

                                        AllowCustomText="True"

                                        Height="140px" Width="220px"

                                        DropDownWidth="420px"

                                        OnLoad="radComboCity_OnLoad"

                                        SelectedValue='<%#Bind("City") %>'/>

                              </EditItemTemplate>

                         </radG:GridTemplateColumn>

        </Columns>

    </MasterTableView>

</radG:RadGrid>

<radG:RadAjaxLoadingPanel ID="LoadingPanelParkingLocations" runat="server"/>

<radG:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="True">

    <AjaxSettings>

        <radG:AjaxSetting AjaxControlID="grdParkingLocations">

            <UpdatedControls>

                <radG:AjaxUpdatedControl ControlID="grdParkingLocations" LoadingPanelID="LoadingPanelParkingLocations"/>

            </UpdatedControls>

        </radG:AjaxSetting>

    </AjaxSettings>

</radG:RadAjaxManager>

The radComboCity_OnLoad method loads the list into the RadComboBox. If you want to see the code behind let me know and I will paste it but I am not doing anything important there.

Thanks in advance for any help you can provide (with the exception of updating my version because I don't make those decisions in the company).

-Igor

[Princy]

Hi ,

Please bind the RadComboBox in EditMode from the ItemDataBound event of the radgrid,Below is the code snippet i tried which works fine.

ASPX:

<radG:RadGrid ID="grdParkingLocations" runat="server" enableajax="True" GridLines="None"
    ShowStatusBar="true" AllowPaging="true" AutoGenerateColumns="False" OnItemDataBound="grdParkingLocations_ItemDataBound"
    OnInsertCommand="grdParkingLocations_InsertCommand" OnNeedDataSource="grdParkingLocations_NeedDataSource"
    OnUpdateCommand="grdParkingLocations_UpdateCommand">
    <MasterTableView DataKeyNames="OrderID" AutoGenerateColumns="False" CommandItemDisplay="Top"
        InsertItemPageIndexAction="ShowItemOnCurrentPage">
        <CommandItemSettings AddNewRecordText="New location" />
        <Columns>
            <radG:GridEditCommandColumn ButtonType="ImageButton" HeaderText="Edit" />
            <radG:GridButtonColumn ConfirmText="Delete this parking location?" HeaderText="Delete"
                ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton"
                CommandName="Delete" />
            <radG:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID"
                ItemStyle-Width="300px" />
            <radG:GridTemplateColumn UniqueName="ShipCity" DataField="ShipCity" HeaderText="ShipCity">
                <ItemTemplate>
                    <%#DataBinder.Eval(Container.DataItem, "ShipCity")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <radG:RadComboBox runat="server" ID="radComboCity" AllowCustomText="True" />
                </EditItemTemplate>
            </radG:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</radG:RadGrid>
<radG:RadAjaxLoadingPanel ID="LoadingPanelParkingLocations" runat="server" />
<radG:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="True">
    <AjaxSettings>
        <radG:AjaxSetting AjaxControlID="grdParkingLocations">
            <UpdatedControls>
                <radG:AjaxUpdatedControl ControlID="grdParkingLocations" LoadingPanelID="LoadingPanelParkingLocations" />
            </UpdatedControls>
        </radG:AjaxSetting>
    </AjaxSettings>
</radG:RadAjaxManager>

C#:

protected void grdParkingLocations_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem edit = (GridEditableItem)e.Item;
            RadComboBox combo = (RadComboBox)edit.FindControl("radComboCity");
            combo.DataSourceID = "SqlDataSource2";
            combo.DataTextField = "ShipCity";
            combo.DataValueField = "ShipCity";
            combo.SelectedValue = DataBinder.Eval(edit.DataItem, "ShipCity").ToString();
        }
    }
    protected void grdParkingLocations_UpdateCommand(object sender, GridCommandEventArgs e)
    {
       try
        {
            GridEditableItem edit = (GridEditableItem)e.Item;
            RadComboBox combo = (RadComboBox)edit.FindControl("radComboCity");
            string val=combo.SelectedValue;
           //Code to Update
        }
        catch (Exception ex)
        {
            //Exception message
        }
    }
    protected void grdParkingLocations_InsertCommand(object sender, GridCommandEventArgs e)
    {
        try
        {
            GridEditableItem edit = (GridEditableItem)e.Item;
          //Access the radcombobox value
            RadComboBox combo = (RadComboBox)edit.FindControl("radComboCity");
            string val = combo.SelectedValue;
           //Code to Insert
        }
        catch (Exception ex)
        {
            //Exception Message
        }
    }

Thanks,
Princy

[Igor]

Thank you for your reply Princy but it does not work. I am not sure if it is because I am using objects instead of a Sql data source?? Here is my code behind. I have 2 scenarios (commented for clarity in the code), both produce the same problem. Again, everything loads just fine and the list is complete and the correct item is selected from the list in both scenarios, only when I click the update or cancel button does the AJAX panel display indefinitely. With AJAX disabled both scenarios work as expected. I am starting to think it is a defect in my version that can only be resolved by upgrading?

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.UI;

 

using Telerik.Web.UI;

 

namespace MyNamespace

{

    public sealed class ParkingLocation

    {

        public int ParkingLocationId { get; internal set; }

        public string Name { get; set; }

        public string City { get; set; }

    }

 

    public interface IParkingAdministrator

    {

        /// <summary>

        /// Adds a new location.

        /// </summary>

        /// <param name="locationCity">The location city.</param>

        /// <param name="locationName">Name of the location.</param>

        /// <param name="credits">The credits that each user will receive for a parking claim.</param>

        void AddLocation(string locationCity, string locationName, int credits);

 

        /// <summary>

        /// Gets a location based on the location id.

        /// </summary>

        /// <param name="parkingLocationId">The parking location id.</param>

        ParkingLocation GetLocation(int parkingLocationId);

 

        /// <summary>

        /// Gets all of the locations.

        /// </summary>

        /// <param name="includeDeleted">if set to <c>true</c> then also deleted items will be returned.</param>

        IList<ParkingLocation> GetLocations(bool includeDeleted);

 

        /// <summary>

        /// If the parking location has no submitted claims the location will be deleted.

        /// If it does have claims a delete flag will be set to true so it will no longer appear.

        /// </summary>

        /// <param name="parkingLocationId"></param>

        void DeleteLocation(int parkingLocationId);

 

        /// <summary>

        /// Executes an update on the data source so that changes to a location are made.

        /// </summary>

        void UpdateLocation();

 

        /// <summary>

        /// Gets a list of all of the city names

        /// </summary>

        IList<string> Cities();

    }

    /// <summary>

    /// Control used to add/delete/edit parking locations for QPark

    /// </summary>

    public partial class ParkingLocations : UserControl

    {

        private IParkingAdministrator _myController;

        protected void grdParkingLocations_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

        {

            grdParkingLocations.DataSource = _myController.GetLocations(false);

        }

         

        protected void grdParkingLocations_OnItemDataBound(object sender, GridItemEventArgs e)

        {

            var item = e.Item as GridCommandItem;

            if (item != null)

            {

                //hide refresh icon and hide refresh linkbutton 

                item.FindControl("RebindGridButton").Visible = false;

                item.FindControl("RefreshButton").Visible = false;

            }

        }

 

        protected void grdParkingLocations_UpdateCommand(object source, GridCommandEventArgs e)

        {

            try

            {

                var gridItem = (GridEditFormItem)e.Item;

                var parkingLocationId = (int)gridItem.GetDataKeyValue("ParkingLocationId");

                var recordToUpdate = _myController.GetLocation(parkingLocationId);

                gridItem.UpdateValues(recordToUpdate);

                recordToUpdate.City = ((RadComboBox)(gridItem.FindControl("radComboCity"))).Text;

                _myController.UpdateLocation();

            }

            catch

            {

                e.Canceled = true;

            }

        }

 

        protected void grdParkingLocations_InsertCommand(object source, GridCommandEventArgs e)

        {

            try

            {

                var newLocation = new ParkingLocation();

                var item = (GridEditableItem)e.Item;

                item.UpdateValues(newLocation);

                newLocation.City = ((RadComboBox)(item.FindControl("radComboCity"))).Text;

                _myController.AddLocation(newLocation.City, newLocation.Name, newLocation.CreditsPerParkingTicket);

            }

            catch

            {

                e.Canceled = true;

            }

        }

 

        protected void grdParkingLocations_DeleteCommand(object source, GridCommandEventArgs e)

        {

            var gridItem = (GridDataItem)e.Item;

            var parkingLocationId = (int)gridItem.GetDataKeyValue("ParkingLocationId");

            _myController.DeleteLocation(parkingLocationId);

        }

 

// **************** Scenerio 1 without data binding on the combobox

        protected void radComboCity_OnLoad(object sender, EventArgs e)

        {

            var comboBox = (RadComboBox)sender;

            // Clear the default Item that has been re-created from ViewState at this point.

            comboBox.Items.Clear();

            comboBox.Items.AddRange(_myController.Cities().Select(x => new RadComboBoxItem(x, x)));

        }

 

        protected void grdParkingLocations_OnItemDataBound(object sender, GridItemEventArgs e)

        {

            var item = e.Item as GridCommandItem;

            if (item != null)

            {

                //hide refresh icon and hide refresh linkbutton 

                item.FindControl("RebindGridButton").Visible = false;

                item.FindControl("RefreshButton").Visible = false;

            }

        }

 

 

// ******************* Scenerio 2 with data binding on the combobox

/*        protected void radComboCity_OnLoad(object sender, EventArgs e)

        {

            var comboBox = (RadComboBox)sender;

            // Clear the default Item that has been re-created from ViewState at this point.

            comboBox.Items.Clear();

            comboBox.Items.AddRange(QParkModule.ParkingAdministrator.Cities().Select(x => new RadComboBoxItem(x, x)));

        }*/

 

        protected void grdParkingLocations_OnItemDataBound(object sender, GridItemEventArgs e)

        {

            var item = e.Item as GridCommandItem;

            if (item != null)

            {

                //hide refresh icon and hide refresh linkbutton 

                item.FindControl("RebindGridButton").Visible = false;

                item.FindControl("RefreshButton").Visible = false;

            }

            if (e.Item is GridEditableItem && e.Item.IsInEditMode)

            {

                GridEditableItem edit = (GridEditableItem)e.Item;

                RadComboBox combo = (RadComboBox)edit.FindControl("radComboCity");

 

                // Clear the default Item that has been re-created from ViewState at this point.

                combo.Items.Clear();

                var source = QParkModule.ParkingAdministrator.Cities().Select(x => new {ShipCity = x}).ToList();

                combo.DataTextField = "ShipCity";

                combo.DataValueField = "ShipCity";

                combo.DataSource = source;

                combo.DataBind();

 

                combo.SelectedValue = DataBinder.Eval(edit.DataItem, "City").ToString();

            }

        }

 

    }

}

[Konstantin Dikov]

Hello Igor,

There were known issues with RadComboBox with earlier versions of our controls. The behavior you are experiencing is due to an JavaScript error caused by the RadComboBox which is  preventing the loading panel to hide and behave properly. The easiest way to fix the issue is to upgrade to newer version.

Another approach would be to add the following JavaScript after your ScriptManger:

function pageLoad() {
    if (Telerik.Web.UI.RadComboBox) {
        Telerik.Web.UI.RadComboBox.prototype._removeDropDown = function () {
            var slide = this.get_dropDownElement().parentNode;
            slide.parentNode.removeChild(slide);
            this._dropDownElement = null;
        };
    }
}

Hope that helps.

 

Regards,
Konstantin Dikov
Telerik