We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to add extra items to the default paging bar

Thread ID:

Created:

Updated:

Platform:

Replies:

121801 Jan 26,2016 05:11 PM Feb 8,2016 03:21 AM ASP.NET MVC 7
loading
Tags: Grid
Ayane
Asked On January 26, 2016 05:11 PM

Hello again.

I'd like to know how to add extra items to the default paging bar. For instance, I need to add a refresh button next to the paginator count.
In addition, I need to add a dropDownList to set the pageSize, etc, next to paginator count as well.

Is there any way to do this by any chance, perhaps using PageSettings property?

I've tried to do so, but I couldn't.

Jayaprakash Kamaraj [Syncfusion]
Replied On January 27, 2016 08:59 AM

Hi Ayane,
We have achieved your requirement using pager template concept . Please refer to the below code example, help documentation and sample.
Code Example:

<script type="text/x-jsrender" id="pagerTemplate">

    <div class="e-pagercontainer" style="border-radius:0px">

        <button id="refreshbutton"  style="text-align:center; border:none;width:90px;height:20px">refresh button</button>

    </div>

    <div class="e-pagercontainer" style="border-radius:0px">

        <select id="ShipCountry" name="ShipCountry" style="text-align:center; border:none;width:90px;height:20px">

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

            <option value="4">4</option>

            <option value="5">5</option>


        </select>

    </div>

</script>

@(Html.EJ().Grid<SyncfusionMvcApplication39.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowScrolling()

         .AllowPaging()    /*Paging Enabled*/

            .PageSettings(page => page.EnableTemplates().Template("#pagerTemplate").ShowDefaults())

        .Columns(col =>

        {

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();

            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();

            col.Field("ShipName").HeaderText("Ship Name").Width(170).Add();


        }).ClientSideEvents(eve=>eve.ActionComplete("complete").DataBound("db")))

<script type="text/javascript">

  function db(args){


        $("#refreshbutton").ejButton({click:function(args){

            var obj = $("#FlatGrid").ejGrid("instance");

            obj.refreshContent(true);

            alert("gridrefreshed")

        }

        });

        $('#ShipCountry').ejDropDownList(

                {


                    value: "1",

                    change: function (args)

                    {

                        /*Do your changes */ 

                        var gridObj = $("#FlatGrid").data("ejGrid");

                        var val = args.value;

                        gridObj.gotoPage(val);           

                    }

                });        

    }

        function complete(args) {

            $(".e-pagercontainer").eq(1).css('border-style', 'none');

            $("#ShipCountry").ejDropDownList({ width: '110px',height:'25px' });

        }
</script>


Help Documentation: http://help.syncfusion.com/aspnetmvc/grid/paging#pager-template

Sample: http://www.syncfusion.com/downloads/support/forum/121801/ze/SyncfusionMvcApplication391801828383

Regards,

Jayaprakash K.

Ayane
Replied On February 1, 2016 09:43 AM

Thanks a lot for your reply. So far so good, though, to work with html elements and css properties in pager bar is a bit difficult.

Regards.

Jayaprakash Kamaraj [Syncfusion]
Replied On February 2, 2016 04:50 AM

Hi Ayane,
Thanks for the update.
Please let us know the kind of difficulties that you have faced and some more details on that. The provided details will be help to give an appropriate solution to you.
Regards,

Jayaprakash K.


Ayane
Replied On February 3, 2016 04:34 PM

Hello again.

Regarding the above example using ejButton and  ejDropDownList in paging bar is my issue about.

I have tried to put a <label> tag alongside the ejDropDownList element and I could not put them aligned. I have used bootstrap codes and I neither achieved.

Attached two images to represent what I was doing.

In short, I need you to explain me how to align the label and the select.

Thanks in advance.

My greetings


Attachment: pagingbar_4fc8a969.zip

Jayaprakash Kamaraj [Syncfusion]
Replied On February 4, 2016 06:36 AM

Hi Ayane,
We have achieved your requirement “How to align the label and select” using "float" style property in CSS. Please refer to the below code example, screenshot and sample.
Code Example:

<script type="text/x-jsrender" id="pagerTemplate">

    <div><div class="e-pagercontainer" style="border-radius:0px;float:left">

            <button id="refreshbutton" style="text-align:center; border:none;width:90px;height:20px">refresh button</button>

        </div>

        <label style="float:left;padding:2px">PageCount</label>

    <div class="e-pagercontainer" style="border-radius:0px;float:right">

        <select id="ShipCountry" name="ShipCountry" style="text-align:center; border:none;width:90px;height:20px">

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

            <option value="4">4</option>

            <option value="5">5</option>


        </select>

    </div>

        <label style="float:right;padding:2px">PageSize</label>

        <div class="e-pagercontainer" style="border-radius:0px;float:right">

            <select id="ShipCountry1" name="ShipCountry" style="text-align:center; border:none;width:90px;height:20px">

                <option value="1">1</option>

                <option value="2">2</option>

                <option value="3">3</option>

                <option value="4">4</option>

                <option value="5">5</option>


            </select>

        </div>

    </div>
</script>


Screenshot:

Sample: http://www.syncfusion.com/downloads/support/forum/121801/ze/SyncfusionMvcApplication392017849851
Regards,
Jayaprakash K.

Ayane
Replied On February 5, 2016 02:55 PM

Thank you so much for the help offered. I want to let you know that your example supported me a lot.

Regards

Jayaprakash Kamaraj [Syncfusion]
Replied On February 8, 2016 03:21 AM


Hi Ayane, 


Thanks for the update.

Please get back to us if you need any further assistance.  


Regards, 

Jayaprakash K.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;