Set fixed column width

[Sam Tran]

Hi,

I can't get the columns to be a specific width.

No matter what I do, the columns always use the available width.

My goal is to have a column to have a max width of 200px

Thanks!

[Buvana Sathasivam]

Hi Sam,   

  

Thanks for using Syncfusion Products.   

  

Query #1: “I can't get the columns to be a specific width. No matter what I do, the columns always use the available width.”   

  

By default Kanban control, individual column width will automatically set based on window size when you are not specifying individual column width.  If individual column width is set and if sum of the columns width exceeds the window size then the given individual column width set to particular column or else Kanban column width will be set based on window size. Please refer to the following code.   

  

KanbanFeatures.cshtml   

  

  @(Html.EJ().Kanban("Kanban")   

                         .Columns(col =>   // Specified all column width   

             {   

              col.HeaderText("Backlog").Key("Open").Width(500).Add();   

              col.HeaderText("In Progress").Key("InProgress").Width(400).Add();   

              col.HeaderText("Testing").Key("Testing").Width(600).Add();   

              col.HeaderText("Done").Key("Close").Width(400).Add();   

              })   

             .AllowScrolling(true)  // Set Allow scrolling property   

             ………………   

)   

      

  

API links: https://help.syncfusion.com/api/js/ejkanban#members:columns-width    

https://help.syncfusion.com/api/js/ejkanban#members:allowscrolling    

  

UG link: https://help.syncfusion.com/aspnetmvc/kanban/column#width    

  

For your convenience, we have created simple sample.   

Sample: http://www.syncfusion.com/downloads/support/forum/133519/ze/SyncfusionMvcApplication69-25606252    

  

Query #2: “My goal is to have a column to have a max width of 200px”   

  

We have achieved your requirement using the following work around solution. In Kanban board, rendered based on table format.  So, we don’t set maximum width for table.  We have width properties for table columns using CSS properties.  Please refer to the following code.   

  

KanbanFeatures.cshtml   

  

<style>  // You can set following css properties   

    .e-kanban .e-table, .e-kbnadapt-editdlg .e-table {   

        table-layout: fixed;   

        width: auto;   

    }   

   

    .e-kanban .e-headercell, .e-kanban .e-columnrow .e-rowcell, .e-kanban .e-table col {   

            width: 200px !important;    // Here, you can set column width   

        }   

</style>   

  

For your convenience, we have created a simple sample.   

Sample: http://www.syncfusion.com/downloads/support/forum/133519/ze/SyncfusionMvcApplication691757204187    

  

Regards,   

Buvana S.