Default template for NextPrevNumericAndAdvanced pager

[Bryan]

We use the NextPrevNumericAndAdvanced pager, and need to add a textbox / button similar to Page Size, which we want to use for number of rows displayed (effectively changing grid height)

I'm guessing we need to use a custom pagertemplate, but don't want to try and recreate the NextPrevNumericAndAdvanced from scratch, so do you have the html content for the default, so that we can modify that?

 

[Attila Antal]

Hi Bryan,

Currently, there are two options the RadGrid can offer. Using the built-in pager, and customizing it using a Pager Template. See Customizing the Pager and Custom Paging

Could you please share more information about your plan for the Pager item, maybe we can offer you a way to customize it for that purpose? Perhaps it could be just a few lines of code. Share your idea and we will check if we can help.

Regards,
Attila Antal
Progress Telerik

[Bryan]

Hi Attila

I've looked at the links, and think that a customer pager is what we need, but with just an extra text box and button to specify the number of rows. We want to do it in the pager for consistency. I've attached screen shot of what we are after
I'm happy to use a template, but as we want to base it on the standard one, do not want to create the whole thing from scratch

How that makes sense

Bryan

[Attila Antal]

Hi Bryan,

CustomPaging is used to modify the behavior of the built-in Paging functionality. For example, by default, the Prev and Next buttons will increase or decrease the paging by one, but you can change that and make the paging jump two pages at a time.

PagerTemplates are used when you want to implement a different layout. If you do so, you will need to create and add all the controls you will need, Prev, Next, Numbers, etc.

<PagerTemplate>

    <asp:Panel runat="server">
        <telerik:RadButton runat="server" ID="RadButton1" Text="First Page" AutoPostBack="true" />
    <telerik:RadButton runat="server" ID="RadButton2" Text="Prev" AutoPostBack="true" />
    </asp:Panel>
    <asp:Panel runat="server">
        <telerik:RadButton runat="server" ID="RadButton3" Text="1" AutoPostBack="true" />
    <telerik:RadButton runat="server" ID="RadButton4" Text="2" AutoPostBack="true" />
    <telerik:RadButton runat="server" ID="RadButton5" Text="3" AutoPostBack="true" />
    <telerik:RadButton runat="server" ID="RadButton6" Text="4" AutoPostBack="true" />
    </asp:Panel>
    <asp:Panel runat="server">
        <telerik:RadButton runat="server" ID="RadButton7" Text="Next" AutoPostBack="true" />
    <telerik:RadButton runat="server" ID="RadButton8" Text="Last Page" AutoPostBack="true" />
    </asp:Panel>
                    
    <asp:Panel runat="server">
        <asp:Label ID="Label1" runat="server" Text="Row Count"></asp:Label>
        <telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
        <telerik:RadButton runat="server" ID="RadButton9" Text="Change" AutoPostBack="true" />
    </asp:Panel>

</PagerTemplate>

Result

 

The GridPagerItem in the ItemDataBound event will contain all the necessary information for you. Current Page index, page size, the total number of items, and more, see the screenshot below:

 

If you want to keep the existing Controls and you want to add additional ones, you can do that as well. That is a little more complicated but can be achieved.

For instance, in the ItemCreated event of RadGrid, you could append additional controls. 

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridPagerItem)
    {
        var pagerItem = e.Item as GridPagerItem;

        var pnl = new Panel() { ID = "MyCustomPanel" };

        var lbl = new RadLabel() {ID="Label1", Text="Row Count" };
        var txtBox = new RadTextBox() { ID = "RadTextBox1" };
        var btn = new RadButton() { ID = "RadButton1", Text = "Change" };

        var pagerCell = pagerItem.PagerContentCell.Controls[0] as Panel;

        pagerCell.Controls.AddAt(3, lbl);
        pagerCell.Controls.AddAt(4, txtBox);
        pagerCell.Controls.AddAt(5, btn);
    }
}

 

Result

For these custom buttons to work, you will need to implement their functionalities. You can assign Commands to them following the instructions from the How to Fire Command Events article.

I hope this will give you a good idea about the available/possible options and help you implement the functionality you are looking for.

Regards,
Attila Antal
Progress Telerik

[Bryan]

Hi Attila

The second option looks like what we want. Can we control the layout at all, so in line with the other items for example?

Thanks

Bryan

[Attila Antal]

Hi Bryan,

Yes, you can create the layout you like either by adding them in the markup or the server-side. From there you can apply CSS to organize those elements accordingly.

Assuming the following layout in the PagerTemplate

 

<PagerTemplate>
    <div class="flexbox">
        <div class="items">
            <telerik:RadButton runat="server" ID="RadButton1" Text="First Page" AutoPostBack="true" />
            <telerik:RadButton runat="server" ID="RadButton2" Text="Prev" AutoPostBack="true" />
        </div>
        <div class="items">
            <telerik:RadButton runat="server" ID="RadButton3" Text="1" AutoPostBack="true" />
            <telerik:RadButton runat="server" ID="RadButton4" Text="2" AutoPostBack="true" />
            <telerik:RadButton runat="server" ID="RadButton5" Text="3" AutoPostBack="true" />
            <telerik:RadButton runat="server" ID="RadButton6" Text="4" AutoPostBack="true" />
        </div>
        <div class="items">
            <telerik:RadButton runat="server" ID="RadButton7" Text="Next" AutoPostBack="true" />
            <telerik:RadButton runat="server" ID="RadButton8" Text="Last Page" AutoPostBack="true" />
        </div>
        <div class="items">
            <asp:Label ID="Label1" runat="server" Text="Row Count"></asp:Label>
            <telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
            <telerik:RadButton runat="server" ID="RadButton9" Text="Change" AutoPostBack="true" />
        </div>
    </div>
</PagerTemplate>

 

 

The following CSS will then apply some styling rules and position the elements in one way

 

.RadGrid tfoot .rgPager .flexbox {
    display: flex;
    flex-direction: column;
}

.RadGrid tfoot .rgPager .flexbox .items {
    margin: 15px;
    box-shadow: 0 3px 7px rgba(0,0,0,0.12);
    padding: 15px;
}

 

 

Result

 

You change that CSS and will produce a different look

 

.RadGrid tfoot .rgPager .flexbox {
    display: flex;
    flex-direction: row;
}

 

 

Result:

 

Or you can organize them all inline similar to the Grid's built-in Pager

 

.RadGrid tfoot .rgPager .flexbox {
       display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.RadGrid tfoot .rgPager .flexbox .items {
   margin-left: 15px;
}

 

 

Result:

 

There are many ways you can style the elements. All you need is to get familiar with CSS styling and you'll be unstoppable.

Here are some links that may be helpful

You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;
• CSS !important: Don’t Use It. Do This Instead

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

Regards,
Attila Antal
Progress Telerik

[Bryan]

Hi Attila

I've tried adding your suggestion to our existing event, but

var pagerCell = pagerItem.PagerContentCell.Controls[0] as Panel;

returns null. Any suggestions?

 

Our code

if (e.Item is GridPagerItem)
     {
         Button btnChangePageSizeLinkButton = (Button)e.Item.FindControl("ChangePageSizeLinkButton");
         RadNumericTextBox tbChangePageSizeTextBox = (RadNumericTextBox)e.Item.FindControl("ChangePageSizeTextBox");

         btnChangePageSizeLinkButton.Click += new EventHandler((s, ee) => SaveSetting_Click2(s, ee, tbChangePageSizeTextBox.Text));
         tbChangePageSizeTextBox.TextChanged += new EventHandler((s, ee) => SaveSetting_Click2(s, ee, tbChangePageSizeTextBox.Text));

         Button btnGoToPageLinkButton = (Button)e.Item.FindControl("GoToPageLinkButton");
         RadNumericTextBox tbGoToPageTextBox = (RadNumericTextBox)e.Item.FindControl("GoToPageTextBox");

         btnGoToPageLinkButton.Click += new EventHandler((a, b) => goToSaveSetting(a, b, tbGoToPageTextBox.Text));
         tbGoToPageTextBox.TextChanged += new EventHandler((a, b) => goToSaveSetting(a, b, tbGoToPageTextBox.Text));

         gridDevices.MasterTableView.IsFilterItemExpanded = false;

         //
         var pagerItem = e.Item as GridPagerItem;

         var pnl = new Panel() { ID = "MyCustomPanel" };

         var lbl = new RadLabel() { ID = "Label1", Text = "Row Count" };
         var txtBox = new RadTextBox() { ID = "RadTextBox1" };
         var btn = new RadButton() { ID = "RadButton1", Text = "Change" };

         var pagerCell = pagerItem.PagerContentCell.Controls[0] as Panel;

         pagerCell.Controls.AddAt(3, lbl);
         pagerCell.Controls.AddAt(4, txtBox);
         pagerCell.Controls.AddAt(5, btn);

     }

[Attila Antal]

Hi Bryan,

That line of code works for the Grid I used to show you examples. However, depending on the Grid configuration you have you might not have the same structure. 

You can find it out by running your project in debug mode and inspect the object tree.

I suggest checking out the following Videos that could give you a good idea: https://www.youtube.com/watch?v=9jRGEgaE8Pg&list=PLvmaC-XMqeBZWVHkPVGi6Q43J-nGQxUPw

Regards,
Attila Antal
Progress Telerik