Fixed columns in Aurelia project doesn't work

Fixed columns in Aurelia project doesn't work

kintelakintela Posts: 5Questions: 1Answers: 0
edited January 2019 in Free community support

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

Replies

  • allanallan Posts: 61,440Questions: 1Answers: 10,053 Site admin

    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

  • kintelakintela Posts: 5Questions: 1Answers: 0
    edited January 2019

    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.

  • allanallan Posts: 61,440Questions: 1Answers: 10,053 Site admin

    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

  • kintelakintela Posts: 5Questions: 1Answers: 0

    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

This discussion has been closed.