Dynamic (calculated) grid page size

[Edwin Kurniawan]

Hello, syncfusion admin. I've some issues that i would like to ask. I am using the latest essential studio ver. as is this thread date.1. I've been trying to calculate grid pagesize based on remaining grid height / row height with javascript, and then set the calculated pagesize through syntax : $('#grid').ejGrid('instance').option('pageSettings.pageSize', 10); on document ready.But because my grid is using UrlAdaptor, 2 read request was sent to server. (1 the default request, 1 request after setting calculated page size).My question is: Can i prevent the double request (stop the default request) while still using UrlAdaptor and without using offline property?2. When i want to print grid content, saving change confirm dialog always get called (the grid is not in editing mode), i found that this behavior only happen if property [showDeleteConfirmDialog] is set to true. Is this behavior as expected?3. I found a bug (at least to me) if grid property: [enableTouch] is set to false, while using column type checkbox (for multiselect), the header checkbox is misbehaving when clicked. It behave the opposite way it suppose to be

[Jayaprakash Kamaraj]

Hi Edwin, 

Thank you for contacting Syncfusion support. 

Before proceeding please share us the following details. 

1. In which scenario you want to update pageSize in Grid?
2. In grid row height will be same for all the rows. So, please tell me you have enabled allowTextWrap property or any other properties in Grid?
3. Grid rendering code example both client and server.
4. Share the video or screenshot to show the issue
5. Essential studio and browser details.
6. Share your expected output image.

Regards, 

                                                                             

Jayaprakash K. 

  

 

[Edwin Kurniawan]

1. In which scenario you want to update pageSize in Grid?

- I want to update page size on document ready, so the grid will contain appropriate row count based on remaining grid height divided (:) row height

2. In grid row height will be same for all the rows. So, please tell me you have enabled allowTextWrap property or any other properties in Grid?

- To make sure the row height are the same, i enabled allowTextWrap but only for header which will not affect content

3. Grid rendering code example both client and server.

> Razor:

@Html.EJ().DataManager("MyGridDM").URL(Url.Action("ItemRead")).RemoveURL(Url.Action("ItemDelete")).Adaptor(AdaptorType.UrlAdaptor)

@Html.EJ().Grid<T>("MyGrid")

                .Locale("id-ID")

                .DataManagerID("MyGridDM")

                .CssClass("no-border")

                .ShowColumnChooser()

                .GridLines(Syncfusion.JavaScript.GridLines.Horizontal)

                .EnableHeaderHover(false).EnableTouch(true)

                .AllowSelection(true).SelectionSettings(s => s.SelectionMode(m => m.AddMode(Syncfusion.JavaScript.SelectionMode.Row))).SelectionType(Syncfusion.JavaScript.SelectionType.Multiple)

                .AllowSearching(true)

                .AllowTextWrap(true).TextWrapSettings(t => t.WrapMode(Syncfusion.JavaScript.WrapMode.Header)) //only header

                .AllowPaging(true).PageSettings(page => { page.PageSize(15); page.PrintMode(Syncfusion.JavaScript.PrintMode.CurrentPage); })

                .AllowFiltering(false).FilterSettings(d => d.FilterType(Syncfusion.JavaScript.FilterType.Menu))

                .AllowSorting(true).AllowMultiSorting()

                .AllowGrouping(false).GroupSettings(group => { group.EnableDropAreaAutoSizing(true); })

                .AllowResizing(true).ResizeSettings(rz => rz.ResizeMode(Syncfusion.JavaScript.ResizeMode.Normal))

                .AllowReordering(false)

                .ContextMenuSettings(contextMenu => { contextMenu.EnableContextMenu(false); })

                .MinWidth(350)

                .IsResponsive(true).AllowScrolling(true).ScrollSettings(s => s.Height("auto"))

                .EditSettings(e => {

                    e.AllowAdding(true).ShowConfirmDialog(false)

                    .AllowEditing(true).EditMode(Syncfusion.JavaScript.EditMode.Normal).AllowEditOnDblClick(false)

                    .AllowDeleting(true).ShowDeleteConfirmDialog(true);

                })

                .ToolbarSettings(toolbar =>

                {

                    toolbar.ShowToolbar(false);

                }).Column(col => { ... })

> Javascript:

$(function () {

var calcHeight = 300, pageSize = 10;

//do some calculation such as getting document height minus all grid's content parent & sibling element height (exclude grid content)

// calcHeight = ...

//apply calculated height to grid

$('#MyGrid .e-gridcontent').height(calcHeight);

//calculate pageSize 

pageSize  = calcHeight / $('#SFGridItem').ejGrid('getRowHeight');

//apply calculated pageSize to grid

$('#SFGridItem').ejGrid('option', 'pageSettings.pageSize', pageSize); // -> trigger second data request, 

//first data request already done automaticly because of data manager's UrlAdaptor behavior *this is the one that i want to prevent to save bandwidth*

}

4. Share the video or screenshot to show the issue

    Dunno how to make one vid, can't really described by a screenshot, but i hope you get my intention

5. Essential studio and browser details.

    Essential Studio Enterprise Edition - Community license ver 15.2.0.43, browser Firefox ver 53.0.3 (32-bit)

6. Share your expected output image.

- My expected output is to prevent the first default data request (see bold text above), so no image related

Other question left:

2. When i want to print grid content, saving change confirm dialog always get called (the grid is not in editing mode), i found that this behavior only happen if property [showDeleteConfirmDialog] is set to true. 

Is this behavior as expected?

3. I found a bug (at least to me) if grid property: [enableTouch] is set to false, while using column type checkbox (for multiselect), the header checkbox is misbehaving when clicked. It behave the opposite way it suppose to be

[Edwin Kurniawan]

Up thread

[Farveen Sulthana Thameeztheen Basha]

Hi Edwin, 

1. Can i prevent the double request (stop the default request) while still using UrlAdaptor and without using offline property 

  

You can’t prevent the request while updating the pageSize. When we bind large number of records to Grid, by default ,it will send request to serverside  to take the records according to the pageSize of the Grid. So we doesn’t able to prevent request sending to the serverside. 

2.  When i want to print grid content, saving change confirm dialog always get called (the grid is not in editing mode), i found that this behavior only happen if property [showDeleteConfirmDialog] is set to true. 

 

We are able to reproduce your  reported problem at our end in version 15.2.0.43. This issue has been fixed in our latest version 15.2.0.46.  You can upgrade into latest version otherwise we can also provide patch in your version. 

3. I found a bug (at least to me) if grid property: [enableTouch] is set to false, while using column type checkbox (for multiselect), the header checkbox is misbehaving when clicked.  

 We have analyzed your query and we are able to reproduce the reported issue from our end. We already confirmed the issue “Enable touch in Grid checkboxselection sample behave as invertly” is a defect and logged as a defect report. The fix for this issue is estimated to be available on 18th July, 2017 and it will be included in Volume 3, 2017 which has been scheduled to be rolled out at the end of July 2017.  

 

Regards, 

 

Farveen sulthana T 

 

[Edwin Kurniawan]

Thx for the answer Farveen. I understand that every page size change occured will causes changes in select query. But i only want to prevent the first time request only (after grid and data manager has been initialized) (grid is rendered using asp net razor syntax though)Btw when i'm using firefox to edit my reply in this forum (not happen when using chrome), it seems to omitted new line char, causing the reply become hard to read.

[Farveen Sulthana Thameeztheen Basha]

Hi Edwin, 

For your requirement, you can prevent the request sending to server side by updating the dataSource along with the pageSize. Initially you can set the dataSource as empty and update the dataSource through setModel like updating pageSize could prevent the request sending to the serverside. Thus you can prevent the post sending to the server dual times to server. 

Regards, 

Farveen sulthana T