Rad Grid Paging

[Arvind]

Hi,

I am adding a Column to Rad Grid at Run time. as Follows:
GridButtonColumn btncol = new GridButtonColumn();

  btncol.HeaderText = "AccountID";

                btncol.ButtonType = GridButtonColumnType.LinkButton; // setting ButtonType as LinkButton

                btncol.DataTextField = dt.Columns["AccountID"].ColumnName; // setting DataTextField to first column in DataTable

                this.rgAccountDetails.MasterTableView.Columns.Add(btncol);

                btncol.UniqueName = "AccountIDbtn";

But On paging a extra Column is being Added to the Grid Each time When I click on the On Paging.
Please See the Image Capture.jpg
Please Help me

  

[Marin]

Hello Arvind,

Be sure to check the that IsPostBack property is false, otherwise you will end up adding the same column to the grid multiple times. For more information please check the following help topic.

protected void Page_Load(object sender, System.EventArgs e)
{
 if ( !IsPostBack )
 {
   //add columns to the grid
 }
}

Sincerely yours,
Marin
the Telerik team

[Arvind]

Many thanks it has solved my problem.

I am having One More Issue related to the Rad Grid.
I have a Link Button in the Rad Grid Which is Created Dynamically, I am trying to open a Modal Pop-up on clicking this Link Button.
In the Modal Pop-up i have a rad Grid and i have enabled the Filtering for the Grid, but when i enter the filter and click on the filter the filter menu is appeared at the background of the Pop-UP.
Please see Image Capture.jpg
Please Help me.

[Arvind]

Hi,

I am adding a Column to Rad Grid at Run time. as Follows:
GridButtonColumn btncol = new GridButtonColumn();

  btncol.HeaderText = "AccountID";

                btncol.ButtonType = GridButtonColumnType.LinkButton; // setting ButtonType as LinkButton

                btncol.DataTextField = dt.Columns["AccountID"].ColumnName; // setting DataTextField to first column in DataTable

                this.rgAccountDetails.MasterTableView.Columns.Add(btncol);

                btncol.UniqueName = "AccountIDbtn";

By default on the Client side code i have given as " AllowFilteringByColumn="True" " for the Rad Grid. As i have Added a Column dynamically to the Rad Grid the Filtering to that column is not been appeared.
Please see the image "RadGridCustomColumn.jpg"
Please help me.

[Princy]

Hello Arvind,

You cannot enable filtering for GridButtonColumns by setting  AllowFilteringByColumn="True"  for the Rad Grid. One suggestion is to use GridTemplateColumn with LinkButton inside ItemTemplate. Then enable filtering for the template column by setting the DataField property for the column to a valid data field from the datasource. This ensures that the control properly retrieves the data on which the filtering pattern will be applied.
For more details check out the following demo.
Grid / Filtering Template Columns

Thanks,
Princy.

[Marin]

Hi Arvind,

On your question about the Modal Pop-up, you can fix this by setting the z-index of the filter contex menu to some big number like this:

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    RadGrid2.FilterMenu.Style.Add("z-index", "100000");
}

Best wishes,
Marin
the Telerik team

[Arvind]

Hi Marin,

I have Added the Code that you have given, but i am getting the following Error on the Web Page when i Click on the Link Button the in the Rad Grid.

" Failed to load viewstate.  The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request.  For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request."
Please Refer the Image ""
Thanks,
Arvind.

[Arvind]

Hi Marin,

I am Very Sorry the Code that you have provided had solved the problem for the filter menu to appear on the Pop-up, but when i enter the Filter Criteria and Click on the Filter Icon it is doing the Post Back and the Modal Pop-up is being Dis-appeared, though i have set the AutoPostBackOnFilter Property of the Grid Columns to False. Here i am generating the data in grid dynamically.


Thanks,
Arvind.

[Marin]

Hi Arvind,

The default behavior for ModalPopUpExtender is to close on postback, if you need to show it again you can use server side code like this:

protected void RadGrid_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName==RadGrid.FilterCommandName)
    {
        ModalPopupExtender1.Show();
    }
}

Regards,
Marin
the Telerik team

[Arvind]

Hi Marin,

Many Thanks.It has solved the problem for me, but the one more Problem is that when i close the pop-up and Open the Pop-up once gain by Clicking on the link button the Filter is not being Cleared and the previous filtered grid is being displayed.

Thanks,
Arvind.

[Marin]

Hello Arvind,

You can reset the filter for the grid after closing the popup by initiating a postback in the client-side OnCancelScript event handler of the ModalPopupExtender and reseting the filter in code behind handler for the button. Here is the sample code:

<%-- This is the button that closes the popup --%>
<asp:LinkButton ID="btnCancel" OnClick="btnCancel_Click" runat="server">Cancel</asp:LinkButton>
    <asp:ModalPopupExtender ID="ModalPopupExtender1" OnCancelScript="mdlPopUp_Cancel()"
        DropShadow="true" runat="server" CancelControlID="btnCancel" TargetControlID="Button1"
        PopupControlID="RadGrid2">
    </asp:ModalPopupExtender>

This is the client side code initiating the postback.

function mdlPopUp_Cancel()
{
    __doPostBack('btnCancel','');
}

And the server side code doing the actual filter reseting:

protected void btnCancel_Click(object sender, EventArgs e)
{
    foreach (GridColumn col in RadGrid2.MasterTableView.Columns)
    {
        col.CurrentFilterFunction = GridKnownFunction.NoFilter;
        col.CurrentFilterValue = string.Empty;
    }
    RadGrid2.MasterTableView.FilterExpression = string.Empty;
    RadGrid2.Rebind();
}

Hope this helps.

Regards,
Marin
the Telerik team

[Romi]

Hi,

I am using telerik Rad grid inside a modal popup but when i do paging ,it does not retain it state and there is no data to display on the screen.
Please do tell me how to handle paging of rad grid in case of telerik rad grid inside a modal popup.

Thanks
Romi varun.

[Princy]

Hi Romi,

I guess you are using the ContentTemplate of the RadWindow? If so - a postback that originates from inside will close the RadWIndow, as the RadWindow is created, opened and closed via JavaScript and cannot survive postbacks.You can use AJAX to avoid disposing the entire page. Please check this documentation to know how to handle it: http://www.telerik.com/help/aspnet-ajax/radwindow-ajaxifying.html.

Thanks,
Princy

[Romi]

Hi,

Thanks for your reply ,but i am not using radwindow.In this i am using ajax modal popup extender .please suggest .How can i handle paging in that case ,because whenever i am changing my page whole grid is disappear .

Thanks
Romi Varun

[Princy]

Hi Romi,

Please have a look at the following sample code snippet. If this doesn't help, please provide your code:

ASPX:

<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <telerik:RadGrid ID="RadGrid1" runat="server" PageSize="2" AutoGenerateColumns="true"
            AllowPaging="true" AllowMultiRowSelection="true" OnNeedDataSource="RadGrid1_NeedDataSource">
        </telerik:RadGrid>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:Button runat="server" ID="btnShowModal" Text="Show" OnClick="btnShowModal_Click" />
<ajaxToolkit:ModalPopupExtender ID="Modal1" runat="server" TargetControlID="btnShowModal" PopupControlID="Updatepanel1" />

C#:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        dynamic data = new[] {
    new { ID = 1, Name = "Name1", Number=123},
    new { ID = 2, Name = "Name2", Number=234},
    new { ID = 3, Name = "Name3", Number=234},
    new { ID = 4, Name = "Name4", Number=456},
    new { ID = 5, Name = "Name5", Number=567},
    new { ID = 6, Name = "Name6", Number=567},
    new { ID = 7, Name = "Name7", Number=789},
    new { ID = 8, Name = "Name8", Number=896},
    new { ID = 9, Name = "Name9", Number=741}
    };
        RadGrid1.DataSource = data;
    }
    protected void btnShowModal_Click(object sender, EventArgs e)
    {
        Modal1.Show();
    }

Thanks,
Princy

[Romi]

Hi,

I think you don't understand my issue.In modal pop up i have a rad grid.I am not opening any modal popup from rad grid.In that case paging is not working.

Thanks
Romi

[Princy]

Hi Romi,

Can you please provide your code snippet.

Thanks,
Princy

[Romi]

Hi,

I have one button on my page.On clicking that button ,i am opening one modal popup .In that modal popup there is one button on click of that button ,i am displaying rad grid .In that case my paging is not working.

[Princy]

Hi Romi,

Make sure you are binding the RadGrid using the NeedDataSource event. On the button click to show the Grid please try Rebind().

C#:

protected void OpenGrid_Click(object sender, EventArgs e)
{
  RadGrid1.Visible = true;
  RadGrid1.Rebind();
}

Thanks,
Princy

[Romi]

Hi,

I tried your snipet code ,but it was for aspx .I am calling my modal popup from one user control to the other .My modal popup is a ascx page.Actually i have two issue in this one is paging is not working and second is radio button state is not retaining when i did page change.

below is the my code please have a look.


ASCX Page:
 <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
  
        <asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <asp:Button runat="server" ID="btnShowModal" Text="Show" OnClick="btnShowModal_Click" />
  
        </ContentTemplate>
        <Triggers>
        <asp:AsyncPostBackTrigger  ControlID="Modal1"
        </Triggers>
        </asp:UpdatePanel> 
   
      
    </div>
        <ajaxToolkit:ModalPopupExtender  ID="Modal1" runat="server"  PopupControlID="rpcPurselookup">
 
 
     <imp:lookup   ID="rpcPurselookup" runat="server" />
 </ajaxToolkit:ModalPopupExtender>
ASCX.cs Code
 protected void btnShowModal_Click(object sender, EventArgs e)
    {
        Modal1.Show();
    }
AsCx Page : For modal popup
<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
  <asp:Button ID="btnSearch" runat="server"
                           Text ="Search"
                           CausesValidation="true" OnClick="btnSearch_Click" />
        <telerik:RadGrid ID="RadGrid1" runat="server" PageSize="2" AutoGenerateColumns="true"
            AllowPaging="true" AllowMultiRowSelection="true" OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView ShowHeadersWhenNoRecords="false"   RetrieveDataTypeFromFirstItem="true" GridLines="None"   DataKeyNames="ID,Name">
                    <NoRecordsTemplate>
                        <div style="color: Red; text-align: center; font-weight: bold; right: 20px; width: 100%">
                            <br />
                            <asp:Literal ID="ltrNoData" runat="server" Text="No data found" />
                        </div>
                        <br />
                    </NoRecordsTemplate>
                    <PagerStyle  CssClass="rgPager" Mode="NextPrevAndNumeric" PagerTextFormat="Change page: {4} Items {2} to {3} of {5}"
                         AlwaysVisible="true" />
                    <Columns>
 <telerik:GridTemplateColumn    HeaderText="<%$ Resources:lblHeadeSelect %>" HeaderStyle-Width = "10%">
    <asp:RadioButton  ID="rdSelect"    CausesValidation="false"   runat="server" ></asp:RadioButton>
  </telerik:GridTemplateColumn>
                
                    <telerik:GridBoundColumn  DataField="ID" HeaderText="ID"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn  DataField="Name" HeaderText="ID"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn  DataField="Number" HeaderText="ID"></telerik:GridBoundColumn>
                  
                  
                                              
                      
                    </Columns>
              
                </MasterTableView>
        </telerik:RadGrid>
    </ContentTemplate>
</asp:UpdatePanel>
 

ASCX.cs Page :
 private List<dynamic> dynamiclst;
public class dynamic
{
    int Id;
    string name;
    int number;
    public int ID
    {
        get
        {
            return Id;
        }
        set
        {
            Id = value;
        }
    }
    public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
        }
    }
    public int Number
    {
        get
        {
            return number;
        }
        set
        {
            number = value;
        }
    }
}
   protected void btnSearch_Click(object sender, EventArgs e)
    {
       
        BindGrid();
      
    }

  public  void BindGrid()
    {
     
        try
        {
           dynamic pp = new dynamic();
        List<dynamic> tt = new List<dynamic>();
        pp.ID = 1;
        pp.Name = "ROMIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII";
        pp.Number = 1;

        tt.Add(pp);
        dynamic pp1 = new dynamic();
        pp.ID = 1;
        pp.Name = "ROMIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII";
        pp.Number = 1;
        tt.Add(pp1);
        dynamic pp2 = new dynamic();
        pp2.ID = 2;
        pp2.Name = "ROMIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII";
        pp2.Number = 2;
        tt.Add(pp2);
        dynamic pp3 = new dynamic();
        pp3.ID = 3;
        pp3.Name = "ROMIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII";
        pp3.Number = 3;
        tt.Add(pp3);
        dynamic pp4 = new dynamic();
        pp4.ID = 4;
        pp4.Name = "ROMIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII";
        pp4.Number = 4;
        tt.Add(pp4);
        dynamic pp5 = new dynamic();
        pp5.ID = 5;
        pp5.Name = "ROMIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII";
        pp5.Number = 5;
        tt.Add(pp5);
        dynamic pp6 = new dynamic();
        pp6.ID = 6;
        pp6.Name = "ROMIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII";
        pp6.Number = 6;

        tt.Add(pp6);
        dynamiclst = tt.ToList();
        //PagingLogic();

        //}
        RadGrid1.DataSource = dynamiclst;
        //RadGrid1.Rebind();
    }

        }
        catch (Exception ex)
        {
        
        }
    }

 thanks Romi

[Viktor Tachev]

Hi Romi,

When using NeedDataSource event it is recommended to set the DataSource for RadGrid in the NeedDataSource event handler. You could call the Revind() method if you need to rebind the grid explicitly.

If you would like to use the RadioButton for selecting rows in RadGrid you could use one of the methods illustrated in the following articles.

Selecting rows client-side
Selecting rows server-side

Note that row selection is not persisted on paging. If you would like to persist the selection you could check the articles below. They illustrate how you could achieve the functionality client- or server-side.

Client-side persisting selected rows on paging/sorting/filtering
Server-side persisting selected rows on paging/sorting/filtering

Regards,
Viktor Tachev
Telerik