This is a migrated thread and some comments may be shown as answers.

Rad Grid,Rad ajax panel and rad ajax manager issue

5 Answers 296 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 08 Oct 2013, 12:58 PM

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

answered on 09 Oct 2013, 04:51 AM

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

answered on 23 Oct 2013, 12:01 PM

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.