Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
dhanraj shriyan
140
igGrid column auto width
posted

Hi,

I am using MVC 3 and Infragistic Grid for showing data.

@(Html .Infragistics() .Grid<Measurement>(Model.Measures) .ID("wbGrid")

.AutoGenerateColumns(true)

.Features(features => {  features.Paging().PageSize(50).TotalRecordsCount(measurements.Count);  features.Resizing(); })

.Height("400px")

.DataBind()

.Render()  )

I have records with over 100 columns. I want the columns to increase width as per the text.

But the columns are getting shrinked. Here is screenshot for reference https://www.dropbox.com/s/5n1588q23swarvj/igGrid_Column_Width_Issue.png

 

I am stuck. Please respond as quickly as possible.

 

 

Parents
  • 23953
    Verified Answer
    Offline posted

    Hi,

    By default igGrid renders table with style: "table-layout: fixed" and in this mode it is not possible to achieve auto column width. Following are the steps which you need to execute in order to achieve auto column width:

    1.Set table-layout to auto. This way the table layout algorithm will take into account the cells contents.

    If your grid id is #grid1 then your CSS should look like this:

    Code Snippet
    1. <style>
    2.     #grid1
    3.     {
    4.         table-layout: auto!important;
    5.     }
    6. style>

     

    2.Set igGrid.fixedHeaders to false - by default igGrid.fixedHeaders is set to true so the headers will be always visible. However in this configuration headers are not in sync with table data so we need to turn off this functionality.

    Code Snippet
    1. @(Html.Infragistics().Grid(Model.Measures).ID("grid1")
    2. .AutoGenerateColumns(true)
    3. .FixedHeaders(false)
    4. .Features(features => {  
    5.     features.Paging().PageSize(50).Type(OpType.Local);
    6.     features.Resizing(); })
    7. .Height("400px")
    8. .DataBind()
    9. .Render())

    3.Enable horizontal scrolling of the grid - at this point we can see the data of the first cells, but there is no horizontal scrollbar. Here is how to enable it:

    Code Snippet
    1. <style>
    2.     #grid1_scroll
    3.     {
    4.         overflow-x: auto!important;
    5.     }
    6. style>

    4.(Optional) Set cell contents to fit on one line - If you want cells contents to fit on one line use the following CSS:

    Code Snippet
    1. <style>
    2.     #grid1>tbody>tr>td
    3.     {
    4.         white-space: nowrap;
    5.     }
    6. style>

    Let me know if you need further assistance.

     

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.

  • 140
    posted in reply to Martin Pavlov

    Hi Martin,

    I have added the CSS mentioned by you, but that only solves the problem partially.

    The grid Body is now showing auto column cell data, but the headers are still shrinked.

    Here is the screenshot for your reference https://www.dropbox.com/s/9velwb98zuu746i/igGrid_Header_Problem.png

     

    Additionally as suggested by you I have made FixedHeaders = false :

     

    @(Html .Infragistics() .Grid<Measure>(measurements.AsQueryable()) .ID("mGrid").AutoGenerateColumns(true)

    .FixedHeaders(false)

    .Features(features => { features.Paging().PageSize(50).TotalRecordsCount(measurements.Count);

                                        features.Resizing();

                                    })

    .Virtualization(true)

    .VirtualizationMode(VirtualizationMode.Continuous)

    .Height("600px")

    .DataBind()

    .Render() )

     

    Please let me know if I am missing anything here.

Reply Children