Scrolling

[Jonah Coleman]

Two things I'd appreciate some help with:

1. Horizontal scrolling
2. I can't figure out any way to enable a horizontal scroll bar when the columns are wider than the display area.  Looking at the documentation for your javascript controls, it appears there is an allowScrolling property.
   
3. Vertical Scrolling
4. Two things I'd like to see:
5. Header stays when scrolling and only the card area scrolls
6. Header stays when scrolling and only the column under the mouse scrolls
7. I'm not sure if there is a standard term for this- I've always called it slot machine scrolling: http://somup.com/cYfUI5iGeP

I appreciate your help!

[Indrajith Srinivasan]

Hi Jonah,

Greetings from Syncfusion support,

We have validated your reported query. We can achieve the scrolling in the Kanban cards using the CSS. We have prepared a sample with the Horizontal/Vertical scrolling Kanban cards.

Sample: https://www.syncfusion.com/downloads/support/forum/153786/ze/Kanban_scrolling-1180787359

Can you please check the above solution and let us know if it meets your requirements?

Regards, 

Indrajith 

[Jonah Coleman]

Thank you!  The example was very helpful.  Can you point me to where all these css styles are documented?  I did find them documented for other controls (like the javascript control) but couldn't locate one for the blazor control.  Also they were a little different from the javascript control.

I'm a newbie to web stuff, so I admit the CSS is giving me trouble.  Can you help me out with one more example?

I'm using an SfDialog, which has its height and width set to a % of parent.  I'd like to display a kanban on it, sized to take up the entire content space.  I have tried using flex, I have tried using SfDashboardLayout panels, can't seem to make it work without specifying pixels.  Your sample gets even worse as the styles are specified with pixels and you need to know the parent size.  Changing them to percents did not work.

1) I'd like that kanban to have both horizontal scrolling and the vertical scrolling as you've described.  I can make this happen, but again only using set pixel sizes, not automatically sizing to the dialog's content area.

2) Your vertical scrolling example is perfect- but with swim lanes, when you scroll down you still lose the header.  Is there any way to fix the header so that the swim lanes scroll below it?

Again thank you for the help, please know I have pulled my hair out today trying to figure out this for myself.

[Jonah Coleman]

Here's an example that works with set pixels- again I'd like SfDialog width/height to be % of parent, kanban width/height to be % of parent (really just the entire area, however accomplished). 

Oddly enough, it only works if the dialog's visible is set to true.  If set to false, you get no space allocated for the kanban cards.  I'd be greatful if you can help with that issue as well.  I have tried calling the Kanban's .Refresh() and .RefreshPosition() methods.

@page "/"

@using Blazor.Data

@using Syncfusion.Blazor.Kanban

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Buttons

<style>

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

        width: 800px !important;

    }

    .e-kanban .e-card-wrapper {

        height: 800px !important;

    }

</style>

<SfButton @onclick="buttonClick">Open</SfButton>

<SfDialog @ref="theDialog" IsModal="true" Width="1500px" Height="900px" ShowCloseIcon="true" AllowDragging="true" Visible="true">

    <DialogTemplates>

        <Header></Header>

        <Content>

           

            <SfKanban @ref="theKanban" KeyField="Status" DataSource="@Tasks" Width="1600px" Height="800px">

                <KanbanColumns>

                    <KanbanColumn HeaderText="To Do" KeyField="Open" AllowToggle="true" ShowItemCount="true"></KanbanColumn>

                    <KanbanColumn HeaderText="In Progress" KeyField="InProgress" AllowToggle="true" ShowItemCount="true"></KanbanColumn>

                    <KanbanColumn HeaderText="Testing" KeyField="Testing" AllowToggle="true" ShowItemCount="true"></KanbanColumn>

                    <KanbanColumn HeaderText="Done" KeyField="Close" AllowToggle="true" ShowItemCount="true"></KanbanColumn>

                    <KanbanColumn HeaderText="Done2" KeyField="Close2" AllowToggle="true" ShowItemCount="true"></KanbanColumn>

                    <KanbanColumn HeaderText="Done3" KeyField="Close3" AllowToggle="true" ShowItemCount="true"></KanbanColumn>

                    <KanbanColumn HeaderText="Done4" KeyField="Close4" AllowToggle="true" ShowItemCount="true"></KanbanColumn>

                    <KanbanColumn HeaderText="Done5" KeyField="Close5" AllowToggle="true" ShowItemCount="true"></KanbanColumn>

                </KanbanColumns>

                <KanbanSwimlaneSettings KeyField="Type"></KanbanSwimlaneSettings>

                <KanbanCardSettings HeaderField="Id" ContentField="Summary"></KanbanCardSettings>

            </SfKanban>

            

        </Content>

    </DialogTemplates>

</SfDialog>

@code {

    SfDialog theDialog;

    SfKanban<KanbanDataModel> theKanban;

    private void buttonClick()

    {

        theDialog.Show();

    }

    private List<KanbanDataModel> Tasks = new KanbanDataModel().GetTasks();

}

[Gunasekar Kuppusamy]

Hi Jonah,

We are currently validating the reported query from our end and will update you with further details in two business days by 5th May.

Regards,  

Gunasekar K 

[Jonah Coleman]

Thanks, I appreciate it!

[Indrajith Srinivasan]

Hi Jonah, 

 

Good day to you, 

 

We have validated your reported queries and below are the responses for it. 

 

Query 1: ”Can you point me to where all these css styles are documented? I did find them documented for other controls (like the javascript control) but couldn't locate one for the blazor control. Also they were a little different from the javascript control.” 

 

Yes, the Blazor Kanban is different from JavaScript Kanban. Currently, we missed documenting the CSS styles in the user guide. We will document the CSS styles and publish it before 2020 Volume 2 main release. 

 

Query 2: “I'd like that kanban to have both horizontal scrolling and the vertical scrolling as you've described. I can make this happen, but again only using set pixel sizes, not automatically sizing to the dialog's content area.“ 

 

We have considered “Column-wise scrolling in Kanban” as a feature request from our end and logged the report for the same, the feature will be included with any of our upcoming releases.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/14108/ 

 

Query 3: “Your vertical scrolling example is perfect- but with swim lanes, when you scroll down you still lose the header. Is there any way to fix the header so that the swim lanes scroll below it?“ 

You can set the static height for the Kanban wrapper element, less than the SfKanban height to resolve this issue with a static header in Swimlane. We have also modified the sample, we have shared already. 

 

.e-kanban .e-card-wrapper {
    height: 500px !important;
} 

Sample: https://www.syncfusion.com/downloads/support/forum/153786/ze/SfKanban_Queries-657545683 

 

Query 4: “If set to false, you get no space allocated for the kanban cards“ 

 

Since it is placed inside the SfDialog, the width is not set properly calculated for the SfKanban, hence showing the SfKanban in the SfDialog OnOpen event will resolve this issue. Refer to the above sample. 

 

Please let us know if you have any concerns? 

 

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Jonah,

Sorry for the inconvenience caused,

We still have not documented the CSS structure section with Kanban in our Volume 2 Main release, we will document the CSS style usage for the Kanban on or before our Volume 2 SP 1 Release.

Regards,
Indrajith