Our state of the art Gantt chart


Post by erhanzeyrek »

Hi,

I am trying to create a custom column with combobox in gannt with CRUD manager. I read CRUD documentation, Store, ColumnStore etc. documentation but i have no luck. Also i read viewtopic.php?f=39&t=8523&p=47370&hilit=custom+column+crud#p47370 this forum post but i have lack of Ext.js knowledge and i don't know how to implement in pure javascript. I can successfully bind the data to my store. But values can't show in the combobox. Because i can't attach my defined store to comboBox. If you share a tutorial like i writed above forum post that will be very good. Any help will be appreciated.

I'am sending column data from server like this;
"operasyonDurumlari": {
        "rows": [
            {
                "id": "5b59ee71-6916-ea11-8720-000c29411baa",
                "durum": "DURAKLATILDI",
                "renkKodu": "#CF1F1FFF"
            },
            {
                "id": "ebe8d9cc-eea9-e911-80ec-000c29e68256",
                "durum": "BAŞLAMADI",
                "renkKodu": "#6B6B6B"
            },
        ]
    }
I am initializing the store in the vue mounted event (which i am initializing the gantt panel there).
mounted() {
const gantt = (this.gantt = new Gantt(
          this.$store.getters.getGanttConfig
        )),
        project = gantt.project,
        ....
        ...
      project.on('beforeLoadApply', function() {
        project.addCrudStore(
          new Store({
            storeId: 'operasyonDurumlari',
            valueField: 'id',
            displayField: 'durum',
            fields: [
              { name: 'id', type: 'string' },
              { name: 'durum', type: 'string' },
              { name: 'renkKodu', type: 'string' }
            ]
          })
        )
      })
      ....
      ..
   }
This is the columns part of my ganttConfig;
    var ganttConfig = {
      startDate: new Date(),
      project: new ProjectModel({
        taskModelClass: Task,
        transport: {
          load: {
            url: Vue.http.options.root + '/api/Planlama/UretimPlanlama/GorevleriGetir',
          ....
          ....
          }
           
      columns: [
        { type: 'isemrino', field: 'isemrino', text: 'İŞ EMRİ NO'},
        { type: 'name', width: 250 },
        { type: 'startdate' },
        { type: 'enddate' },
        { type: 'duration' },
        { type: 'operasyonDurumu', width: 200 },
        { type: 'kaynaklarkolonu', width: 200, text: 'KAYNAKLAR' },
        { type: 'addnew' }
      ], // eo columns
      .....
      ..
Finally, this is how i initializing my custom column;
import { Column, ColumnStore, Combo, BryntumWidgetAdapterRegister, Store } from 'bryntum-gantt'

class OperasyonDurumuKolonu extends Column {
  static get type () {
    return 'operasyonDurumu'
  }

  static get isGanttColumn () {
    return true
  }

  static get defaults () {
    return {
      field: 'operasyondurumu',
      text: 'Operasyon Durumu',
      editor: {
        type: OperasyonDurumuPicker.type,
        clearable: true,
        allowInvalid: false,
        store: 'operasyonDurumlari'
      }
    }
  }

  afterConstruct () {
    const me = this

    super.afterConstruct()
  }

  renderer ({ value }) {
    const me = this

    if (value && value.id) {
      const model = me.editor.store.getById(value.id)
      return model && model[me.editor.displayField] || ''
    }else {
      return ''
    }
  }
}

ColumnStore.registerColumnType(OperasyonDurumuKolonu)

class OperasyonDurumuPicker extends Combo {

  static get $name () {
    return 'OperasyonDurumuPicker'
  }

  static get type () {
    return 'operasyondurumupicker'
  }

  get store () {
    if (!this._store) {
      this.store = new Store()
    }

    return this._store
  }

  set store (store) {
    super.store = store
  }

  get value () {
    return super.value
  }

  set value (value) {
    if (value) {
      if (value.isDefault && value.isDefault()) {
        value = null
      }
      else if (value.id) {
        value = value.id
      }
    }

    super.value = value
  }
}

BryntumWidgetAdapterRegister.register(OperasyonDurumuPicker.type, OperasyonDurumuPicker)

Post by saki »

You can take Calendar column from this example as a model.
  1. CalendarColumn is defined in file lib/Gantt/column/CalendarColumn.js. It defines new type of column "calendar" which can be used in Gantt columns configuration.
  2. CalendarColumn uses editor CalendarPicker that is defined in file lib/Gantt/widget/CalendarPicker.js. It is just a configuration for the Combo it extends. In your case you would put here your configuration including the combo store CrudManager configuration.
I hope it helps to unblock your progress. Keep asking if you encounter other problems on the route.

Post by erhanzeyrek »

Hi saki,

Thank you so much for your response! I am slowly getting understand how store logic works. Now i am created my custom store, custom column and picker widget extended by Combo class. But i am stuck at how and where to attach my custom store to Project Model and Combo and how to use it.

This is my store:
import { Store } from 'bryntum-gantt'

export default class OperasyonDurumuStore extends Store {
  static get defaultConfig () {
    return {
      storeId: 'operasyonDurumlari',
      valueField: 'id',
      displayField: 'durum',
      fields: [
        { name: 'id', type: 'string' },
        { name: 'durum', type: 'string' },
        { name: 'renkKodu', type: 'string' }
      ]
    }
  }
}

Post Reply