Our powerful JS Calendar component


Post by fathi21 »

Hai , i am currently working on adding customize filter checkbox using custom type as per discussion here viewtopic.php?f=54&t=15874

        sidebar={{
          items: {
            customFilterCheckboxes: {
              type: 'eventFilter',
              items: [
                {
                  name: 'testing',
                  eventColor: '#333333',
                  checked: true
                },
                {
                  name: 'another one',
                  eventColor: '#eeeeee',
                  checked: true
                }
              ],

My question is how do i checked the checkboxes by default ? i try to use the attribute checked but the checkbox doesnt seem to checked.


Post by alex.l »

Hi fathi21,

We do not have a widget with type eventFilter. If it's created by your own, be aware to set type: 'checkbox' for all items inside it.
If I am wrong, please attach a full config, we'll have a look again. Also please provide a version of Calendar you used.

All the best,
Alex

All the best,
Alex


Post by fathi21 »

yes its our own type

import { List, Store, ResourceFilter } from 'bryntum-calendar/calendar.umd'

class EventFilter extends ResourceFilter {
  static get $name() {
    return 'EventFilter'
  }

  // Factoryable type name
  static get type() {
    return 'eventFilter'
  }

  static get configurable() {
    return {
      /**
       * The {@link Scheduler.data.EventStore EventStore} to filter.
       * Events for resources which are deselected in this List will be filtered out.
       * @config {Scheduler.data.EventStore}
       */
      eventStore: null,
      type: 'checkbox',
      multiSelect: true,
      toggleAllIfCtrlPressed: true,
      itemTpl: record => record.name,
      onFilter: () => {
        console.log('onFilter')
      }
    }
  }

  onSelectionChange({ source: selected }) {
    console.log('onFilter', this.onFilter)
    console.log('arguments', arguments)

    List.prototype.onSelectionChange.call(this, ...arguments)
    this.onFilter(selected)
  }
}

EventFilter.initClass()

export default EventFilter

basically it looks like this , btw it doesnt work when i do it like this , the checkbox doesnt checked by default , even when i put checked: true. do u have any idea how to do make the checkbox checked by default ?

        sidebar={{
          items: {
            customFilterCheckboxes: {
              type: 'eventFilter',
              items: [
                {
                  name: 'testing',
                  eventColor: '#333333',
                  type: 'checkbox',
                  checked: true,
                },
                {
                  name: 'another one',
                  eventColor: '#eeeeee',
                  type: 'checkbox',
                  checked: true,
                }
              ],

Post by alex.l »

Your new created EventFilter component is based on our ResourceFilter, which is based on https://bryntum.com/docs/calendar/#Core/widget/List . You need to use https://bryntum.com/docs/calendar/#Core/widget/List#config-selected configuration to set the status of checked items inside the List.

selected: Core.util.Collection/Object
A Collection, or Collection config object to use to contain this List's selected records.

All the best,
Alex


Post Reply