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. Image for the cookie policy date
close icon

Get and set latest Pagination size from Cookies for Grid

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.


5 Replies

VN Vignesh Natarajan Syncfusion Team 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. 
 



VM Vaibhav More 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?


VN Vignesh Natarajan Syncfusion Team 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 
 



VM Vaibhav More February 15, 2019 10:17 AM UTC

Thanks for the help.
It works fine for me.


VN Vignesh Natarajan Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon