Some questions

[Leandro Tealdi]

Hi there

I've got some doubts/questions I think is better if I just create a thread with all of them.

1) My first question is about pagination feature. I have enabled this feature this way .PageSettings(page => page.PageSize(20).PageSizes(true)) and a dropdown with the sizes of the page appears. Thats great. But this dropdown only shows values (5,10,12,20). How to change these values? Is there an easy way? Cos I need page sizes like 100, 500. I would like to have my own values in the same dropdown, without coding an extra input.

2) My second question is about frozen column feature. I am following the demo for enabling this feature but I am getting two errors. Attached you will find what chrome console is logging. The first error (column error.png) appears just when the action (grid.frozenColumns = column.value;) takes place, and the second error after the first error, when I use the horizontal scroll.

3) I want to create a "Refresh button" which when you click it, the grid have to return to its original format (order of columns, filtering of data, sorting, etc) Is there an easy way to do that?

4) And finally, I am creating a custom element in the Toolbar, and I want this element to be type=input, since for default custom element is being created as a button. But when I write the code: toolbarItems.Add(new { text = "Example", tooltipText = "Example", type = "input" , id = "example" }); element doesn't display. Can you help me here?

Thanks so much!

Leandro

Attachment: errors_b9d2a0ba.zip

[Renjith Singh Rajendran]

Hi Leandro, 

Thanks for contacting syncfusion support. 

Query 1 : How to change pagesize values? Is there an easy way?  

 

We suggest you to set values to the PageSizes property of Grid. Here we have passed the array of values as an object to the PageSizes property. Please refer the code example below, 

<div> 

    @{ 

        object size; 

        int[] pagesizes = { 10, 20, 30 }; 

        size = pagesizes; 

    } 

    ... 

   @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource) 

    .Columns(col => 

        { 

           ... 

        }) 

    ... 

    .PageSettings(page => page.PageSizes(size)).Render() 

</div> 

Query 2 : frozen column feature. I am following the demo for enabling this feature but I am getting two errors 

 

We are not able to reproduce the reported issue. We have prepared a sample based on our online demo, which could be downloaded from the below link. If you are still facing issue please get back to us with the following details, 

1. Share exact scenario or proper replication procedure.
2. Essential Studio version details and Browser details.
3. Share full Grid code example.
4. Share the stack trace of the issue.
5. If possible share a simple issue reproducing sample or reproduce the issue in the attached sample.

 

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Query 3 : create a "Refresh button" which when you click it, the grid have to return to its original format 

 

To remove the filtering, sorting and reordering applied in the Grid when clicking on a refresh button, we suggest you to use the below mentioned methods of Grid. 

clearFiltering : https://ej2.syncfusion.com/16.1.24/documentation/grid/api-filter.html?lang=typescript#clearfiltering 

clearSorting : https://ej2.syncfusion.com/16.1.24/documentation/grid/api-sort.html?lang=typescript#clearsorting 

 

For Reordering, We suggest you to save the Grid columns model in a local variable at initial load by using a Load event of Grid and assign this  to Grid columns model from the local variable when clicking reset button.  

Please refer the code example below, 

<div> 

    @Html.EJS().Button("refresh").Content("Refresh").Render() 

</div> 

<div> 

   @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource) 

        .Columns(col => 

        { 

            ... 

        }) 

        .AllowFiltering().AllowReordering().AllowSorting().Load("Initialorder").Render() 

</div> 

<script> 

    var columnorder; 

    ... 

   document.getElementById("refresh").addEventListener("click", () => { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.clearFiltering(); 

        grid.clearSorting(); 

        grid.columns = columnorder; 

    }) 

    function Initialorder(args) { 

        var obj = document.getElementById('Grid').ej2_instances[0]; 

        columnorder = obj.columns.map(x => x); 

    } 

</script>    

  

Query 4 : I am creating a custom element in the Toolbar, and I want this element to be type=input 

 

We have analyzed your query and we suggest you to use the toolbar template to achieve your requirement. Please refer the code example below, 

<div> 

   @{ 

        List<object> toolbarItems = new List<object>(); 

        toolbarItems.Add(new { template = "<div><input type='text'></div>" }); 

    } 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource) 

        .Columns(col => 

        { 

            ... 

        }).Toolbar(toolbarItems).Render() 

 

</div> 

We have prepared a sample based on all your above requirement which could be downloaded from the link below, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization966008416 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Leandro Tealdi]

Hi Renjith,

Thank you everything was very useful. The only thing left would be the error with column freeze feature. Below you will find further information.

I think I found what is happening here.. I noticed that in all your examples filter feature is not enabled. In my grid, I’ve got filter feature enabled, and I just disabled it and frozen columns feature start working fine.

When I debug frozen column feature and I set the property to 1,2,3,etc and filter settings are enabled, the execution reaches filter.js file and it is in this line ‘remove(this.parent.getHeaderContent().querySelector('.e-filterbar'));’ where it fails, querySelector doesn’t find anything for that filterbar class.

However, in your example, when I set frozen columns property, execution never reaches that file.

My grid's configuration: 

 .AllowResizing()

                    //.EnablePersistence()

                    .AllowSelection()

                    .AllowExcelExport()

                    .PageSettings(page => page.PageSize(20).PageSizes(size))

                    .AllowPaging()

                    .AllowSorting()

                    .ShowColumnChooser()

                    .FilterSettings(fs => fs.Mode(Syncfusion.EJ2.Grids.FilterBarMode.OnEnter).Type(FilterType.FilterBar))

                    .Toolbar(toolbarItems)

                    .AllowFiltering()

                    .AllowGrouping()

                    .GridLines(GridLine.Both)

                    .AllowTextWrap()

                    .TextWrapSettings(text => text.WrapMode(WrapMode.Header))

                    .AllowReordering()

                    .RowDataBound("paintRows")

                    .QueryCellInfo("checkImageForReleases")

                    .ToolbarClick("toolbarClick")

                    .ContextMenuItems(contextMenuItems)

                    .ContextMenuClick("contextMenuClick")

                    .Render())

Could you try again at your end with this new information?
Thanks,

[Jeevakanth Palaniappan]

Hi Leandro, 

Thanks for the update. 

We have validated your issue and we are unable to reproduce the reported issue at our end while enabling the frozen columns and filtering feature. Since the reported issue was reproduced when we dynamically changed the filterType from one type to other filter type (For eg: change the filterbar type into excel or menu). 

So, could you please confirm whether this is your issue reproducing scenario or not? If issue reproduced with different scenario then please share the exact reproducing details with us. It would be helpful for us to log the defect report with possible scenarios and fix this issue based on it.  

Regards, 

Jeevakanth Palaniappan. 

[Leandro Tealdi]

Hi there. I've got an update, I think I found the bug here...
I saw that I didn't share this part of my code: 

@(Html.EJS().Grid("Releases").Height("300").RowHeight(20).FrozenRows(0).FrozenColumns(0).SelectionSettings(s => s.PersistSelection(true))

                .Columns(col =>

                {

As you can see, when the grid loads, frozen columns is set to 0. That's the bug. Try that at your end please. Because I changed this in the demo sample provided by you, and when I did it the same bug came up in the demo grid.  

Original demo code:

@(Html.EJS().Grid("FrozenGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSelection(false).AllowResizing().Height("410").FrozenRows(2).FrozenColumns(1).Columns(col =>

I changed to: 

@(Html.EJS().Grid("FrozenGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSelection(false).AllowResizing().Height("410").FrozenRows(0).FrozenColumns(0).Columns(col =>

Hope this helps.
Thanks!

[Leandro Tealdi]

I am posting the entire cshtml of grids demo code below:


@using Syncfusion.EJ2

@using Syncfusion.EJ2.Grids

@{

    ViewBag.Title = "ReleasesNew";

    List<object> contextMenuItems = new List<object>();

    contextMenuItems.Add("SortAscending");

    contextMenuItems.Add("SortDescending");

    contextMenuItems.Add(new { text = "Column Freeze", target = ".e-headercell", id = "freezeColumn" });

    List<object> toolbarItems = new List<object>();

    toolbarItems.Add("Search");

    toolbarItems.Add("ColumnChooser");

    toolbarItems.Add("ExcelExport");

    toolbarItems.Add(new { text = "Expand Groups", id = "expandGroups" }); //prefixIcon = ".e-expand",

    toolbarItems.Add(new { text = "Collapse Groups", id = "collapseGroups" }); //prefixIcon = ".e-collapse"

                                                                               //toolbarItems.Add(new { text = "Enable Persistence", tooltipText = "Enable persistence", id = "enablePersistence" });

                                                                               //toolbarItems.Add(new { text = "Disable Persistence", tooltipText = "Disable persistence", id = "disablePersistence" });

    object size;

    int[] pagesizes = { 100, 500, 1000 };

    size = pagesizes;

}

@section ControlsSection{

    <div class="col-lg-8 control-section">

        <div class="control-wrapper">

            <div class="control-section">

                @(Html.EJS().Grid("FrozenGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSelection(false).AllowResizing().Height("410").FrozenRows(0).FrozenColumns(0).Columns(col =>

            {

                col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

                col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

                col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

                col.Field("CustomerID").HeaderText("Customer Name").Width("200").Add();

                col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();

                col.Field("ShippedDate").HeaderText("Shipped Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

                col.Field("ShipCity").HeaderText("Ship City").Width("200").Add();

                col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add();

                col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();

            }).AllowResizing()

                                //.EnablePersistence()

                                .AllowSelection()

                                .AllowExcelExport()

                                .PageSettings(page => page.PageSize(20).PageSizes(size))

                                .AllowPaging()

                                .AllowSorting()

                                .ShowColumnChooser()

                                .FilterSettings(fs => fs.Mode(Syncfusion.EJ2.Grids.FilterBarMode.OnEnter).Type(FilterType.FilterBar))

                                .Toolbar(toolbarItems)

                                .AllowFiltering()

                                .AllowGrouping()

                                .GridLines(GridLine.Both)

                                .AllowTextWrap()

                                .TextWrapSettings(text => text.WrapMode(WrapMode.Header))

                                .AllowReordering()

                                //.RowDataBound("paintRows")

                                //.QueryCellInfo("checkImageForReleases")

                                //.ToolbarClick("toolbarClick")

                                //.ContextMenuItems(contextMenuItems)

                                //.ContextMenuClick("contextMenuClick")

                                .Render())

            </div>

        </div>

    </div>

    <div class="col-lg-4 property-section">

        <table id="property" title="Properties" style="width: 100%;">

            <tr>

                <td class="left-side">Frozen Rows</td>

                <td>

                    @Html.EJS().NumericTextBox("rows").Min(1).Max(5).Value(2).Render()

                </td>

            </tr>

            <tr>

                <td class="left-side">Frozen Rows</td>

                <td>

                    @Html.EJS().NumericTextBox("columns").Min(1).Max(2).Value(1).Render()

                </td>

            </tr>

            <tr>

                <td class="left-side"></td>

                <td>

                    @Html.EJS().Button("set").Content("SET").Render()

                </td>

            </tr>

        </table>

    </div>

    <script>

        document.getElementById("set").addEventListener("click", () => {

            var grid = document.getElementById("FrozenGrid").ej2_instances[0],

                rows = document.getElementById("rows").ej2_instances[0],

                columns = document.getElementById("columns").ej2_instances[0];

            grid.frozenColumns = columns.value;

            grid.frozenRows = rows.value;

        })

    </script>

}

@section ActionDescription{

    <div id="action-description">

        <p>

            This sample demonstrates the frozen rows and columns feature of the Grid. Scroll the movable content vertically/horizontally to view the frozen rows/columns

            with the content.

        </p>

    </div>

}

@section Description{

    <div id="description">

        <p>

            The freezing feature enables the user to freeze certain rows/columns to scroll remaining movable content. This can be achieved by setting <b>FrozenRows</b> and <b>FrozenColumns</b> property.

        </p>

        <p>

            In this demo sample, the first column and two rows are set to frozen by using the  <code>FrozenRows</code>  and

            <code>FrozenColumns</code>  properties.

        </p>

    </div>

}

[Renjith Singh Rajendran]

Hi Leandro, 

We have tried to reproduce the issue by modifying the sample from our previous update based on the Grid codes you have shared with us. But we are not able to reproduce the reported issue. No script error is shown in the console window. Please download the modified sample from the link below, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-648862841 

We have also prepared a video demonstration of issue not reproducing, please download it from the link below, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/frozen_error-1470473164 

If you still face the issue, please share a simple issue reproducing sample or reproduce the issue in the above attached sample. 

Regards, 

Renjith Singh Rajendran. 

[Leandro Tealdi]

Hi, Ok so I am attaching here the demo provided by Syncfusion once it gets installed. I have modified this version the cshtml of FrozenColumns feature. The link would be: /Grid/FrozenRows#/material. I am getting the error reported in this demo, so now you should be able to reproduce it.

Hope it helps,
Thanks!

Leandro

Attachment: Demo_92220fc1.zip

[Renjith Singh Rajendran]

Hi Leandro, 

We have created a new incident for this forum. Please follow up the incident ID 201979 for future updates on this. 

Regards, 

Renjith Singh Rajendran.