Set column size

[Matías Lucero]

Hello how are you? I am trying to set the size of the columns on the board, but I can't do it, I can't find the way. In this case I am running my angular application with IONIC on a tablet, but the column size is not the same as shown in a traditional browser. Is there some way of a fixed size? Attached image of the browser and the application. I am looking forward to your response! thank you! PS: sorry for my English, it is not very good!

Browser:

Tablet:

[Ravikumar Venkatesan]

Hi Matías, 

Greetings from Syncfusion support. 

We have validated your reported query “Is there some way of a fixed size?” at our end. We have achieved your requirement wit the help of the below CSS code. We have prepared a sample for your reference and it can be available below. 

[app.component.css] 

.e-device table.e-kanban-table.e-header-table, .e-device table.e-kanban-table.e-content-table { 

  width: unset; 

} 

Sample: https://stackblitz.com/edit/ej2-angular-kanban-fixed-width-on-mobile-mode-8md1bu?file=app.component.ts 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Matías Lucero]

hi, the solution they gave me greatly improved the problem, but now the card is bigger than the column, and when you drag it to another column everything starts to look bad. You may also need to apply a style to the card and columns when dragging a card. Attached images. Thank you so much!!!

Attachment: img_3c4c18e3.rar

[Ravikumar Venkatesan]

Hi Matías, 

Sorry for the inconvenience. 

We have checked your shared images at our end and We have resolved the reported problem by setting up the fixed width for the Kanban columns with the help of the below CSS code. We have prepared a sample for your reference and it can be available below. 

[app.component.css] 

.e-header-table col, .e-content-table col { 

  width: 22vw !important; 

} 

Sample: https://stackblitz.com/edit/ej2-angular-kanban-fixed-width-on-mobile-mode-solved-djt4sf?file=app.component.ts 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Matías Lucero]

Thank you very much! the added style fixes the problem, you're the best! Regards!! The incident can be closed!

[Vengatesh Maniraj]

Hi Matías, 

You are most welcome.  

We are happy that our solution has resolved your problem. 

Regards,
Vengatesh  

[Matías Lucero]

Hello, again me, all the problems were solved, but I found the following: If I add a new column to the board they will be run again, in the style of the column I use this:

.e-header-table col,

.e-content-table col {

    width: 22vw !important;

}

if I modify the style to:

.e-header-table col,

.e-content-table col {

    width: 18vw !important;

}

everything is corrected, but the application that I am making the number of columns depends on certain variables, they can be 2, 3, 4, 5 ... N columns. Is there a way to do it dynamically?

[Ravikumar Venkatesan]

Hi Matias, 

Thanks for the update. 

We have validated your reported query “Is there a way to do it dynamically?” at our end. We have achieved your requirement with the help of the queryCellInfo and dataBinding event of the Schedule like the below code. We have prepared a sample for your reference and it can be available below. 

[app.component.ts] 

export class AppComponent { 

  @ViewChild('kanbanObj') kanbanObj: KanbanComponent; 

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

  public cardSettings: CardSettingsModel = { 

    contentField: 'Summary', 

    headerField: 'Id', 

    tagsField: 'Tags', 

    grabberField: 'Color', 

    footerCssField: 'ClassName' 

  }; 

  public isHeaderSet: boolean = false; 

  public isContentSet: boolean = false; 

 

  public onQueryCellInfo(args) { 

    let isHeader = !this.isHeaderSet && args.requestType === "headerRow"; 

    let isContent = !this.isContentSet && args.requestType === "contentRow"; 

    if (isHeader || isContent) { 

      let className = args.requestType === "headerRow" ? '.e-header-table' : '.e-content-table'; 

      let colGroup = (this.kanbanObj as any).element.querySelector(className).firstChild; 

      let count = colGroup.childElementCount; 

      let individualWidth = window.innerWidth / count; 

      for (let i = 0; i < count; i++) { 

        colGroup.children[i].style.width = (individualWidth - 16) + "px"; 

      } 

      if(isHeader) 

      this.isHeaderSet = true; 

      if(isContent) 

      this.isContentSet = true; 

    } 

  } 

  public addColumn(args) { 

    this.isHeaderSet = false; 

    this.isContentSet = false; 

    (this.kanbanObj as any).addColumn({ headerText: 'Test Column', keyField: 'Test' }, 4); 

    args.currentTarget.ej2_instances[0].disabled = true; 

  } 

  public onDataBinding(args) { 

    this.isHeaderSet = false; 

    this.isContentSet = false; 

  } 

} 

Sample: https://stackblitz.com/edit/ej2-angular-kanban-fixed-width-on-mobile-mode-solved-c1eqs4?file=app.component.ts 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan