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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Get and set latest Pagination size from Cookies for Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142387 Jan 30,2019 10:02 AM UTC Feb 18,2019 03:40 AM UTC ASP.NET MVC 5
loading
Tags: Grid
Vaibhav More
Asked On January 30, 2019 10:02 AM UTC

1. Have grid with pagesize dropdown with values [10,20,25,50,100].
By default it should be set to 10 and when user chooses another value from drop down, I want to save that value in cookie and whenever user opens this grid it should read that cookie value and set page size to it.

2. Am using AllowResizeToFit() for the grid. Whenever all columns in the grid has some values it loads properly. But if entire column doesn't have values in that page,UI distortion happens and columns are shrinked and titles are also not visible.
Is there a way set minimum width to column along with AllowResizeToFit()


Please do let me know if any queries/answers/suggestions.


Vignesh Natarajan [Syncfusion]
Replied On January 31, 2019 12:37 PM UTC

Hi Vaibhav, 
 
Thanks for contacting Syncfusion Support. 
 
Query#1 :- whenever user opens this grid it should read that cookie value and set page size to it:- 
 
We have checked your query and as per your requirement to save the pageSize on document.cookie and update while on rendering the Grid.  In the change event of the dropdownList we have saved the pageSize on document.cookie. After that, while on Create event of ejGrid, we have updated the cookie value on setModel option of the Grid to maintain the selected pageSize on rendering the Grid. 
 
Please refer to the code example:- 
 
     <div> 
          <input type="text" id="pager" /> 
        </div> 
   
@(Html.EJ().Grid<object>("Grid") 
                 .Datasource(datasource => datasource.Json((IEnumerable<object>)ViewBag.dataSource).Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                 .AllowPaging() 
                 .ClientSideEvents(events => 
                   { 
                       events.Create("create") 
                   }) 
                    .Columns(col => 
                    { 
                        col.Field("OrderID").IsPrimaryKey(true).Add(); 
                         .    .    . 
                    }) 
    ) 
 
 
</div> 
<script> 
        var pagerData = [ 
            { text: "10", value: 10 }, 
            { text: "20", value: 20 }, 
            { text: "30", value: 30 }, 
            { text: "40", value: 40 }, 
        ]; 
 
        function create(args) { 
            var gridObj = $("#Grid").ejGrid("instance"); 
            var pagerCookies = document.cookie.match("pageSize="); 
            if (!ej.isNullOrUndefined(pagerCookies)) { 
                var pageSize = parseInt(document.cookie.match("pageSize=").input.split("=")[1]); 
                gridObj.option({ "pageSettings": { pageSize: pageSize } });    //update pageSize on rendering  
            } 
 
            $('#pager').ejDropDownList({ 
                change: "change", 
                value: this.model.pageSettings.pageSize, 
                dataSource: pagerData 
            }); 
        } 
        function change(args) { 
           var gridObj = $("#Grid").ejGrid("instance"); 
            gridObj.option({ "pageSettings": { pageSize: parseInt(args.text) } }); 
            var pageSize = parseInt(args.text); 
            var pageSize = "pageSize" + "=" + pageSize; 
            document.cookie = pageSize;   //save the pageSize in document.cookie        
        } 
    } 
    
</script> 
 
Refer to the API Link 
 
 
 
Query#2:- Is there a way set minimum width to column along with AllowResizeToFit() 
 
When we enable AllowResizeToFit property without setting column width, it will automatically fit according to the column’s content to facilitate full visibility of data in all the Grid rows which is the behavior. If you want to set the width for the columns you can use Width property of the Grid or else set CommonWidth  property to set commonwidth for all columns 
 
Please refer to the documentation Link:- 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Vignesh Natarajan. 
 


Vaibhav More
Replied On February 11, 2019 08:34 AM UTC

Thanks for your reply.

I tried your code. It's working fine.

I find that, you are providing separate drop down for Pagination values and not the one with grid.
I wanted to handle events change on the drop down provided in grid itself as providing the new drop down will be out of grid.
Eg.
 .PageSettings(p =>
            {
                p.PageSizeList(new List<int>() { 10, 25, 50, 100 });
                p.PageSize(10);
            })

Can we handle expected events on the change drop down provided in grid itself?

Vignesh Natarajan [Syncfusion]
Replied On February 12, 2019 03:58 AM UTC

Hi Vaibhav, 
 
Thanks for the update. 
 
Query#:- I wanted to handle events change on the drop down provided in grid itself as providing the new drop down will be out of grid. 
 
As per your requirement, we have placed the pageSize dropdown inside the Grid using default PageSizeList of PageSettings property. In the Create event of the Grid, we have find the pager and created instance for pager. By using pageSizeSelected event of the ejPager, we have get the selected pageSize and saved on document.cookie and also maintain the selected pageSize on rendering the Grid.  
 
Please refer to the code example:- 
 
@(Html.EJ().Grid<object>("Grid") 
       .Datasource(datasource => datasource.Json((IEnumerable<object>)ViewBag.dataSource).Adaptor(AdaptorType.RemoteSaveAdaptor)) 
       .AllowPaging() 
       .PageSettings(p =>  { 
              p.PageSizeList(new List<int>() { 10, 25, 50, 100 }); 
              p.PageSize(10); 
         }) 
       .ClientSideEvents(events =>{ 
               events.Create("create") 
 
         }) 
         .Columns(col => { 
              col.Field("OrderID").IsPrimaryKey(true).Add(); 
                 .    .    . 
     }) 
) 
 
<script type="text/javascript"> 
    function create(args) { 
        var gridObj = $("#Grid").ejGrid("instance"); 
        var pagerCookies = document.cookie.match("pageSize="); 
        if (!ej.isNullOrUndefined(pagerCookies)) { 
            var pageSize = parseInt(document.cookie.match("pageSize=").input.split("=")[1]); 
            gridObj.option({ "pageSettings": { pageSize: pageSize } }); 
        } 
 
        this.element.find(".e-pager").ejPager({ 
            pageSizeSelected: function (args) { 
                var gridObj = $("#Grid").ejGrid("instance"); 
                gridObj.option({ "pageSettings": { pageSize: args.pageSize } }); 
                var pageSize = args.pageSize; 
                var pageSize = "pageSize" + "=" + pageSize; 
                document.cookie = pageSize; 
            } 
        }); 
 
    } 
</script> 
 
 
Refer to the API Link:- 
 
Please get back to us  if you have further queries. 
 
Regards, 
Vignesh Natarajan 
 


Vaibhav More
Replied On February 15, 2019 10:17 AM UTC

Thanks for the help.
It works fine for me.

Vignesh Natarajan [Syncfusion]
Replied On February 18, 2019 03:40 AM UTC

Hi Vaibhav, 
 
Thanks for the update. 
 
We are glad to hear that your query has been resolved by our solution.  
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon