Sidenav on kanban

[Adrian Rodriguez]

Hi Team,

Today i have a more simple question for you:

How can i set, or where should i set my sidenav, to can open it on the side of the kanban.

I need it on the same file, but if i put it outside the <ejs-kanban> i can't open it, or i can't show it, kind of doubt there.

And if i put it outside the kanban tag, it shows under the kanban, not on the side.

Well, as I said before, I need it to can be open with a button, but that should be the lower problem.

Thanks

[Revanth Krishnan]

Hi Adrian, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How can I set or where should I set my sidenav, to open it on the side of the kanban”. 

 

You can use the Syncfusion’s sidebar navigation component for side navigation, you can open and close it in a button click. We have prepared sample with side bar and Kanban in the same file for your reference, 

 

Code Snippet: 

<div class="control-section"> 

  <!-- sample level element  --> 

  <div id="wrapper"> 

    <div class="col-lg-12 col-sm-12 col-md-12" id="sidebar-section"> 

      <span id="hamburger" class="e-icons menu default" (click)="openClick()"></span> 

      <!-- sidebar element declaration --> 

      <ejs-sidebar id="default-sidebar" #sidebar> 

        <div class="title-header"> 

          <div style="display:inline-block">Sidebar</div> 

          <span id="close" class="e-icons" (click)="closeClick()"></span> 

        </div> 

        <div class="sub-title"> 

          Place your primary content here. 

        </div> 

      </ejs-sidebar> 

      <!-- end of sidebar element --> 

      <!-- main content declaration --> 

      <div> 

        <ejs-kanban #kanbanObj keyField="Status" [dataSource]="kanbanData" [cardSettings]="cardSettings" 

          [cssClass]="kanbanCustomClass"> 

          <e-columns> 

            <e-column headerText="To Do" keyField="Open"></e-column> 

            <e-column headerText="In Progress" keyField="InProgress"></e-column> 

            <e-column headerText="Testing" keyField="Testing"></e-column> 

            <e-column headerText="Done" keyField="Close"></e-column> 

          </e-columns> 

        </ejs-kanban> 

      </div> 

      <!--end of main content declaration --> 

    </div> 

  </div> 

</div> 

 

export class AppComponent { 

  @ViewChild('sidebar') 

  public sidebar: SidebarComponent; 

  @ViewChild('kanbanObj') 

  public kanbanObj: KanbanComponent; 

 

  constructor() { } 

 

  public kanbanData: Object[] = extend([], kanbanData, null, true) as Object[]; 

  public cardSettings: CardSettingsModel = { 

    contentField: 'Summary', 

    headerField: 'Id', 

    tagsField: 'Tags', 

    grabberField: 'Color', 

    footerCssField: 'ClassName' 

  }; 

  public kanbanCustomClass: string; 

 

  closeClick() { 

    this.kanbanCustomClass = 'e-kanban-custom'; 

    this.sidebar.hide(); 

  } 

  openClick() { 

    this.kanbanCustomClass = ''; 

    this.sidebar.show(); 

  } 

  //To hide the sidebar element skelton during the page load by setting the visibity style when the control is created. 

  onCreated(e: any): void { 

    this.sidebar.element.style.visibility = 'visible'; 

  } 

} 

Note: Please check the ‘app.component.css’ files for the styles applied in the page. 

 

Sample: https://stackblitz.com/edit/angular-oufm8g-zib952?file=app.component.ts 

 

Sidebar Navigation: 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/sidebar/default 

Documentation: https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started/ 

 

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

 

Regards, 

Revanth