Rad Grid,Rad ajax panel and rad ajax manager issue

6 posts, 0 answers
  1. Swapnil
    Swapnil avatar
    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
  2. Princy
    Princy avatar
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Swapnil
    Swapnil avatar
    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
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    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.
  6. William Mace
    William Mace avatar
    12 posts
    Member since:
    Feb 2009

    Posted 21 Oct 2013 Link to this post

    Could you please elaborate on what issues this might cause?
  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017