[Solved] Partial ajax of RadGrid

[David Rhodes]

Hi,

Currently I use the following to ajaxify my RadGrid

<telerik:RadAjaxManagerProxy runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Grid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Grid" LoadingPanelID="LoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

This obviously ajaxifies everything. Is it possible to exclude postback within the FormTemplate of the RadGrid from this?

Within my FormTemplate I have questions which may trigger other questions to be displayed dynamically so I want them to be ajaxified directly (eg answer Yes to one question will postback and create another question).

Basically, I just want the CommandItem and GridButtonColumn's of my RadGrid to use Ajax, is that possible?

[Princy]

Hi David,

Please try the below code snippet.It shows how to set Ajax only for the AddNew command item and Edit Buttoncolumn.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AllowPaging="True" PageSize="5">
   <MasterTableView CommandItemDisplay="Top">
        <Columns>
            <telerik:GridButtonColumn CommandName="Edit" UniqueName="Edit" Text="Edit">
            </telerik:GridButtonColumn>
       </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnCommand="gridCommand" />
    </ClientSettings>
</telerik:RadGrid>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" BackgroundPosition="Center">
</telerik:RadAjaxLoadingPanel>

JS:

<script type="text/javascript">
    function gridCommand(sender, args)
    {     //To disable ajax for all other controls other than InitInsert and Edit button
        if (!((args.get_commandName() == "InitInsert") || (args.get_commandName() == "Edit"))
         {
            var manager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');
            manager.set_enableAJAX(false);

            setTimeout(function ()
            {
                manager.set_enableAJAX(true);
            }, 0);
         }
     }
</script>

Please refer to this forum ,it describes how to set Ajax for particular controls.
http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-only-ajaxify-rad-grid-paginations-controls-vs-everything-in-the-grid.aspx#2623927

Hope this helps,
Thanks,
Princy

[David Rhodes]

Hi Princy,

Thanks for the reply.

I've tried the code but it does not prevent Ajax within my FormTemplate, because the controls within FormTemplate aren't firing the RadGrid's event.

My FormTemplate contains a dropdown with autopostback set to true, depending on what the user chooses in that dropdown a series of questions are then created underneath. When the dropdown is changed it still posts back using Ajax as it does not go through the gridCommand

[Princy]

Hi David,

Please try the below code snippet,it shows an example on how to ajaxify a button control in EditFormTemplate.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

    <ClientEvents OnRequestStart="requestStart" />

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="RadGrid1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" DataSourceID="SqlDataSource1"

    AllowPaging="True" PageSize="5" GridLines="Horizontal" HeaderStyle-Font-Bold="true"

    AutoGenerateColumns="false" Width="60%">

    <PagerStyle Mode="NextPrevAndNumeric" PageSizeControlType="RadComboBox"></PagerStyle>

    <MasterTableView CommandItemDisplay="Top">

        <Columns>

            <telerik:GridButtonColumn CommandName="Edit" UniqueName="Edit" Text="Edit">

            </telerik:GridButtonColumn>

            <telerik:GridBoundColumn UniqueName="FirstName" HeaderText="FirstName" DataField="FirstName">

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="LastName" HeaderText="LastName" DataField="LastName">

            </telerik:GridBoundColumn>

        </Columns>

        <EditFormSettings EditFormType="Template">

            <FormTemplate>
                      FirstName:


                <asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("FirstName") %>'>

                </asp:TextBox>

                LastName:

                <asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("LastName") %>' TabIndex="1">

                </asp:TextBox>

                Title Of Courtesy:

                <asp:DropDownList ID="ddlTOC" runat="server" SelectedValue='<%# Bind("TitleOfCourtesy") %>'

                    DataSource='<%# (new string[] { "Dr.", "Mr.", "Mrs.", "Ms." }) %>' TabIndex="7"

                    AutoPostBack="true" AppendDataBoundItems="True">

                    <asp:ListItem Selected="True" Text="Select" Value="">

                    </asp:ListItem>

                </asp:DropDownList>

                <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'

                    runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>

                </asp:Button> 

                <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"

                    CommandName="Cancel"></asp:Button>

            </FormTemplate>

        </EditFormSettings>

    </MasterTableView> 

</telerik:RadGrid>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" BackgroundPosition="Center"

    Width="100%" Skin="Silk">

</telerik:RadAjaxLoadingPanel>

JS:

<script type="text/javascript">
  function requestStart(sender, args) {
     if (!(args.get_eventTarget().indexOf("btnUpdate") > 0)) {
        var manager = $find('RadAjaxManager1');
        args.set_enableAjax(false);
        setTimeout(function () {
        manager.set_enableAJAX(true);
            }, 0);
        }
    }
</script>

For server side partial ajaxification,please check this online demo-Ajax - Partial Ajaxification.

Thanks,
Princy