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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Width of column with percentage not working

Thread ID:

Created:

Updated:

Platform:

Replies:

123881 Apr 28,2016 07:47 PM UTC Sep 6,2016 10:46 AM UTC ASP.NET Web Forms 17
loading
Tags: Grid
Roimer Machacón Otero
Asked On April 28, 2016 07:47 PM UTC


Hi we're using grids now, we've a little problem. We define the width to the columns of a grid in diferents percentages but when we see the grid all columns have the same width.

Attached a image with the definition of the grid and a sample as seen.

Attachment: column_not_resize_51080392.zip

Prasanna Kumar Viswanathan [Syncfusion]
Replied On April 29, 2016 01:08 PM UTC

Hi Roimer, 

Thanks for contacting Syncfusion support. 

We checked your screenshot and found that you have render the grid inside the tab. So, we have created a sample by rendering the grid inside the tab and define the width of the columns in different percentages. The columns are rendered with the width that we have mentioned in the columns property while initializing the Grid.  We are unable to reproduce the issue at our end.  

Please find the screenshot: 

 
For your convenience we have created the sample and the same can be downloaded from the following link 


To reproduce the issue, we need the following details, 

1.       Have you define the width in percentage for the parent tab? 

2.       Full code snippet. 
 
3.       Reproduce the issue in the attached sample. 
 
4.       Essential Studio Version details. 
 
Regards, 
Prasanna Kumar N.S.V  


Roimer Machacón Otero
Replied On April 29, 2016 02:51 PM UTC

Hi updated the error, when load without data, this work ok, now when resize the page some columns that aren't seen at the end (Attached image of example).

In the first image can see how to appear when have a hide menu, now in the second image when we show the menu can see that 2 columns in the final of the grid not showing. 

Note: This is the definition of the grid:

 <ej:Grid ID="gvsDetalles" runat="server" AllowGrouping="false" AllowSelection="true" TabIndex="-1" Locale="es-ES"
     Selectiontype="Single" AllowSorting="false" AllowPaging="true" AllowFiltering="false" IsResponsive="true"
     AllowScrolling="false" AllowResizing="true" ClientIDMode="Static">
     <ClientSideEvents Load="loadHandler" ActionBegin="actionBegin" RowSelected="filaDetalleSeleccionadaPlanPeriodo" />
     <DataManager URL="PresupuestoPlanPeriodo.aspx/CargarDetallesPlanPeriodo" Adaptor="UrlAdaptor" />
     <GroupSettings EnableDropAreaAutoSizing="False"></GroupSettings>
     <PageSettings PageCount="10" />
     <%--<FilterSettings FilterType="Excel" />--%>
     <Columns>
         <ej:Column Field="idPresupuestoPlanDetalle" HeaderText="<%$ Resources:Generales, id %>" IsPrimaryKey="true" Width="0%" Visible="false" />
         <ej:Column Field="lote" HeaderText="<%$ Resources:Generales, lote %>" Width="8%" Visible="true" />
         <ej:Column Field="siembra" HeaderText="<%$ Resources:Generales, siembra %>" Width="8%" Visible="true" />
         <ej:Column Field="idActividad" HeaderText="<%$ Resources:Generales, idActividad %>" Width="8%" Visible="true" />
         <ej:Column Field="actividad" HeaderText="<%$ Resources:Generales, actividad %>" Width="24%" Visible="true" />
         <ej:Column Field="unidad" HeaderText="<%$ Resources:Generales, unidad %>" Width="8%" Visible="true" />
         <ej:Column Field="rendimientoEstandar" HeaderText="<%$ Resources:Generales, rendimiento %>" Width="10%" Format="{0:n2}" Visible="true" />
         <ej:Column Field="tipoLabor" HeaderText="<%$ Resources:Generales, tipoLabor %>" Width="12%" Visible="true" />
         <ej:Column Field="tarifa" HeaderText="<%$ Resources:Generales, tarifa %>" Width="10%" Format="{0:n2}" Visible="true" />
         <ej:Column Field="cantidadLabor" HeaderText="<%$ Resources:Generales, cantLabor %>" Width="10%" Format="{0:n2}" Visible="true" />
         <ej:Column Field="idTipoPago" HeaderText="idTipoPago" Width="1%" Visible="false" />
     </Columns>
 </ej:Grid>

Attachment: error_2524ef8e.zip

Gowthami V [Syncfusion]
Replied On May 2, 2016 07:20 AM UTC

Hi Roimer, 

We have analyzed your code example and we found that you have missed to set the MinWidth which is necessary to set while enable IsResponsive property. 

Refer to the below code example, 

<ej:Grid ID="gvsDetalles" runat="server" AllowGrouping="false" AllowSelection="true" TabIndex="-1" Locale="es-ES" MinWidth="700" IsResponsive="true" 
     Selectiontype="Single" AllowSorting="false" AllowPaging="true" AllowFiltering="false"  
     AllowScrolling="false" AllowResizing="true" ClientIDMode="Static"> 
. . . . 
. . . . 
. . . . 
</ej:Grid> 


While using above code example, if the grid width is less than MinWidth then the grid displayed with the scroller to maintain the MinWidth without hiding the columns. 

Refer to the below link for more clarification about minWidth and isResponsive, 



Regards, 

Gowthami V. 


Roimer Machacón Otero
Replied On May 2, 2016 01:55 PM UTC

Hi, we used the example and this for us not working, when the windows haven't the menu the grid appear little respect to the width of the parent (Attached image) but when open the browser console this appear using all the space of the parent

Attachment: error_ea76dd87.zip

Gowthami V [Syncfusion]
Replied On May 3, 2016 09:30 AM UTC

Hi Roimer, 

We have analyzed your issue and we are unable to reproduce the issue. 

We have created a sample (version 14.1.0.41) with your code example and the same can be downloaded from the following link, 


Please provide us below details to reproduce the issue, 

1.       Share the code snippets of Grid and Tab control rendering view page. 
2.       Share the Syncfusion product version details that you have used. 
3.       Share the details of any external CSS that you have used. 
4.       If possible, reproduce the reported issue in the above sample
 

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

Regards, 

Gowthami V. 


Roimer Machacón Otero
Replied On May 3, 2016 01:42 PM UTC

Seeing the example this use ej:tab, we're using boostrap tabs

Roimer Machacón Otero
Replied On May 3, 2016 02:08 PM UTC

And we have noticed that when removing the tab grid this works correctly the width of the columns. Exist some inconvenience between the grid and the bootstrab tabs?

Roimer Machacón Otero
Replied On May 3, 2016 03:26 PM UTC

Also we're testing with syncfusion tabs and can observe that the grids in the hidden tabs on load, appear damaged and these have the same definition of the first grid.

Attached project with the error (The page in the project is Default2.aspx)

Attachment: gridtabs_be679af3.zip

Gowthami V [Syncfusion]
Replied On May 4, 2016 02:39 PM UTC

Hi Roimer, 

Query 1: the grids in the hidden tabs on load, appear damaged and Exist some inconvenience between the grid and the bootstrab tabs? 
When resizing the window we have set the width and height for the element based on the element width. Due to this reason when we resize the window the hidden element width and height were not properly calculated while invoking the windowonresize method. The reason is the time delay for the grid element to change its dimension while dynamically displayed. 
We can avoid this issue by invoking the “windowonresize” method in shown event of the bootstrap tab as follows, 
<script type="text/javascript"> 
        $(document).ready(function () { 
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
                var id = $(e.target).attr("rel='nofollow' href"); 
                var gridId = $(id).find(".e-grid.e-waitingpopup").attr("id"); 
                setTimeout(function () { $("#" + gridId).ejGrid('windowonresize'), 0 }); 
                $("#" + gridId).ejGrid({ scrollSettings: { height: "auto" } }); 
            }); 
        }); 
        </script> 

We have modified a sample with bootstrap tab and the same can be downloaded from the following link, 


Query 2: Seeing the example this use ej:tab, we're using bootstrap tabs 

We have analyzed your issue with the bootstrap tab and we are unable to reproduce the issue. 

Please check the above sample we have used MinWidth and IsResponsive properties and we are not reproduce the issue after open the developer tool grid resizes to tab width. 

1.       Share the code snippets of Grid and Tab control rendering view page.  
2.       Share the Syncfusion product version details that you have used.  
3.       Share the details of any external CSS that you have used.  
4.       If possible, reproduce the reported issue in the above sample.  

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

Regards, 

Gowthami V. 


Roimer Machacón Otero
Replied On May 16, 2016 10:59 PM UTC

Hi, we're using the example code and this not working, exist another form for can resolve this problem, in another version this work correctly

Gowthami V [Syncfusion]
Replied On May 17, 2016 03:46 PM UTC

Hi Roimer, 

Before proceed with your query we need below details, 

1.       You have mentioned that “exist another form for can resolve this problem”. Kindly explain us clearly about this query. 
2.       And also you have mentioned “Another version it is working perfectly”, please provide us version details and which solution working perfectly. 
3.       Explain your issue clearly which using our solution and share us the screenshot of the issue. 

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

Regards, 

Gowthami V.  


Roimer Machacón Otero
Replied On May 20, 2016 02:35 PM UTC

Hi, analyzing the example sent with a bootstrap tab we noticed that this have the same error that occur in our case.

We made a little modification to the example: 

To all the grids put this percentage:
  • To the first column 20%
  • To the second column 80%
Now can observe that in the second and third grid that are in the hide tab the percentage not working properly. This can observe that is distributed in the grid equally.


Attached to this forum the compressed with the image that show the error, and the project example with a little modification.








Attachment: GridError_7274bee3.rar

Gowthami V [Syncfusion]
Replied On May 23, 2016 12:25 PM UTC

Hi Roimer, 

By default, the grid width and height will be set as “auto” when we are not specifying the width and height , which means the grid height and width will be adjustable (Fill the parent container) based on the parent element. 

As per your code example the parent for the grid element is div which has a bootstrap class “col-9”. Based on the width and height of that parent div element the grid width and height get filled. So that only the space is occurred. 

So we suggest you to adjust a parent element (set bootstrap class as col-12) of the grid to fill without the space between grid element and its parent. 

Regards, 

Gowthami V. 


Roimer Machacón Otero
Replied On May 23, 2016 02:58 PM UTC

Hi, we adjust the parent element with the bootstrap class as col-12.

Can observe the change in the attached example that the error still happening

Attachment: WebSite3_326ec879.rar

Ragavee U S [Syncfusion]
Replied On May 24, 2016 10:38 AM UTC

Hi Roimer, 

Sorry for the inconvenience caused. 

We had actually misunderstood the reported query. When the grid element is present inside the hidden tab, it is not possible to calculate the column width( when mentioned in percentage). As the width of the hidden element will be 0px, it is not possible to calculate the column width(which is based on the grid element width which is actually hidden). 

So we suggest you to dynamically calculate the column width and reset the width to columns using setWidthToColumns method in the tab active event. Please refer to the below code example. 

<script type="text/javascript"> 
        $(document).ready(function () { 
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
                var id = $(e.target).attr("rel='nofollow' href"); 
                var gridId = $(id).find(".e-grid.e-waitingpopup").attr("id"); 
                setTimeout(function () { $("#" + gridId).ejGrid('windowonresize'), 0 }); 
                $("#" + gridId).ejGrid({ scrollSettings: { height: "auto" } }); 
                var obj = $("#" + gridId).ejGrid("instance"); 
                var columns = obj.model.columns; 
                obj.columnsWidthCollection = []; 
                for (var k = 0; k < columns.length; k++) { 
                    if (typeof (columns[k].width) == "string" && columns[k].width.indexOf("%") != -1) 
                        obj.columnsWidthCollection.push(parseInt(columns[k]["width"]) / 100 * obj.element.width());//re-calculate the colun width when tab item is active 
                    else 
                        obj.columnsWidthCollection.push(columns[k]["width"]); 
                } 
                obj.setWidthToColumns();//function to reset width to columns 
            }); 
        }); 
    </script> 

Regards, 
Ragavee U S. 


Roimer Machacón Otero
Replied On September 2, 2016 10:05 PM UTC

Hi, we're apply the javascript function and can't possible resize the columns correctly.

In the console.log this part of the code always return 0 and not resolve the resize of the columns.

obj.columnsWidthCollection.push(parseInt(columns[k]["width"]) / 100 * obj.element.width());//re-calculate the colun width when tab item is active 

Mani Sankar Durai [Syncfusion]
Replied On September 6, 2016 10:46 AM UTC

Hi Roimer, 
 
We are not able to reproduce the reported issue. When resizing the columns inside the tab it resized the columns correctly and also the code obj.columnsWidthCollections contains the columns width value after the values has been pushed to it and it does not returned the value as 0 when tab is active. 
 
We have also prepared a sample that can be downloaded from the below link, 
 
Also please refer the video link, 
 
Please refer the screenshot where obj.columnsWidthCollections doesn’t returns 0 in console window. 
 
 
If you still face the issue please get back to us with the following details, 
1.      Share the code snippets of Grid and Tab control rendering view page.   
2.      You have mentioned “In the console.log this part of the code always return 0 and not resolve the resize of the columns”. Can you please send the details regarding this as a screenshot or video? 
3.      If possible, please reproduce the reported issue in the above sample.   
 
 
The provided information will help to analyze the issue and provide you the response as early as possible.  
 
Please let us know if you need further assistance. 
 
Regards
Manisankar Durai.
 
 


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.

Warning Icon 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.Close Icon

;