Issue with responsive grid when container expands

[Debbie Facey]

I have a responsive grid on a page with a collapsible side menu. On page load, the grid renders ok, by filling it's parent container as expected. However, when I collapse the side menu and this increase the size of the grid's parent container,  the header expands to fit but the content and horizontal scrollbar do not. If i render the page the side menu already collapsed, but then expands the menu, the grid and scrollbar resizes  as expected in chrome but seems to have issues in firefox.

So the problem seems to be expanding the grid to fit the resized container. Please see attached image.

Is there a work around for this or something that I am missing? Can I re-render the grid somehow the container is resized? My current grid configuration is below:

Html.EJ().Grid<MyModel>("grid")
            .Datasource(ds => ds.URL(Url.Action("BatchDataSource", "Model")).BatchURL(Url.Action("BatchUpdate", "Premium")).Adaptor(AdaptorType.UrlAdaptor))
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); })
            .ToolbarSettings(toolbar => { toolbar.ShowToolbar().CustomToolbarItems(GetGridCustomToolbarItems()); })
            .AllowResizing().AllowResizeToFit().AllowTextWrap().AllowPaging().AllowSearching().AllowSelection().SelectionType(SelectionType.Multiple)
            .IsResponsive(true).EnableResponsiveRow(false)
            .ScrollSettings(scroll => { scroll.Height(400); })
            .MinWidth(600)
            .Columns(col =>
            {
                ...
            })
            .ClientSideEvents(e =>
            {
               ...
            })

Attachment: grid_with_menu_collapsed_8063f97d.zip

[Debbie Facey]

On further investigation. It seems resizing of the grid works as expected when the window is resized. However, when the side menu is expanded and collapsed, the left margin of the grid container is increased and decreased accordingly, effectively increases or decreases the content size of the grid's container. It is this scenario that the responsiveness of the grid breaks down.

Hope this helps

[Jayaprakash Kamaraj]

Hi Debbie,
We have analyzed your requirement and achieved using set dimension method in window.onresize event .we need to give this code after scriptManager(_layout.cshtml file) to work like successor of default window resize event in Grid. Please refer to the below code example and sample.
Code example:

    @Html.EJ().ScriptManager()

    @RenderSection("scripts", required: false)

    <script type="text/javascript">

        $(function () {

            $('#page').css("min-height", $(document).height());

            window.onresize = function () {

                 for (i = 1; i < $(".e-grid").length;i++){

                var childid = $(".e-grid").eq(i).attr('id');

                var gridobj = $("#" +childid).ejGrid("instance")

                gridobj.setDimension(gridobj.element.parent().innerHeight(), gridobj.element.parent().innerWidth());

                gridobj.getContent().ejScroller("refresh");

                 }

            }

        });
    </script>

Sample: http://www.syncfusion.com/downloads/support/forum/121722/ze/SyncfusionMvcApplication38682239631
We have faced another issue while  window resize with expandable grid, expandable scroller auto scroll when click the scroller for child grid. We need to analysis this behavior and update you on 21^st jan 2016.

Regards,
Jayaprakash K.

[Debbie Facey]

The highlighted code worked. Thanks. 

I was looking for a method in the docs to change the width of the grid but couldn't find one. Turns out it exits but just not documented. 

Please consider updating the docs. Thanks again.

[Jayaprakash Kamaraj]

Hi Debbie,

Thanks for the update.

We already have help documentation for setDimension method. Please refer to the below link.

Link: http://help.syncfusion.com/js/api/ejgrid#methods:dimension

We are able to reproduce the issue while window resize with expandable grid, expandable scroller auto scroll when clicking the scroller for child grid. So, a support incident has been created under your account to resolve the issue. Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,
Jayaprakash K.

[Debbie Facey]

Apologies... Thanks you.

[Megatron]

Hi, I could not find the dimension method in the MVC documentation to setup inside razr view.

http://help.syncfusion.com/aspnetmvc/grid/responsive - shows mobile rendering for below 321 px, but not parent container re-sizing information.

1. Do I need to set both rows & grid as responsive, how is this handled inside ASP MVC rzr.
2. Next I see the scriptmanager before rendersection, does this mean the scriptmanager has to be in head?

thanks

[Sellappandi Ramu]

Hi Debbie,

Thanks for the update.

Please find the response in below table.

Query	Response
1. I could not find the dimension method in the MVC documentation to setup inside razr view	setDimension is an javascript method. So we have provided under the javascript API reference.
2. Shows mobile rendering for below 321 px, but not parent container re-sizing information.	We have created the improvement task for responsive re-sizing online help documentation.
3. Do I need to set both rows & grid as responsive, how is this handled inside ASP MVC razor	IsResponsive property for both height and width of the grid control. So no need to set separately to grid rows.
4. Next I see the scriptmanager before rendersection, does this mean the scriptmanager has to be in head?	No, scriptmanager method is recommended in registering Syncfusion.Mvc components script files. The ScriptManager() method should be placed after all the components on the page. You need to add it before the closing body tag in the _Layout.cshtml file. Please refer to the online help documentation, Document: Link

Regards,
Sellappandi R