Fixed columns in Aurelia project doesn't work

kintela

Hi

I have published my Aurelia business project here: https://fysegplannerwebapp.azurewebsites.net/#/projects/CABL2016/employee/28/plan

Y have configured the DataTable in this way:

configureDataTable() {
    this.$outSourcingDataTable = $(this.outSourcingDataTable).DataTable({
      info: false,
      searching: false,
      paging: false,
      scrollX: true,
      fixedColumns: { leftColumns: 4 },
      scrollY: "400px",
      scrollCollapse: true,
      data: this.projectOutSourcingData,
      columns: this.columns
    });
  }

because I want to fix the first 4 columns but does not work. I don't know if is problem of the extension or what

Any idea Please?

Regards

allan

Thanks for the link. I managed to find where the table is being initialised in the webpack generated file, and indeed, FixedColumns is not loaded when it is initialised which is why it isn't working.

As to why it isn't loading... Can you show me the unobfuscated / transpiled / compiled / whatever code please?

Thanks,
Allan

kintela

Hi allan

I'm using DataTables in an Aurelia project
The first thing that is executed is this method

addData() {
    var propertyName: string;
    return this.projectService
      .getOutSourcingDataInDateRange(
        this.projectId,
        this.startDate,
        this.endDate
      )
      .then(response => {
        this.projectOutSourcingData.push(...response);

        this.addProperties();

        this.addColumns();

        this.configureDataTable();
      })
      .catch(error => console.log(error));
  }

when end the promise I received when calling the api and get the data filled the matrix of objects that will fill the datatable in the matrix projectOutSourcingData...

Then I execute this other methods sequentially

addProperties() {
    for (let subcontractorData of this.projectOutSourcingData) {
      for (let calendarValue of subcontractorData.calendarValues) {
        Object.defineProperty(subcontractorData, calendarValue.date, {
          value: calendarValue.made
        });
      }
    }
  }

Dynamically add properties to show the calendar

addColumns() {
    this.columns = [
      { title: "Subcontratista", data: "supplierName" },
      { title: "Realizado", data: "madeSummed" },
      { title: "Planificado", data: "plannedSummed" },
      { title: "Previsto", data: "estimateSummed" }
    ];

    let subcontractorData = this.projectOutSourcingData[0];
    for (let calendarValue of subcontractorData.calendarValues) {
      this.columns.push({
        title: calendarValue.date,
        data: calendarValue.date
      });
    }
  }

I configure the matrix with the columns to show in the datatable

and finally

configureDataTable() {
    this.$outSourcingDataTable = $(this.outSourcingDataTable).DataTable({
      info: false,
      searching: false,
      paging: false,
      scrollX: true,
      fixedColumns: { leftColumns: 4 },
      scrollY: "400px",
      scrollCollapse: true,
      data: this.projectOutSourcingData,
      columns: this.columns
    });
  }

I assign the data properties and columns with the matrices that I have filled before

when the code flow reaches the configureDataTable method, the array that fills in the data property has all the values

I do not know if this is good for you?

Thanks

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Hi,

Could you show me your ./src/resources/elements/datatables/outSourcingDataTable.ts source file please? I can see in the packed JS code jQuery being included, but I don't actually see DataTables being included, or FixedColumns. That's not to say they aren't, but the obfuscated code is obviously hard to understand and I don't really know much about Aurelia. How are you currently doing your DataTables and FixedColumns import?

Thanks,
Allan

kintela

Hi

import { LoadingIndicator } from "./../loading-indicator";
import { ProjectsService } from "../../../projects/services/projectsService";
import { bindable, bindingMode } from "aurelia-framework";
import { OutSourcingData } from "../../../Projects/models/outSourcing";
import $ from "jquery";
import { inject } from "aurelia-framework";

@inject(ProjectsService)
export class OutSourcingDataTable {
  @bindable projectId: string;
  @bindable startDate: Date;
  @bindable endDate: Date;

  loading: boolean = false;

  columns: { title: string; data: any }[];

  outSourcingDataTable: Element;
  $outSourcingDataTable: any;
  projectOutSourcingData: OutSourcingData[] = [];

  constructor(private projectService: ProjectsService) {}

  bind() {
    this.loading = true;
    this.addData();
    this.loading = false;
  }

  addProperties() {
    for (let subcontractorData of this.projectOutSourcingData) {
      for (let calendarValue of subcontractorData.calendarValues) {
        Object.defineProperty(subcontractorData, calendarValue.date, {
          value: calendarValue.made
        });
      }
    }
  }

  addColumns() {
    this.columns = [
      { title: "Subcontratista", data: "supplierName" },
      { title: "Realizado", data: "madeSummed" },
      { title: "Planificado", data: "plannedSummed" },
      { title: "Previsto", data: "estimateSummed" }
    ];

    let subcontractorData = this.projectOutSourcingData[0];
    for (let calendarValue of subcontractorData.calendarValues) {
      this.columns.push({
        title: calendarValue.date,
        data: calendarValue.date
      });
    }
  }

  configureDataTable() {
    this.$outSourcingDataTable = $(this.outSourcingDataTable).DataTable({
      info: false,
      searching: false,
      paging: false,
      scrollX: true,
      fixedColumns: { leftColumns: 4 },
      scrollY: "400px",
      scrollCollapse: true,
      data: this.projectOutSourcingData,
      columns: this.columns
    });
  }

  addData() {
    var propertyName: string;
    return this.projectService
      .getOutSourcingDataInDateRange(
        this.projectId,
        this.startDate,
        this.endDate
      )
      .then(response => {
        this.projectOutSourcingData.push(...response);

        this.addProperties();

        this.addColumns();

        this.configureDataTable();
      })
      .catch(error => console.log(error));
  }
}

Thanks