Rad Grid,Rad ajax panel and rad ajax manager issue

[Swapnil]

Hi,
i am having grid in which i am using editmode and automatic insert and delete ,i want to show js popup msg to show alert and confirm ,
for this i have to remove ajax panel and manager ,due to which the processing of grid opertaion becomes low
and also i am using export functionality in grid
So is their any other option that i can use and achieve all this

Thanks

[Princy]

Hi Swapnil,

Please note that using RadAjaxManager simultaneously with RadAjaxPanel or UpdatePanel  is not a supported scenario and we highly recommend to avoid such implementation.PLease try the sample code snippet.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" EnableAJAX="true" runat="server">
    <ClientEvents OnRequestStart="onRequestStart"></ClientEvents>
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="RadWindowManager1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadButton ID="Export" runat="server" Text="Export to Excel"
    OnClientClicking="OnClientClicking" onclick="Export_Click">
</telerik:RadButton>
<telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
    AllowAutomaticInserts="True" PageSize="10" AllowAutomaticUpdates="True" AllowPaging="True"
    AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
    <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
    <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="ProductID"
        DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" AutoGenerateColumns="False">
        <Columns>
            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                <ItemStyle CssClass="MyImageButton"></ItemStyle>
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
                UniqueName="ProductName" ColumnEditorID="GridTextBoxColumnEditor1">
                <ColumnValidationSettings EnableRequiredFieldValidation="true">
                    <RequiredFieldValidator ForeColor="Red" Text="*This field is required">
                    </RequiredFieldValidator>
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>
            <telerik:GridDropDownColumn DataField="CategoryID" DataSourceID="SqlDataSource2"
                HeaderText="Category" ListTextField="CategoryName" ListValueField="CategoryID"
                UniqueName="CategoryID" ColumnEditorID="GridDropDownColumnEditor1">
            </telerik:GridDropDownColumn>
            <telerik:GridNumericColumn DataField="UnitsInStock" HeaderText="Units In Stock" SortExpression="UnitsInStock"
                UniqueName="UnitsInStock" ColumnEditorID="GridNumericColumnEditor1">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="Quantity Per Unit"
                SortExpression="QuantityPerUnit" UniqueName="QuantityPerUnit" Visible="false"
                EditFormColumnIndex="1" ColumnEditorID="GridTextBoxColumnEditor2">
            </telerik:GridBoundColumn>
            <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued"
                UniqueName="Discontinued" EditFormColumnIndex="1">
            </telerik:GridCheckBoxColumn>
            <telerik:GridTemplateColumn HeaderText="UnitPrice" SortExpression="UnitPrice" UniqueName="TemplateColumn"
                EditFormColumnIndex="1">
                <ItemTemplate>
                    <asp:Label runat="server" ID="lblUnitPrice" Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <span>
                        <telerik:RadNumericTextBox runat="server" ID="tbUnitPrice" Width="40px" DbValue='<%# Bind("UnitPrice") %>'>
                        </telerik:RadNumericTextBox><span style="color: Red"><asp:RequiredFieldValidator
                            ID="RequiredFieldValidator1" ControlToValidate="tbUnitPrice" ErrorMessage="*"
                            runat="server">
                        </asp:RequiredFieldValidator></span> </span>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                UniqueName="DeleteColumn">
                <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
            </telerik:GridButtonColumn>
        </Columns>
        <EditFormSettings ColumnNumber="2" CaptionDataField="ProductName" CaptionFormatString="Edit properties of Product {0}"
            InsertCaption="New Product">
            <FormTableItemStyle Wrap="False"></FormTableItemStyle>
            <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
            <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" Width="100%">
            </FormMainTableStyle>
            <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px"></FormTableStyle>
            <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
            <EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record"
                UniqueName="EditCommandColumn1" CancelText="Cancel edit">
            </EditColumn>
            <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind_newConnectionString3 %>"
    DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID" InsertCommand="INSERT INTO [Products] ([ProductName], [CategoryID], [UnitPrice], [Discontinued], [QuantityPerUnit], [UnitsInStock]) VALUES (@ProductName, @CategoryID, @UnitPrice, @Discontinued, @QuantityPerUnit, @UnitsInStock)"
    SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [Discontinued], [QuantityPerUnit], [UnitsInStock] FROM [Products] WITH(NOLOCK)"
    UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [CategoryID] = @CategoryID, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued, [QuantityPerUnit] = @QuantityPerUnit, [UnitsInStock] = @UnitsInStock WHERE [ProductID] = @ProductID">
    <DeleteParameters>
        <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
    </DeleteParameters>
    <InsertParameters>
        <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
        <asp:Parameter Name="CategoryID" Type="Int32"></asp:Parameter>
        <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
        <asp:Parameter Name="Discontinued" Type="Boolean"></asp:Parameter>
        <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
        <asp:Parameter Name="UnitsInStock" Type="Int16"></asp:Parameter>
    </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
        <asp:Parameter Name="CategoryID" Type="Int32"></asp:Parameter>
        <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
        <asp:Parameter Name="Discontinued" Type="Boolean"></asp:Parameter>
        <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
        <asp:Parameter Name="UnitsInStock" Type="Int16"></asp:Parameter>
        <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
    </UpdateParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind_newConnectionString3 %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
</asp:SqlDataSource>

JS:

<script type="text/javascript">
    function onRequestStart(sender, args) {
        if (args.get_eventTarget().indexOf("Export") >= 0)  // ID of Button to Set Ajax false on the Button Click
            args.set_enableAjax(false);
    }
    function OnClientClicking(sender, args) {
        var callBackFunction = Function.createDelegate(sender, function (argument) {
            if (argument) {
                this.click();
            }
        });
        var text = "Are you sure you want to Export the Grid?";
        radconfirm(text, callBackFunction, 300, 100, null, "Export");
        args.set_cancel(true);
    }
</script>

C#:

protected void Export_Click(object sender, EventArgs e)
   {
       RadGrid1.MasterTableView.ExportToExcel();
   }

Thanks,
Princy

[Swapnil]

This is my code is this ok to use
or will create problem ?

<%@ Page Title="" Language="C#" MasterPageFile="~/MPLayout.master" AutoEventWireup="true"
    CodeFile="Copy of MPCompanyList.aspx.cs" Inherits="MPCompanyList" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <link href="Style/styles.css" rel="stylesheet" type="text/css" />
    <%--Style Applied For The Textbox Inside Automatic Insert And Edit Mode--%>
    <style type="text/css">
        .riEditFormTextBox
        {
            margin-top: 4px;
            width: 180px;
        }
    </style>



      <%--Not To Show Ajax Loading Panel--%>
       <%-- <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadComp">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadGrid1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>--%>



      <%--To Show Ajax Loading Panel--%>

         <telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1" ClientEvents-OnRequestStart="onRequestStart"
            runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <%--<telerik:AjaxSetting AjaxControlID="RadAjaxLoadingPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>--%>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="5" Skin="Outlook" />













    <%-- Script To stop Ajax Panel to Export Data From Grid--%>
    <script type="text/javascript">
        function onRequestStart(sender, args) {
            if (args.get_eventTarget().indexOf("ExportTo") >= 0) {
                args.set_enableAjax(false);
            }
        }

    </script>


            <br />
        <center>
            <table>
                <tr>
                    <td>
                        <%--<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="onRequestStart">--%>

                            <%-- EnableViewState="False" --%>
                            <telerik:RadGrid ID="RadGrid1" runat="server" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource"
                                AllowPaging="true" PageSize="10" AllowSorting="true" ShowGroupPanel="True"
                                OnDeleteCommand="RadGrid1_DeleteCommand" HeaderStyle-Font-Bold="true" OnPreRender="RadGrid1_PreRender"
                                OnUpdateCommand="RadGrid1_UpdateCommand" OnItemCreated="RadGrid1_ItemCreated"
                                OnInsertCommand="RadGrid1_InsertCommand"
                                OnItemCommand="RadGrid1_ItemCommand" Skin="WebBlue">
                                <ExportSettings ExportOnlyData="true" OpenInNewWindow="true" IgnorePaging="true">
                                    <Pdf AllowAdd="true" AllowCopy="true" AllowModify="true" AllowPrinting="true" BorderColor="Black"
                                        BorderStyle="Medium" BorderType="AllBorders" PageBottomMargin="20px" PageFooter-LeftCell-TextAlign="Center"
                                        PageFooterMargin="20px" PageHeader-LeftCell-TextAlign="Center" PageHeaderMargin="20px"
                                        PageLeftMargin="35px" PageRightMargin="35px" PageTitle="List Of Companies and Details"
                                        PageTopMargin="35px" PaperSize="A4" UserPassword="ss">
                                    </Pdf>
                                </ExportSettings>
                                <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true"></PagerStyle>
                                <ClientSettings Selecting-AllowRowSelect="true" AllowDragToGroup="True" EnablePostBackOnRowClick="true">
                                    <Selecting AllowRowSelect="True" UseClientSelectColumnOnly="True"></Selecting>
                                </ClientSettings>
                                <MasterTableView EditMode="EditForms" AutoGenerateColumns="true" DataKeyNames="CompId"
                                    CommandItemDisplay="Top" CommandItemSettings-ShowAddNewRecordButton="true" CommandItemSettings-ShowRefreshButton="false">
                                    <CommandItemSettings ShowExportToPdfButton="true"/>
                                    <CommandItemSettings ShowExportToExcelButton="true" />
                                    <CommandItemSettings ShowExportToWordButton="true" />
                                    <CommandItemSettings ShowExportToCsvButton="true" />
                                    <EditFormSettings FormMainTableStyle-HorizontalAlign="Center" EditColumn-ButtonType="PushButton"
                                        FormTableStyle-Width="350px" FormTableButtonRowStyle-HorizontalAlign="Center"
                                        FormTableStyle-CellPadding="3" FormMainTableStyle-Font-Bold="true" FormMainTableStyle-ForeColor="Purple"
                                        FormStyle-CssClass="" FormTableStyle-CellSpacing="5" InsertCaption="Add New Record"
                                        FormCaptionStyle-Font-Bold="true" FormCaptionStyle-Font-Underline="true" FormCaptionStyle-ForeColor="Black"
                                        FormCaptionStyle-Font-Size="Large" FormCaptionStyle-HorizontalAlign="Center"
                                        FormCaptionStyle-Width="100%">
                                        <FormStyle Width="100%" BackColor="LightCyan"></FormStyle>
                                    </EditFormSettings>
                                    <Columns>
                                        <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">
                                        </telerik:GridEditCommandColumn>
                                    </Columns>
                                </MasterTableView>
                                <MasterTableView>
                                    <Columns>
                                        <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="DeleteColumn"
                                            ButtonType="ImageButton" />
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>
<%--                 </telerik:RadAjaxPanel>--%>

                    </td>
                </tr>
            </table>
        </center>


        <br />

</asp:Content>

Thanks

[Maria Ilieva]

Hello Swapnil,

Note that it is not a supported scenario to use RadAjaxPanel and RadAjaxManager to update the same controls on the page or add RadAjaxPanel into RadAjaxManager settings. therefor please remove the RadAjaxPanel and use only RadAjaxManager to ajaxify the controls in order to avoid possible issues with the Ajax functionality.

Regards,
Maria Ilieva
Telerik

[William Mace]

Could you please elaborate on what issues this might cause?

[Maria Ilieva]

Hi William,

If one and the same control is placed in RadAjaxPanel as well as included in RadAjaxManager settings as ajaxified control (i.e. it is ajaxified by both the panel and manager), the corresponding manager's setting will not work. In this case the AJAX Panel ajaxifies that control instead of the manager. RadAjaxPanel is designed to update only its content, therefore you can not use the manager to update other controls outside of the panel from control ajaxified by the manager and inside the RadAjaxPanel. In most cases using both control to update the same part of the page can lead to "Sys.WebForms.PageRequestManagerParserErrorException" error.

Regards,
Maria Ilieva
Telerik