Grid in Tab Control in Partial View do nor resize automatically

[Santosh Telwane]

Dear Sir,

We are opening a dialog box with Partial View in it

In Partial View we have Suncfusion Tab Control With Suncfusion Grids on each Page

On First page Grids is getting shown properly but on other pages although grid is shown it is not resizing automatically. On clicking on column border it gets properly resized and displayed

Please advice how we can solve above problem?

Regards

Santosh

[Seeni Sakthi Kumar Seeni Raj]

Hi Santosh,

We are unable to reproduce the issue at our end.

We have prepared a sample with the provided information that can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123416/ze/Dlg_Tab_Grid-207367943.zip

Could you please provide the following information which would be helpful to analyze the issue and provide you solution as early as possible.

1)      Share the view page or code example of Grid and Tab.

2)      If possible modify the attached sample and replicate the issue.

3)      Exact replication procedure for the issue

4)      Share the screenshot for the issue.

5)      Which version of Essential studio are you using ?

6)      Have you given width to columns? Whether it has been given for some of the columns or all the columns?

7)      You have quoted that the columns were not resize. It means whether the columns were hidden or reduced width?

Regards,
Seeni Sakthi Kumar S.

[Santosh Telwane]

Dear Sir,

We are using jQuery Dialog Box to Display the Partial View

Here are the screen Shots

Grid Properly Shown on First Page

On Second Page Grid gets shown with contents but the Size is very small

Third Page when we click on the Column resizer it gets auto size

Also please check the Details.cshtml for view contents

Attachment: GridResizeProblem_612e3522.zip

[Santosh Telwane]

5) Which version of Essential studio are you using ?
Ans: 13.4.0.53

6)  Have you given width to columns? Whether it has been given for some of the columns or all the columns?
Ans: I have given width as .Width(0) for all Columns

7)      You have quoted that the columns were not resize. It means whether the columns were hidden or reduced width?
Ans: Column are Of Reduced with

[Seeni Sakthi Kumar Seeni Raj]

Hi Santosh,

We are able to reproduce the issue “While placing Responsive Grid inside a tab, Grid content and header will misalign” and it has been fixed in current version 13.4.0.63. So we suggest to upgrade to our latest version. Please follow the below steps to upgrade 13.4.0.63.

Please follow the below steps to upgrade 13.4.0.63.

1)            Download and install the Essential Studio v13.4.0.63 from the below link. 
http://www.syncfusion.com/forums/123314/essential-studio-2015-volume-4-service-pack-release-v13-4-0-63-available-for-download

2)            Replace the Syncfusion dlls, scripts, and CSS in your project from the following location.

            Scripts and CSS: C:\Program Files (x86)\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets
            Dlls: C:\Program Files (x86)\Syncfusion\Essential Studio\ XX.X.X.XX \Assemblies

Here XX.X.X.XX denotes the product version(13.4.0.63).

After upgrading please ensure to clear the bin folder and browser cache to avoid accidental reference of the old assemblies and Scripts/CSS.

We have also noticed that you haven’t give the minWidth as well as the width for each columns. For responsive Grid minWidth and width properties of each columns must be defined. So we suggest to give the width for each column and also assign the value for minWidth. Refer to the following code example.

@(Html.EJ().Grid<object>("Grid1")

             .Datasource((IEnumerable<object>)ViewBag.datasource)

             .AllowPaging()

            .AllowScrolling(true)

            .MinWidth(500)

            .IsResponsive()

                     .Columns(col =>

                    {

                        col.Field("OrderID").Width(90).HeaderText("Order ID").Add();

                        col.Field("CustomerID").Width(90).HeaderText("Customer ID").Add();

                        col.Field("Freight").Width(90).HeaderText("Freight").Add();

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

                    })
        )

We have also prepared a sample with the latest version that can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/123416/ze/ResponsiveGrid_JQueryDlg-257440442

Regards,
Seeni Sakthi Kumar S.

[Santosh Telwane]

Dear Seeni Sakthi Kumar S.

Thank you so much. As suggested by you, we had downloaded and installing the latest Build and migrated the project to new Version.

Now grids inside tab control in Partial View resize properly

While placing Responsive Grid inside a tab, Grid content and header will misaligne issue is resolved successfully :) (y)

Thanks Very Much For your Prompt Response

Regards,

Santosh

[Seeni Sakthi Kumar Seeni Raj]

Hi Santosh,

We are happy to hear that your issue has been resolved after updating to the latest version of Essential Studio.

Get back to us if you need further assistance.

Regards,

Seeni Sakthi Kumar S.