fixed header

[N]

Is there a way to make the "to-do" "in progress" "in review" and "closed" headers fixed in that position on scroll

[Vinitha Jeyakumar]

Hi N, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query ”Is there a way to make the "to-do" "in progress" "in review" and "closed" headers fixed in that position on scroll” 

 

By setting a fixed height to the Kanban content, you can get the fixed header while scrolling into the Kanban rows. Please check the below code, 

 

Code snippet: 

.e-kanban .e-kanban-content { 

        height: 500px; 

    } 

 

Sample: https://stackblitz.com/edit/react-6ibj1w?file=index.css 

 

Please check the above code snippet and sample and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha 

[RJ Fajardo]

How to achieve Jira Board scrolling behavior when scrolling up and down and only the content is scrollable?

[Vinitha Jeyakumar]

Hi RJ Fajardo,

Your requirement can be achieved by using the enableFrozenRows property of the swimlaneSettings in Kanban, which will provide frozen swimlane header while we scroll up and down. Please check the code and sample below,

Code snippet:

<KanbanComponent

            id="kanban"

            cssClass="kanban-swimlane"

            ref={(kanban) => {

              kanbanObj = kanban;

            }}

            keyField="Status"

            dataSource={data}

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

            swimlaneSettings={{

              keyField: 'Assignee',

              enableFrozenRows: 'true',

            }}

            height="500px"

          >

            <ColumnsDirective>

              <ColumnDirective headerText="To Do" keyField="Open" />

              <ColumnDirective headerText="In Progress" keyField="InProgress" />

              <ColumnDirective headerText="Done" keyField="Close" />

            </ColumnsDirective>

          </KanbanComponent>

Sample: https://stackblitz.com/edit/react-gfpzg9?file=index.js

API Link: https://helpej2.syncfusion.com/react/documentation/api/kanban/swimlaneSettingsModel/#enablefrozenrows

Regards,

Vinitha

[RJ Fajardo]

Thanks for the reply. But how can I froze this column header and continue scrolling with the content/cards. Thank you.

Attachment: Screen_Shot_20230330_at_5.50.09_PM_a4f92c17.zip

[Vinitha Jeyakumar]

Hi RJ Fajardo,

Your requirement to froze both the Kanban column header and swimlane header can be achieved by using the enableFrozenRows property and by setting a fixed height to the Kanban content like below,

Code snippet:

.e-kanban .e-kanban-content {

  height: 500px;

}

<KanbanComponent

            id="kanban"

            swimlaneSettings={{

              keyField: 'Assignee',

              enableFrozenRows: 'true',

            }}

            height="500px">

          </KanbanComponent>

Sample: https://stackblitz.com/edit/react-6ibj1w-7hv9fz?file=index.js,index.css

If it doesn't meet your requirements, please provide us with a video illustration of your requirements for our better understanding

Regards,

Vinitha

[RJ Fajardo]

Is there a way to remove the grid lines while dragging the card? And make it smoother while dragging left, right, top and bottom? Thank you in advance.

Attachment: Screen_Shot_20230403_at_8.01.42_PM_b5b35965.zip

[Vinitha Jeyakumar]

Hi RJ Fajardo,

We would like to inform you that Kanban cards are dragged and dropped based on the dynamically created drop clone element. Therefore, the drop clone is mandatory for dropping the card into the Kanban, and we cannot remove it.

Please let us know if you have any concerns.

Regards,

Vinitha