DataGrid update column HeaderCell dynamically

Support
#1

I have a DataGrid where there are columns that represent date. Now I want to group them by month. These dates are not static, rather changes everyday i.e. start date is always the current date. As a result, the example we have in the user guide for fix columns needs some tweaking to meet this needs.

This is how I am collecting the columns:

SimpleDateFormat sdfMMM = new SimpleDateFormat("MMMM");

private void initDataGridColumnHeaders(String bucket){

    Date planDate = timeSource.currentTimestamp();

    ArrayList<String> janList = new ArrayList<>();
    ArrayList<String> febList = new ArrayList<>();
    ArrayList<String> marList = new ArrayList<>();

    if(bucket.equalsIgnoreCase("daily")) {
        for (int pd = 1; pd < 24; pd++) {
            String date = sdf.format(planDate);
            String columnName = "pd"+pd;
            productionPlanDataGrid.getColumnNN(columnName).setCaption(date);

            String month = sdfMMM.format(planDate);

            if(month.equalsIgnoreCase("January")) {
                janList.add(columnName);
            }else if(month.equalsIgnoreCase("February")) {
                febList.add(columnName);
            }else if(month.equalsIgnoreCase("March")) {
                marList.add(columnName);
            }

            planDate = DateUtils.addDays(planDate, 1);
        }

    }

    initHeader();
  //  initHeader(monthList);
}

If I use the fixed Grouping as follows it works though that’s not what I am looking for-

 private void initHeader() {
    DataGrid.HeaderRow headerRow = productionPlanDataGrid.prependHeaderRow();
    DataGrid.HeaderCell headerCell = headerRow.join("pd1", "pd2", "pd3", "pd4", "pd5");

    headerCell.setText("JANUARY");
    headerCell.setStyleName("center-bold");
}

Tried the following and didn’t work and not sure if this is the right approach

 private void initHeader(ArrayList<String> monthList) {
    DataGrid.HeaderRow headerRow = productionPlanDataGrid.prependHeaderRow();
    DataGrid.HeaderCell headerCell = headerRow.join(
        monthList.forEach(name -> {
            System.out.println(name.toString());
        })
    );
    headerCell.setText("OCTOBER");
    headerCell.setStyleName("center-bold");
}

Thanks for any help.

#2

Hi,

Tacking into account that the DataGrid component doesn’t support grouping, i.e. there is no GroupDataGrid, it’s unclear what do you mean by grouping. Could you please clarify what exactly are you trying to use for grouping? From your post, I see either fixed (freeze) columns or joining header cells. Also, it is unclear what result you want to achieve. Any mockup is appreciated.

Regards,
Gleb

#3

Hi Gleb
I mean Column header group as I have shared some codes in my post. Let me explain more what is need as requested:

  1. I want to see my DataGrid Header row as follows:

48%20AM

In this example, the column headers are Date which is starting today (as current date). As you notice all the columns that are dates within October are having headerCell “OCTOBER” and for the dates of November are having headerCell “NOVEMBER”. Problem of this hard-coding is, as days goes, 01 Nov 2018 will be part of OCTOBER tomorrow as the column header value is dynamically changed everyday based on the current date.

I have created this within CUBA application using DataGrid. But the column names are hard-coded as follows:

private void initHeader() {
        DataGrid.HeaderRow headerRow = productionPlanDataGrid.prependHeaderRow();
        DataGrid.HeaderCell headerCell = headerRow.join("pd1", "pd2", "pd3");

        headerCell.setText("OCTOBER");
        headerCell.setStyleName("center-bold");

        DataGrid.HeaderCell headerCell2 = headerRow.join("pd4", "pd5", "pd6", "pd7", 
"pd8", "pd9", "pd10", "pd11", "pd12", "pd13", "pd14", "pd15", "pd16", "pd17", "pd18", 
"pd19", "pd20", "pd21", "pd22", "pd23", "pd24", "pd25", "pd26", "pd27", "pd28", "pd29", 
"pd30", "pd31", "pd32", "pd33");
        headerCell2.setText("NOVEMBER");
        headerCell2.setStyleName("center-bold");

}

How can I group the headerCells to respective month when the date of the column is known and in this case, the first value colum today is 29 Oct which will be 30 Oct tomorrow. Accordingly the headerCell NOVEMBER will also move accordingly.

The logic I am looking for to use here is something like this:

if (productionPlanDataGrid.getColumnNN(columnName).equals('01-Nov-2018') ||
    productionPlanDataGrid.getColumnNN(columnName).equals('02-Nov-2018') ||
    productionPlanDataGrid.getColumnNN(columnName).equals('03-Nov-2018') ||
    productionPlanDataGrid.getColumnNN(columnName).equals('04-Nov-2018')) {
    --> headerCell: NOVEMBER
} else if (productionPlanDataGrid.getColumnNN(columnName).equals('01-Nov-2018') {
    --> headerCell: NOVEMBER
}

I hope it is more clear but let me know if you still have questions to clarify what I am looking for.

#4

Well, if I got you correctly, the only I can add to the code you’ve posted above is the usage of the map, instead of several lists:

private Map<String, List<String>> monthColumns = new HashMap<>();

Where map key is a month name, and value is a list of particular dates of that month. Then you can monthColumns to join cells.

Regards,
Gleb

#5

Thank you Gleb, you got it!
Could you please share some code snippets what would be the approach?