RadComboBox inside RadGrid EditForm template

[Zinoviy Margovskiy]

Hi telerik,

I am experiencing strange behavior from  RadComboBox located inside Radgrid's edit form template.
My dropdown is populated with the list of countries.  I defined autopostback="true" and OnSelectedIndexChanged server side event for this dropdown.  
Also, I defined client side onChange event for the same dropdown throught code behind. My client side (javascript) function looks for another dropdown
inside the same edit form template and selects its value based on some logic:  

    function ddlShipToCountry_OnChange(ddlShipToLocationsClientID) {
            setLocationToOTHER(ddlShipToLocationsClientID);
        }

    function setLocationToOTHER(ddlShipToLocationsClientID) {
            var ddlShipToLocations = $find(ddlShipToLocationsClientID);
            if (ddlShipToLocations) {
                var item = ddlShipToLocations.findItemByValue("OTAD|");
                if (item) { item.select(); }
            }
        }

The issue manifests itself, whenever user presses a letter while dropdown list of values is expanded,
the expected behavior is that focus shifts to the first value that starts with such a letter,
however my dropdown instead, does a postback (I guess because client side function has item.select() statement,
and hence resets itself, which I think is not expected behavior.  I expected postback to happen when the value is actually selected from the dropdown,
and I thought that client side function should fire when the selected value actually was changed not when user presses a letter to get to the values that
start with this letter.

Can you please help me and provide any ideas what could be changed in order to make this control work as I expect.
Bellow is the code snapshots:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AddlSpecLIShipping.ascx.cs"
    Inherits="AddlSpecLIShipping" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy42" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="chkShippFullQty">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="chkShippFullQty"/>
                <telerik:AjaxUpdatedControl ControlID="pnlLIShippingDetails"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" EnableEmbeddedSkins="false"
    Skin="AsiSkin" DecoratedControls="CheckBoxes" />

<telerik:RadScriptBlock ID="rdScriptLIShipping" runat="server">
    <script language="javascript" type="text/javascript">
         function ddlShipToCountry_OnChange(ddlShipToLocationsClientID) {
            setLocationToOTHER(ddlShipToLocationsClientID);
        }

         function setLocationToOTHER(ddlShipToLocationsClientID) {
            var ddlShipToLocations = $find(ddlShipToLocationsClientID);
            if (ddlShipToLocations) {
                var item = ddlShipToLocations.findItemByValue("OTAD|");
                if (item) { item.select(); }
            }
        }
     </script>
</telerik:RadScriptBlock>

 <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Width="100%" AllowAutomaticUpdates="false"
    AllowAutomaticInserts="false" AllowAutomaticDeletes="false" AutoGenerateColumns="False"
    AllowPaging="true" AllowMultiRowEdit="false" Skin="AsiSkin" CssClass="AsiGreenCommandBar"
    EnableEmbeddedSkins="False" ShowFooter="true" OnPreRender="RadGrid1_PreRender"
    PageSize="6"
    OnNeedDataSource="RadGrid1_OnNeedDataSource" OnItemDataBound="RadGrid1_ItemDataBound"
    OnInsertCommand="RadGrid1_OnInsertCommand" OnDeleteCommand="RadGrid1_OnDeleteCommand"
    OnUpdateCommand="RadGrid1_OnUpdateCommand">
    <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />

    <MasterTableView Width="100%" ShowHeadersWhenNoRecords="true" CommandItemDisplay="bottom"
                EditMode="EditForms" InsertItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage"
                DataKeyNames="DestinationID">

                <Columns>
                 .........
                 ........
                 </Columns>
                  <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                     .........
                     .........
                    <telerik:RadComboBox ID="ddlShipToCountry" runat="server" Skin="AsiSkin" CssClass="AsiRounded"
                                        EnableEmbeddedSkins="false" AutoPostBack="true" DataTextField="CountryDisplayName"
                                        DataValueField="Country_CD" OnSelectedIndexChanged="ddlShipToCountry_SelectedIndexChanged"
                                        Width="220px" Height="100px">
                    </telerik:RadComboBox>
                    </FormTemplate>
                </EditFormSettings>
            <CommandItemSettings AddNewRecordText="Add Another Destination" />
    </MasterTableView>
 </telerik:RadGrid>

And CS code:

    private void SetGridChildControlsClientEvents(GridEditableItem item)
    {
         ..........
         ..........
         RadComboBox cntrlShipToLocations = base.GetControlFromRadGridEditFormTemplate(item, "ddlShipToLocations") as RadComboBox;
         RadComboBox cntrlShipToCountry =  base.GetControlFromRadGridEditFormTemplate(item, "ddlShipToCountry") as RadComboBox;

         cntrlShipToCountry.Attributes.Add("OnChange", "return ddlShipToCountry_OnChange('" + cntrlShipToLocations.ClientID + "');");
}

[Yavor]

Hi Zinoviy,

I reviewed your setup, and the code looks correct. However, in order to further track the problem,
it will be best if you open a formal support ticket, and send us a small working project, demonstrating the setup, and the unwanted behavior. We will debug it locally, and get back to you with additional information.

Greetings,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Balakrishna Reddy]

Hi All,
    The following is my Code:

<MasterTableView CommandItemDisplay="Top"  DataKeyNames="ExtraWorkID">
                <Columns>
                    -------------------
                    ------------------------------
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                                ProductType :
                                <telerik:RadComboBox ID="ProductType" runat="server" AutoPostBack="true" DataTextField="ProductType" DataValueField="ProductType">
                                </telerik:RadComboBox>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>

and my source file contains:

RadComboBox rcbProductType = editItem.FindControl("ProductType") as RadComboBox;
string strProductType = rcbProductType .SelectedItem.Text;

When i am trying to get the selected item i am getting the Error Message Saying that "Object reference not set to an instance of an object.".
So Please help me..

Thanks in Advance..

[Princy]

Hi,

Try binding the RadCombobox inside the FormTemplate using a Datasource or DataSourseID as shown below.

ASPX:

<telerik:RadComboBox ID="ProductType" DataSourceID="SqlDataSource1" runat="server"
    AutoPostBack="true" DataTextField="OrderID" DataValueField="OrderID">
</telerik:RadComboBox>

OR

C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

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

        {

            GridEditFormItem d = (GridEditFormItem)e.Item;

            RadComboBox rcbProductType = d.FindControl("ProductType") as RadComboBox;

            rcbProductType.DataSource = dt1;

            rcbProductType.DataTextField = "OrderID";

            rcbProductType.DataValueField = "OrderID";

            rcbProductType.DataBind();


        }

}

Thanks,
Princy.