Formatting

[Umair Ahmed]

Hello,

Please let us know on how to add spacing between the columns, we added a room resource having around 50 rooms, is there a way to increase their width, also is it possible to just increase width of a particular column. We would also like to sort by time and not by room names and just display room names. Thanks.

[Balasubramanian Sattanathan]

Hi Umair Ahmed, 

 

Thanks for your valuable patience. 

Query 1 :

 

We have achieved your requirement using below CSS. 

.e-schedule .e-vertical-view .e-header-row .e-resource-cells,

.e-schedule .e-vertical-view .e-header-row .e-header-cells,

.e-schedule .e-vertical-view .e-work-cells {

  width: 100px !important;

}

.e-schedule .e-vertical-view .e-date-header-wrap table col, .e-schedule .e-vertical-view .e-content-wrap table col {

  width: 100px !important;

}

Query 2:

We suspect that your's another query is grouping resources by date. So we have attached UG link below for your reference.

UG link : https://ej2.syncfusion.com/angular/documentation/schedule/resources/#grouping-resources-by-date

Kindly try the below sample and let us know if you need any further assistance on this.

Sample : https://stackblitz.com/edit/angular-t2ppbr-nhktbd

Regards, 

Balasubramanian S

[Umair Ahmed]

Thanks for your response, in the sample application that you provided

 https://stackblitz.com/edit/angular-t2ppbr-nhktbd 

Please let us know how can we sort by the longest duration events / projects displaying first ? We did set the "byDate" option to true in the group settings on the sample app but nothing changed, please advise. 

Thanks

[Balasubramanian Sattanathan]

Hi Umair Ahmed, 

 

Thanks for the update. 

 

Q1: how can we sort by the longest duration events / projects displaying first ? 

 

Still we couldn’t get your requirement clearly. We suspect that, your need is to be sort the resources by it’s events length. For example, If the resource having highest number of events it will be display first and lowest number of events having resource will be display last. There is no way to achieve this. 

 

Q2: We did set the "byDate" option to true in the group settings on the sample app but nothing changed, please advise.  

 

We have prepared samples with group by date and without group byDate like below. If you set group byDate as true, all the resource will be rendered under the each dates. 

 

Samples : 

With group by date : https://stackblitz.com/edit/angular-t2ppbr-upq5mb?file=app.component.ts 

Without group by date : https://stackblitz.com/edit/angular-t2ppbr-nhktbd 

 

Regards, 

Balasubramanian S