Make the kanban scrollable horizontally

[desmond]

I would like to allow the user to scroll the kanban columns horizontally. I think it is related to "overflow-x: auto". However, the kanban just keeps adjusting based on the screen width when I add a new column.

This is how I add a column, which is clicking on an empty column with Add Column header:

        <KanbanColumns>

            @foreach (column_name item in TestData)

            {

                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField" AllowAdding="true">

                    <Template>

                        @{

                            KanbanColumn column = (KanbanColumn) context;

                            <SfInPlaceEditor @bind-Value=column.HeaderText TValue="string"  Mode="Syncfusion.Blazor.InPlaceEditor.RenderMode.Inline"  EditableOn="EditableType.Click" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Text" ShowButtons="true" Disabled="false"  SubmitOnEnter="true">

                                <EditorComponent>

                                    <SfTextBox @bind-Value=column.HeaderText></SfTextBox>

                                </EditorComponent>

                            </SfInPlaceEditor>

                        }

                    </Template>

                </KanbanColumn>

            }

            @if (@ColumnDynamicChange)

            {

                @foreach (column_name changedItem in DynamicData)

                {

                    <KanbanColumn HeaderText="@changedItem.HeaderText" KeyField="@changedItem.KeyField" Index="@TestData.Count">

                        <Template>

                            @{

                                <div class="header-template-wrap">

                                    <SfTextBox Placeholder="New"></SfTextBox>

                                </div>

                            }

                        </Template>

                    </KanbanColumn>

                }

                <KanbanColumn HeaderText="Add column" KeyField="0" Index="@(LocalData.Count+1)">

                    <Template>

                        @{

                            <div class="header-template-wrap">

                                <SfTextBox @ref='textbox' Placeholder="Add Column" Focus="@OnAddColumn"></SfTextBox>

                            </div>

                        }

                    </Template>

                </KanbanColumn>

            }

            else

            {

                <KanbanColumn HeaderText="Add column" KeyField="@(new List<string>() { "-1" })" Index="@TestData.Count">

                    <Template>

                        @{

                            <div class="header-template-wrap">

                                <SfTextBox @ref='textbox' Placeholder="Add Column" Focus="@OnAddColumn"></SfTextBox>

                            </div>

                        }

                    </Template>

                </KanbanColumn>

            }

        </KanbanColumns>

[Kokila Poovendran]

Hi desmond ,

To make the Kanban board scroll horizontally instead of resizing columns to fit the screen, you need to give each column a fixed width. Once the total width of all columns exceeds the container width, the Kanban will automatically enable horizontal scrolling.

You can achieve this using CSS as shown below:

.e-kanban .e-kanban-table col {

  width: 500px !important;

}

  

After applying this style, the Kanban board will scroll horizontally as more columns are added.

[desmond]

Thanks, that is a genius method.

[Kokila Poovendran]

Hi desmond ,

We’re glad the solution was helpful. Please feel free to reach out if you have any other questions or need further assistance.

[Joshr]

https://stackblitz.com/edit/react-ggwpldjk-qccvdcqw?file=index.js 




Drag and drop when template is enabled, causes the header to shift into view.

decrease the horizontal width and then drag item from todo to last swimlane

[Ajithkumar Gopalakrishnan]

Hi Joshr,

Thanks for your update.

Based on your query, we understand that when a card template is used in the Kanban component, dragging and dropping a card from one position to another causes the header position to become misaligned. We have attached a video demonstration for reference. Please review it and confirm whether you are experiencing the same behavior at your end.

If you are encountering a different issue, kindly share a video demonstration or a sample illustrating the problem. This will help us validate the reported behavior further and provide an appropriate solution.

Sample Link: https://stackblitz.com/edit/react-ggwpldjk-i7peqj9v?file=index.js

Video Demo: Attached as a ZIP file.

Please let us know if you need any further assistance.

Regards,
Ajithkumar G

Attachment: carddrop_d3167ead.zip

[Joshr]

> Please review it and confirm whether you are experiencing the same behavior at your end. 

Yup, that is correct. That is the issue I'm facing

[Ajithkumar Gopalakrishnan]

Hi Joshr,

Thank you for providing details.

Based on your query, we understand that when a column template and custom styles are applied in the Kanban component, dragging and dropping a card from the first column to the last column causes a header misalignment.

We would like to clarify the behavior of the Kanban component. In the shared sample, a custom CSS style has been applied to increase the Kanban column width, which results in a horizontal scrollbar being displayed. During our validation, we observed that the Kanban component renders correctly with its default column width. However, since the width is being modified through custom CSS, the component's internal layout calculations are affected, which leads to the reported header misalignment.

Therefore, we recommend removing the custom width style and instead using the built-in Width property of the Kanban component to achieve the required layout. Please refer to the following code snippet:

<KanbanComponent

        id="kanban"

        keyField="Status"

        dataSource={data}

        cardSettings={{ contentField: 'Summary', headerField: 'Id' }}

        width="1000px"

      >

        ...

</KanbanComponent>

Sample link: https://stackblitz.com/edit/react-1nokeai2-gydensyh?file=index.js



For more details, please refer to the following User Guide documentation:

https://ej2.syncfusion.com/react/documentation/api/kanban/index-default#width

Please let us know if you need any further assistance.

Regards,
Ajithkumar G

[Joshr]

While this does work. it seems to not work for the version of syncfusion we are using
https://stackblitz.com/edit/react-1nokeai2-w94c1skh?file=package.json,index.js 


Essentially, I believe this was tried and found to not work, which is why we resorted to using the css override method suggested in this ticket.

Is it possible to provide a fix for the following versions

    "@syncfusion/ej2-base": "~20.3.56",

    "@syncfusion/ej2-buttons": "~20.3.57",

    "@syncfusion/ej2-data": "~20.3.56",

    "@syncfusion/ej2-dropdowns": "~20.3.57",

    "@syncfusion/ej2-icons": "~20.3.47",

    "@syncfusion/ej2-inputs": "~20.3.57",

    "@syncfusion/ej2-kanban": "~20.3.60",

    "@syncfusion/ej2-layouts": "~20.3.57",

    "@syncfusion/ej2-lists": "~20.3.56",

    "@syncfusion/ej2-navigations": "~20.3.57",

    "@syncfusion/ej2-popups": "~20.3.57",

    "@syncfusion/ej2-react-kanban": "~20.3.60",

    "@syncfusion/ej2-splitbuttons": "~20.3.56"

[Joshr]

https://codesandbox.io/p/sandbox/responsive-antd-4-24-16-forked-2qrrgt?file=%2Findex.css%3A176%2C4-179%2C1


I've made a new example so you get a better idea of what we are dealing with,
the above example uses 

 width={"1000px"}

But if you see the preview as the number of columns increase https://2qrrgt.csb.app/ every column gets too thin.

if we comment the fixed width and comment in

.e-kanban .e-kanban-table col {

  width: 280px !important;

}


well we are back to zero.


Id like to mention that we dynamically can add/ remove columns based on how we filter the data source.
the data source comes from a backend api

[Ajithkumar Gopalakrishnan]

Hi Joshua,

We appreciate your patience.

Based on your query, we understand that the Kanban component renders correctly when a static Width property is used. However, since columns are dynamically added and removed based on the data returned from your backend, the column width becomes progressively smaller as the number of columns increases, making the cards difficult to view.

We understand that the previously suggested Width property approach does not meet your requirement. Therefore, you have applied a custom CSS style to maintain a fixed width for each Kanban column.

However, when custom styles are used to modify the Kanban column width, header and content misalignment may occur during card drag-and-drop operations. This happens because the Kanban component calculates and applies its layout internally during the initial rendering process, and overriding these dimensions through custom CSS can affect those internal calculations.

As a result, we are unable to provide a sample-level solution for this scenario. As a workaround, we recommend dynamically updating the Kanban Width property based on the number of columns. Apart from this approach, the current behavior is the expected behavior of the Kanban component.

Based on the above scenario, we have considered your requirement, "Provide Support for Column Width Property in Kanban," as a feature request. However, we do not have any immediate plans to implement this feature. Additionally, we do not have a workaround available for this requirement at the moment.

You can track the status of this feature request through the feedback portal link below:

https://www.syncfusion.com/feedback/75060/provide-support-for-column-width-property-in-kanban

Any relevant updates regarding the feature's implementation will be communicated to you through the feedback link. So we are marking this ticket as closed.

Regards,
Ajithkumar G