How to add extra items to the default paging bar

[Ayane]

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]

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]

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]

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]

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]

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]

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

Regards

[Jayaprakash Kamaraj]

Hi Ayane, 

Thanks for the update.

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

Regards, 

Jayaprakash K.