Telerik Forums / UI for ASP.NET AJAX Forum / Ajax /

Rad Grid,Rad ajax panel and rad ajax manager issue

Telerik UI for ASP.NET AJAX
Resources Buy Try

6 posts, 0 answers

Swapnil

96 posts

Member since:
Aug 2013

Posted 08 Oct 2013 Link to this post

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

17421 posts

Member since:
Mar 2007

Posted 08 Oct 2013 Link to this post

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

96 posts

Member since:
Aug 2013

Posted 08 Oct 2013 Link to this post

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
Admin

4017 posts

Posted 11 Oct 2013 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
William Mace

12 posts

Member since:
Feb 2009

Posted 21 Oct 2013 Link to this post

Could you please elaborate on what issues this might cause?
Maria Ilieva
Admin

4017 posts

Posted 23 Oct 2013 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

Rad Grid,Rad ajax panel and rad ajax manager issue

Swapnil

Princy

Swapnil

Maria Ilieva

William Mace

Maria Ilieva