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.
Unfortunately, activation email could not send to your email. Please try again.

Issue with responsive grid when container expands

Thread ID:

Created:

Updated:

Platform:

Replies:

121722 Jan 19,2016 10:54 AM Jan 25,2016 06:17 AM ASP.NET MVC 7
loading
Tags: Grid
Debbie Facey
Asked On January 19, 2016 10:54 AM

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
Replied On January 19, 2016 11:13 AM

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 [Syncfusion]
Replied On January 20, 2016 07:58 AM

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 21st jan 2016.

Regards,
Jayaprakash K.

Debbie Facey
Replied On January 21, 2016 09:27 PM

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 [Syncfusion]
Replied On January 22, 2016 05:07 AM

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
Replied On January 22, 2016 07:15 AM

Apologies... Thanks you.

Megatron
Replied On January 22, 2016 08:56 PM

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 [Syncfusion]
Replied On January 25, 2016 06:17 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;