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.

Grid pager with selectable items per page via dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

125275 Aug 4,2016 11:09 AM Feb 6,2017 01:33 AM JavaScript 9
loading
Tags: ejGrid
Joel DSouza
Asked On August 4, 2016 11:09 AM

Is there anything built-in to support this type of a feature? 

Per page item count

I'm aware that this could be part of a custom pager implementation but this also involved redrawing the  pageCount presentation based on the total count available.  Is there a sample that point me in the right direction?

Thanks,
Joel

Ragavee U S [Syncfusion]
Replied On August 5, 2016 02:34 AM

Hi Joel, 

Thanks for your interest in Syncfusion products. 

We have achieved your requirement using the pagerTemplates feature of the Grid. Using this feature, we can customize the grid pager based on our need. Please refer to the below documentation for more information. 



We have prepared a sample which can be tracked through below link. 


In the above sample, we have rendered a dropdown control in grid pager which is used to change the pageSize of the Grid. Please refer to the below code example. 

<script type="text/x-jsrender" id="template"> 
        <input id="pageSize" type="text" style="text-align:center; margin:0px;border:none;width:32px;height:23px" /> 
 
        <span style="padding:5px">items per page</span> 
 
 
    </script> 
 
<script type="text/javascript">         
        $(function () {             
            $("#Grid").ejGrid({ 
                dataSource: data, 
                allowPaging: true,                 
                pageSettings: { pageSize: 10, enableTemplates: true, template: "#template", showDefaults: true }, 
                actionComplete: function (args) { 
                    $(".e-pagercontainer.e-template").css('border-style', 'none'); 
                    if (args.requestType == "refresh") 
                        debugger 
                    $("#pageSize").ejDropDownList({ // here we will change input box into ejDropDownList 
                        width: 55, value: args.model.pageSettings.pageSize, dataSource: dropData, // here we will set dataSource and other properties for ejDropDownList 
                        change: function (args) { // this is change event of ejDropDownList and this event triggers after the value changed 
                            $("#Grid").ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } }); // here we will change pagesize in model 
                        } 
                    }); 
                } 
            }); 
        }); 
 
 
    </script> 

Regards, 
Ragavee U S. 


Joel DSouza
Replied On August 5, 2016 12:35 PM

Thanks Ragavee - that did the job.

I noticed that with your demo on Chrome, the page size selector is not in line with the other pager elements. But if I change the size, then it fixes alignment. Then, as you page through, it goes off alignment again. Any idea what the CSS issue there might be?



Ragavee U S [Syncfusion]
Replied On August 8, 2016 02:18 AM

Hi Joel, 

Thanks for the update. 

We have modified the sample to align the page size dropdown inline with the other pager elements. We have set the display property for the grid .e-pagercontainer class as “inline-flex” and have also set height property for the container. Please find the modified sample below. 


<style> 
        #Grid .e-pagercontainer { 
            display: inline-flex; 
            height: 27px; 
        } 
    </style> 
 
    <script type="text/javascript">     
    $(function () { 
        // the datasource "window.gridData" is referred from jsondata.min.js 
        var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50)); 
        $("#Grid").ejGrid({ 
            . . . 
            actionComplete: function (args) { 
                $(".e-pagercontainer.e-template").css('border-style', 'none'); 
                if (args.requestType == "refresh") 
                    $("#pageSize").ejDropDownList({ // here we will change input box into ejDropDownList 
                        width: 55, height: 27, value: args.model.pageSettings.pageSize, dataSource: dropData, // here we set the height and width properties of ejDropDownList 
                        . . . 
                        } 
                    }); 
            } 
        }); 
    }); 
 
 
    </script> 

Regards, 
Ragavee U S. 


Joel DSouza
Replied On August 9, 2016 04:19 PM

Thank you very much Ragavee - that was very helpful.

Ragavee U S [Syncfusion]
Replied On August 10, 2016 01:15 AM

Hi Joel, 
  
Thanks for your update. 
  
We are happy that your requirement is achieved. 
  
Regards, 
Ragavee U S. 


Henryk
Replied On February 2, 2017 10:19 PM

I'm trying to implement a similar thing but using ASP.NET MVC.   And I'm struggling.  

In my grid definition I have ...

.PageSettings(p=>p.ShowDefaults().EnableTemplates().Template("pagerTemplate"))

The template I have so far is...

<script type="text/x-jsrender" id="template">
    @Html.EJ().DropDownList("pageSizes").Datasource((IEnumerable<WARP.Models.PageSize>)ViewBag.PageSizes).DropDownListFields(df => df.ID("size").Text("name").Value("size"))
</script>

I think I'm missing something as the dropdown is not displaying at all.
I understand I would also need to create an on change event for the dropdown to refresh the grid.

Cheers,
H




Ragavee U S [Syncfusion]
Replied On February 3, 2017 04:14 AM

Hi Henryk, 

We have analyzed the code example that you have shared and found that you have missed out to add the “#” while specifying the template id to the Template property of the Pager. Please refer to the below code example. 

@(Html.EJ().Grid<EditableOrder>("Grid") 
                . . . 
                .PageSettings(p => p.ShowDefaults().EnableTemplates().Template("#pagerTemplate")) 
                . . . 
) 

Also, we cannot define the html helpers within the script template. So, please define the input element in script template and render the element to required control within the actionComplete event of the Grid. Please refer to the below sample. 


Regards, 
Ragavee U S. 


Henryk
Replied On February 5, 2017 06:16 PM

Oh dear :)
Thanks, got it working.

Ragavee U S [Syncfusion]
Replied On February 6, 2017 01:33 AM

Hi Henryk, 

We are happy that the issue is resolved. Please don’t hesitate to call us back, if you have need any further assistance. 

Regards, 
Ragavee U S. 


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.

;