Ajaxifying Template Columns

[Tiago]

Hello,

I have two GridTemplate columns in a Radgrid and they have two DropDownLists controls in each column. I need to update the 2nd grid column depending on the selected value from the first. I have the following code from my project:

<telerik:GridTemplateColumn UniqueName="State" HeaderText="State" SortExpression="State" HeaderStyle-Width="140px">
    <ItemTemplate>
        <asp:Label ID="lblState" runat="server" Text='<%# Eval("State") %>'></asp:Label>
        <asp:DropDownList ID="ddlState" runat="server" DataTextField="State"
            CssClass="cadddl" OnSelectedIndexChanged="ddlState_SelectedIndexChanged"
            AutoPostBack="true" DataValueField="State" Style="display: none">
        </asp:DropDownList>
    </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="City" HeaderText="City" SortExpression="City"
    HeaderStyle-Width="140px">
    <ItemTemplate>
        <asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>' />
        <asp:DropDownList ID="ddlCity" runat="server" DataTextField="City" CssClass="cadddl"
            Width="120px" DataValueField="City" Style="display: none" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

#region DropDownList
protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList ddlState = (DropDownList)sender;
}
#endregion

I've used the "Grid / Client edit with batch server update " demo to implement the grid (http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultcs.aspx).

The ddlState_SelectedIndexChanged event updates the hole Grid, so i miss the earlier changes on the grid and i don't know how to find the corresponding ddlCity to the selected State.

Thanks in advance,

Tiago Gerevini Yoshioka

[Shinu]

Hello Tiago,

Check out the following KB article which discuss about ajaxifying template columns.
Ajaxifying particular controls in RadGrid template column with ajax manager

Thanks,
Shinu.

[Tiago]

Yes, i used that article on my project but still didn't work. When i click on the ddlState_SelectedIndexChanged event, the hole radgrid is updated by the postback and the earlier changes are lost. Here's my code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="radGridDados">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGridDados" />
                <telerik:AjaxUpdatedControl ControlID="RadInputManager1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGridDados" />
                <telerik:AjaxUpdatedControl ControlID="RadInputManager1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

#region ItemCreated
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        DropDownList ddlState = (DropDownList)dataItem.FindControl("ddlState");
        DropDownList ddlCity = (DropDownList)dataItem.FindControl("ddlCity");
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(ddlState, ddlCity, null);
    }
}
#endregion

Thanks,
Tiago Gerevini Yoshioka

[Maria Ilieva]

Hello Tiago,

Please remove the settings in which the whole RadGrid is added as updated control and add programmatic settings for the RadAjaxManager as it shown in the previously mentioned code library.

Greetings,
Maria Ilieva
the Telerik team

[Tiago]

Can you explain it better please? I've used the programmatic settings as shown in the code bellow but still not working.

#region ItemCreated

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

DropDownList ddlState = (DropDownList)dataItem.FindControl("ddlState");

DropDownList ddlCity = (DropDownList)dataItem.FindControl("ddlCity");

RadAjaxManager1.AjaxSettings.AddAjaxSetting(ddlState, ddlCity, null);

}

}

#endregion


Thanks
Tiago Gerevini Yoshioka

[Maria Ilieva]

Hello Tiago,

From the previously provide markup I noticed that you have declarative RadAjaxManager settings in which the RadGrid control updates itself:

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="radGridDados">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radGridDados" />
                    <telerik:AjaxUpdatedControl ControlID="RadInputManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radGridDados" />
                    <telerik:AjaxUpdatedControl ControlID="RadInputManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

Please ensure that you have removed the RadGrid control from all Ajax settings.

All the best,
Maria Ilieva
the Telerik team