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

[Solved] how to only ajaxify rad grid paginations controls vs everything in the grid

7 Answers 261 Views

Grid

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

Ron asked on 08 May 2013, 04:36 PM

Hi,

I have a rad grid with about 7 columns and 4 of them are hyperlink columns. The grid is wrap in an ajax panel which ajaxifies just fine. Really the only reason I want the grid to ajaxify is for the pagination but it is also ajaxifying when you click a hyperlink column. This is not what I want. How can I only ajaxify the pagination buttons?

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

<telerik:RadGrid runat="server" ID="grdInvoices1" Width="836px"

AutoGenerateColumns="false" CssClass="CustomClass"

AllowMultiRowEdit="false" ShowHeader="false" ForeColor="Black"

BorderColor="#EDEDED" BorderStyle="Solid"

SelectedItemStyle-CssClass="SelectedStyle"

onpageindexchanged="grdInvoices1_PageIndexChanged"

onpagesizechanged="grdInvoices1_PageSizeChanged1" onitemdatabound="grdInvoices1_ItemDataBound"

>

<ClientSettings>

<Selecting AllowRowSelect="true" />

<ClientEvents OnRowMouseOver="GetRowId" OnRowSelected="RowSelected" />

<DataBinding EnableCaching="false" />

</ClientSettings>

<PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" ></PagerStyle>

<MasterTableView DataKeyNames="Id, CustomerId, CompanyId" ClientDataKeyNames="Id"

Font-Names="Arial,Helvetica,sans-serif;" >

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" >

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="Id" HeaderText="Id" Visible="false" UniqueName="Id">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="InvoiceNo" UniqueName="InvoiceNo" HeaderText="Invoice No">

<ItemTemplate>

<asp:LinkButton runat="server" ID="lnkInvoiceNo" Text='<%# Eval("InvoiceNo") %>'

OnClick="lnkInvoiceNo_Click" />

</ItemTemplate>

<ItemStyle Width="115px" CssClass="FirstColumn" />

</telerik:GridTemplateColumn>

<%-- <telerik:GridHyperLinkColumn HeaderText="Invoice No" UniqueName="InvoiceNo"

DataNavigateUrlFields="Id, CustomerId, CompanyId" DataNavigateUrlFormatString="../Invoices/ViewInvoice.aspx?Invoice={0}&Customer={1}&Company={2}"

DataTextField="InvoiceNo" DataTextFormatString="{0:d}" >

<ItemStyle Width="175px" CssClass="FirstColumn" />

</telerik:GridHyperLinkColumn>--%>

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

<ItemStyle Width="300px" HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Total" HeaderText="Total" UniqueName="Total"

DataFormatString="{0:N2}" ItemStyle-HorizontalAlign="Right" ItemStyle-Font-Bold="true">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Tools" UniqueName="Edit">

<ItemStyle Width="128px" HorizontalAlign="Right" CssClass="EditSpacer" />

<ItemTemplate>

<div runat="server" id="Edit" class="Tools">

<asp:ImageButton ID="lnkEdit" runat="server" OnClick="btnEdit_Click" ImageUrl="~/Images/Icons/Test/Edit.png"

AlternateText="Edit" ToolTip="Edit" />

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn>

<ItemStyle Width="20px" />

<ItemTemplate>

<div class="Tools">

<asp:HyperLink ID="Delete" runat="server">

<asp:ImageButton ID="DeleteImg" runat="server" ImageUrl="~/Images/Icons/Test/Delete.png"

OnClientClick="return DeleteInvoice();" AlternateText="Delete" ToolTip="Delete" style="border:none; " />

</asp:HyperLink>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn>

<ItemStyle Width="20px" />

<ItemTemplate>

<div class="Tools">

<asp:ImageButton ID="btnPayment" runat="server" OnClick="btnPayment_Click" ImageUrl="~/Images/Icons/Test/addpayment.png"

AlternateText="Payment" ToolTip="Payment" style="border:none;" />

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn>

<ItemStyle Width="20px" />

<ItemTemplate>

<div class="Tools">

<asp:HyperLink ID="Print" runat="server" >

<asp:ImageButton ID="PrintImg" runat="server" ImageUrl="~/Images/Icons/Test/Printer.png"

AlternateText="Print" ToolTip="Print" OnClick="PrintInvoice" />

</asp:HyperLink>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

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

<ItemStyle CssClass="HideColumn" />

</telerik:GridBoundColumn>

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

<ItemStyle CssClass="HideColumn" />

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

Thanks,
Ron.

7 Answers, 1 is accepted

answered on 09 May 2013, 10:09 AM

I tried the following script but no success. What am I doing wrong?

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initRequest);
         function initRequest(sender, args) {
             if (args.get_postBackElement().id.indexOf("InvoiceNo") != -1) {
                 args.set_cancel(true); //stop async request
                 sender._form["__EVENTTARGET"].value = args.get_postBackElement().id.replace(/\_/g, "$");
                 sender._form["__EVENTARGUMENT"].value = "";
                 sender._form.submit();
                 return;
             }
         }

answered on 13 May 2013, 03:05 PM

Hello Ron,

You could partially ajaxify the grid. You would need to use RadAjaxManager and programmatically add the ajax settings for the elements of the grid in the code-behind. The ajax settings for the pager items should be set in the ItemCreated event. Information on how to access the pager items of the grid could be found here.
Also partial ajaxification of a RadGrid control is illustrated in this demo.

I hope this helps.

Greetings,

Victor Tachev

the Telerik team

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 their blog feed now.

answered on 14 May 2013, 11:05 AM

Thank you for your help with this Victor.

I've tried the following and I'm getting an error which i've attached or the object reference error. Am I doing something wrong? Again, I'd like like to only have the grid ajaxify when using the pagination controls. The button controls which are on the page I do NOT want to ajaxify when click.

protected void grdInvoices1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridPagerItem)

{

RadSlider lblPageSize = (RadSlider)e.Item.FindControl("GridSliderPager");

AjaxManager1.AjaxSettings.AddAjaxSetting(lblPageSize, grdInvoices1); //ajaxify the button

}

if (e.Item is GridDataItem)

{

GridDataItem dataItem = e.Item as GridDataItem;

LinkButton ibtnAddToCart = (LinkButton)(dataItem["InvoiceNo"]).FindControl("lnkInvoiceNo");

AjaxManager1.AjaxSettings.AddAjaxSetting(ibtnAddToCart, grdInvoices1); //ajaxify the button

}

thanks,
ron

Accepted

answered on 16 May 2013, 01:02 PM

Hi Ron,

When you use RadAjaxPanel all controls wrapped in it are Ajax-ified. In your case you would need to disable the Ajax for the columns with hyperlinks. One approach to do this is illustrated in this online demo and another in this demo.

The first demo demonstrates the usage of the OnCommand client-side event of RadGrid. This event will be fired if your button has a CommandName property set. In the event body you could check what is the command name and if it is the command name of one of your four columns you could cancel the Ajax as demonstrated in the demo:

function gridCommand(sender, args) {

if (args.get_commandName() == "DownloadAttachment") {

var manager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');

manager.set_enableAJAX(false);

setTimeout(function () {

manager.set_enableAJAX(true);

}, 0);

}

Another approach is to check the initiator of the request on the client. If the request is initiated from one of your hyperlink columns you should disable Ajax. If you use a LinkButton you could use it's ID to intercept the request initiator:

function requestStart(sender, args) {

if (args.get_eventTarget().indexOf("ServerID") > 0)

args.set_enableAjax(false);

}

Here "ServerID" is the server ID of the the LinkButton controls.

Give this approach and you should not have problems.

Regards,

Victor Tachev

the Telerik team