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

Pager & PageSize DropDown

Hi,

The company I am working for needs to move from an OpenSource grid to one with Commercial Backing and better Filtering/Grouping.

SyncFusion has been chosen on the short list and while it provides everything we need, I am unable to any options to modify the filter.

Is it easy from the HtmlHelper to have a Drop-down on the Pager to select a pagesize and optionally show all the pages? We would be using the grid with InLine editing mode enabled. NOTE: I understand all pages can be calculated but would be a better UX if the option said All.

For Example Page Sizes: 10, 25, 50, ALL

Thanks in advance.



5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 10, 2017 09:42 AM UTC

Hi Wayne,  
 
Thanks for contacting Syncfusion Support.  
 
Query #1: I am unable to any options to modify the filter. 
 
By default, Grid provides an option to render the Excel Filter, Menu Filter and Filterbar (or templates) and they are helpful to the filter each column individually. These features will also provide an option to clear the applied filters. Refer to the following Sample demos and Help Documents.  
 
 
You can also programmatically, filter/clear the filters in the Grid using the filterColumn and clearFiltering methods. Refer to the APIs and Code example. 
 
 
<ej-button id="btn" text="filter" click="onClick" /> 
 
<ej-grid id="Grid" allow-paging="true" allow-filtering="true"> 
 
</ej-grid> 
 
<script> 
    function onClick(args) { 
        var gridObj = $("#Grid").ejGrid("instance"); 
        if (val == "clearfiltering") 
            gridObj.clearFiltering(); 
        else 
            gridObj.filterColumn("CustomerID", "VINET", "equal"); 
    } 
</script> 
 
Query #2: Drop-down on the Pager to select a pagesize 
 
We have already discussed about “Placing the Dropdown in the Pager which controls Page Size of the Grid”, in the following KB. 
 
 
Please follow the code example for the Asp.Net Core.  
 
<script type="text/x-jsrender" id="template"> 
    <div class="e-pagercontainer"> 
        <input type="text" id="pager" /> 
    </div> 
</script> 
 
<ej-grid id="Grid" datasource="ViewBag.dataSource" allow-paging="true" allow-filtering="true" databound="dataBound"> 
    <e-page-settings enable-templates="true" show-defaults="true" template="#template"/> 
         . . . 
</ej-grid> 
 
<script> 
    var pagerData = [ 
                { text: "10", value: 10 }, 
                     . . . 
    ]; 
    function dataBound(args) { 
        $('#pager').ejDropDownList({ 
            change: "change", 
            value: this.model.pageSettings.pageSize, 
            dataSource: pagerData, 
            targetID: "pagesize" 
        }); 
    } 
    function change(args) { 
        var gridObj = $("#Grid").ejGrid("instance"); 
        gridObj.option({ "pageSettings": { pageSize: parseInt(args.text) } }); 
        gridObj.getPager().find("input").ejDropDownList({ 
            selectedIndex: args.itemId, 
            change: "change", 
            dataSource: pagerData 
        }); 
    } 
</script> 
 
Refer to the following API References.  
 
 
Regards,  
Seeni Sakthi Kumar S. 



WM Wayne Mather May 11, 2017 06:30 AM UTC

Hi,

Thanks for this. I struggled to get it working with the TagHelpers. Maybe you could update your sample on how to attach the event?

The following Fluent Interface did help:

 @{
            Html.EJ()
               .DataManager("FlatData")
               .Json((IEnumerable<Location>) ViewBag.datasource)
               .UpdateURL("NormalUpdate")
               .InsertURL("NormalInsert")
               .RemoveURL("NormalDelete")
               .Adaptor(AdaptorType.JsonAdaptor)
               .Render();
        }

        @{
            Html.EJ().Grid<Location>("Grid")
                .DataManagerID("FlatData")
                .AllowPaging()
                .AllowSorting()
                .AllowMultiSorting()
                .AllowFiltering()

                .FilterSettings(filterOption =>
                {
                    filterOption.FilterType(FilterType.Excel);
                })

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

                .ToolbarSettings(toolbar =>
                {
                    toolbar.ShowToolbar(true);
                    toolbar.ToolbarItems(builder =>
                    {
                        builder.AddTool(ToolBarItems.Add);
                        builder.AddTool(ToolBarItems.Edit);
                        builder.AddTool(ToolBarItems.Update);
                        builder.AddTool(ToolBarItems.Cancel);
                        builder.AddTool(ToolBarItems.ExcelExport);
                    });
                })
           

            .EditSettings(settings =>
            {
                settings.AllowAdding();
                settings.AllowEditing();
                settings.AllowDeleting();
                settings.EditMode(EditMode.Normal);
            })

            .Columns(columns =>
            {
                columns.Field("LocationId").IsPrimaryKey(true).HeaderText("Location Id").Add();
                columns.Field("Name").HeaderText("Name").Add();
                columns.Field("LocationRegionId").HeaderText("Location Region").EditType(EditingType.Dropdown).Add();
                columns.Field("LocationTypeId").HeaderText("Location Type").EditType(EditingType.Dropdown).Add();

            })

            .ClientSideEvents(events => { events.DataBound("dataBound"); }).Render();
        }

Unfortunately the dropdown was not aligned with the pager but that is cosmetics and fixed by using the ejDropDownList() api to change height and width.

Be aware this is a POC grid and I have not implemented the full CRUD capability and my Excel export fails but that is a separate problem.

Thanks for the information and for realizing I also need to look at the KB articles.




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 12, 2017 11:27 AM UTC

 Hi Wayne, 

We have checked your code example, and created sample as per your requirement in the razor code which can be downloaded from the below location.  In this sample, within the DataBound event we have rendered the DropDownList  and  in the change event, update the pageSize of the Grid through set model. 


Please refer to the code example:- 

<script type="text/x-jsrender" id="template"> 
    <div class="e-pagercontainer"> 
        <input type="text" id="pager" /> 
    </div> 
</script> 
 
 
   @{Html.EJ().Grid<WebApplication8.Controllers.HomeController.Orders>("Editing") 
        .Datasource(ds => ds.URL(@Url.Action("DataSource")).UpdateURL("/Home/CellEditUpdate").InsertURL("/Home/CellEditInsert").RemoveURL("/Home/CellEditDelete").Adaptor(AdaptorType.UrlAdaptor)) 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })                                                                                    
        .PageSettings(Page => { Page.EnableTemplates().Template("#template").ShowDefaults(true); }) 
        .ClientSideEvents(eve => eve.DataBound("dataBound")) 
         .ToolbarSettings(toolbar => 
               { 
                   toolbar.ShowToolbar().ToolbarItems(items => 
                      { 
                           items.AddTool(ToolBarItems.Add); 
                           items.AddTool(ToolBarItems.Edit); 
                           items.AddTool(ToolBarItems.Delete); 
                           items.AddTool(ToolBarItems.Update); 
                           items.AddTool(ToolBarItems.Cancel); 
                        }); 
                }) 
           .AllowPaging() 
           .AllowFiltering() 
            .Columns(col => 
                 { 
                       
                    .  .   . 
 
         }).Render(); 
 
       } 
 
<script type="text/javascript"> 
 
    var pagerData = [  
                { text: "10", value: 10 }, 
                { text: "9", value: 9 }, 
                { text: "8", value: 8 }, 
                { text: "7", value: 7 }, 
 
 
    ]; 
    function dataBound(args) { 
        $('#pager').ejDropDownList({ 
            change: "change", 
            value: this.model.pageSettings.pageSize, 
            dataSource: pagerData, 
            targetID: "pagesize" 
        }); 
    } 
    function change(args) { 
        var gridObj = $("#Editing").ejGrid("instance"); 
        gridObj.option({ "pageSettings": { pageSize: parseInt(args.text) } }); 
        gridObj.getPager().find("input").ejDropDownList({ 
            selectedIndex: args.itemId, 
            change: "change", 
            dataSource: pagerData 
        }); 
    } 
</script> 

 

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

Regards, 

Farveen sulthana T 



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 12, 2017 12:36 PM UTC

Hi Stephan, 

We have checked your code example but we are unable to reproduce the reported problem at our end. We have created sample as per your requirement in which we have applied editType as DatePicker and format to the OrderDate column. Also we have gave validation to that column. Please refer to the attached sample which can be downloaded from the below location. 


Please refer to the code example:- 

@(Html.EJ().Grid<object>("Grid") 
           .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("CellEditUpdate").InsertURL("CellEditInsert").RemoveURL("CellEditDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
          .AllowPaging() 
           .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
           .ToolbarSettings(toolbar => 
                 { 
                      toolbar.ShowToolbar().ToolbarItems(items => 
                         { 
                               items.AddTool(ToolBarItems.Add); 
                               items.AddTool(ToolBarItems.Edit); 
                               items.AddTool(ToolBarItems.Delete); 
                               items.AddTool(ToolBarItems.Update); 
                               items.AddTool(ToolBarItems.Cancel); 
                           }); 
               }) 
          
          .Columns(col => 
              { 
                  col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 
                  col.Field("CustomerID").HeaderText("Customer ID").Add(); 
                  col.Field("OrderDate").HeaderText("Order Date").EditType(EditingType.Datepicker).ValidationRules(v => v.AddRule("required",true)).Format("{0:dd/MM/yyyy}").Add();   
                  col.Field("ShipCity").HeaderText("Ship City").Add(); 
                  col.Field("ShipCountry").HeaderText("Ship Country").Add(); 
              })) 
     

We need more information to find the cause of the issue. Could you please share us the following details with us. 

1. In your code example, you doesn’t mentioned validation for date type column. Are you expecting validation for date column. 

2.Ellaborate your requirement/ issue. 

3. Screenshot/Video regarding the issue. 

4. Replication procedure and replicate the issue in the above provided sample and revert us back. 

5. Stacktrace of the issue if any script error occurs. 

The provided details will helps us to analyze and provide you solution as early as possible.  

Regards, 

Farveen sulthana T


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 12, 2017 12:45 PM UTC

Hi Wayne, 
  
Please ignore the previous mail. 
  
Regards, 
  
Farveen sulthana T 
  


Loader.
Up arrow icon