I need to open the Master-detail template not only on the "+" or "arrow" icon but on another button on the screen.

In other words, How can we invoke the "expandChange" method from other element instead of <Grid @expandchange="expandChange" > to expand/collapse the detail template?

Template: I want to expand the detail template with the click of the Edit button.

<Grid
      :data-items="sampleData"
      :columns="columns"
      :detail="cellTemplate"
      :expand-field="'expanded'"
      @expandchange="expandChange"
    >
      <template v-slot:actionColumn>
        <td>
          <div class="d-flex align-items-center tbl-actions">
            <button
              type="button"
              title="Edit"
              @click="expandChange"
              class="btn btn-icon d-flex align-items-center"
            >
              <span class="icon icon-edit"></span>
            </button>
            <button
              type="button"
              title="Add to Cart"
              class="btn btn-icon d-flex align-items-center"
            >
              <span class="icon icon-cart"></span>
            </button>
          </div>
        </td>
      </template>

      <template v-slot:expandTemplate> Detail template goes here.... <template>

Method: 

 expandChange: function (event: any) {
      event.dataItem[event.target.$props.expandField] = event.value;

      if (event.value) {
        event.event.target.parentNode.parentNode.classList.add("expanded-row");
      } else {
        event.event.target.parentNode.parentNode.classList.remove(
          "expanded-row"
        );
      }
    },

Hi,

I am using Vue JS 2.6 stable version. Will the UI Controls work without issue or Is there any other configuration i need to do use with 2.x version?

Hello Folks, 

After updating vue to lattest version, I have this error after each 'npm run build' command:

Maybe, you have some project example with vue 3 and these libs (@progress/kendo-base-components-vue-wrapper,  @progress/kendo-base-components-vue-wrapper etc).

Here is my packege.json:

Thanks.

My Gantt config is like this:

Then methods:

All works fine except that I get spurious calls to dependRead, in the console I see two or three logs for 'dependRead' every time the gantt loads.

If I remove the async/await code then I see only one call to dependRead as expected - so my question is, should I be using blocking or non-blocking handlers for this? async handlers are the correct approach by my thinking...

[Interestingly ganttRead uses exactly the same async mechanism but that is only ever called once]

I have some additional info that I want to capture when creating a new task for the Gantt eg. task owner, status etc. so obviously I will need a custom screen to capture the extra info, I was thinking along these lines:

- Have a custom 'add task button' & hide the built-in one

- The button will open my custom screen which mimics the builtin one, but with some additional fields

- On save, the screen directly updates that backend and then refresh the gantt

Is this the best way to do this and/or is there any flaw with this approach?

If ok, then how would I refresh the gannt? would I have to rebind it or is it better/possible to add the new task to the datasource and then sync?

Hello,

I would like to call a component that contains only the custom edit template (to create a new task or edit) for my scheduler.

I followed this solution but the edit window just displays "[Object object]"

The code of scheduler

The code of the method editTemplate()

The code of the component that contains the custom template

I think the problem comes from the method editTemplate but I don't undestand why.

Anyone can help me ?

Thanks.

I have config like this:

From what I can tell from the docs if transport-submit is defined then the create/update/destroy functions should not be fired and all should be batched up into a single call to transport-submit, but this does not happen: transport-submit is never called and transport-update etc. are all called as normal.

Is this a bug or do I misunderstand the operation?

If possible, please point me to a working example of this using remote data source. My config as below:

    <ganttdatasource ref="ganttdatasource1"
                            :transport-read="ganttRead"
                            :transport-update="ganttUpdate"
                            :transport-create="ganttCreate"
                            :transport-destroy="ganttDestroy"
                            :transport-parameter-map="parameterMap"                           
                            :transport-batch="true" 
                            schema-model-id="id"
                            :schema-model-fields="fields">
    </ganttdatasource>

        <gantt
            ref="kendogantt"
            id="gantt"
            :height="500"
            :editable-create="true"         
            data-source-ref="ganttdatasource1"            
            :assignments="assignments"          
            :resources="resources"
        >
        </gantt>

I'm using the gantt with remote data with custom functions (I use axios, not Telerik gantt data source built-in features). When the gantt first loads it gets it's tasks from  'transport-read', task resource assignments from 'assignments' prop, and resources from 'resources' prop. All works just fine.

Now when a task's assignment is updated, it triggers my custom function 'ganttUpdate', it passes in a data object with all the task data + a .resources. property that has all the assignments for the task and I can update my backend ok.

What I don't understand is what I need to return from 'ganttUpdate' - I mean there are now two places where the task resource assignments are kept (1) on the task itself in the .resources property, and (2) on the gantt in the 'assignments' prop (which has all the assignments for all tasks). It is very confusing.

I have a simple gantt linked to local datasource (there is no backend api), when adding a task I want to handle the onAdd event and mutate the local datasource.

It seems to work ok except that the id of the new task in onAdd is set to 0 (console.log(e.task) in on Add) - am I supposed to set this id value manually?

I have the code below as per the docs, all is fine except the parameter map function never gets called (for any operation, read or create etc.)

    <ganttdatasource ref="ganttdatasource1"
        :transport-read="gRead    
        :transport-parameter-map="parameterMap"
        ......
    </ganttdatasource>

    <gantt
        data-source-ref="ganttdatasource1"
......
    ></gantt>

    methods: {
        parameterMap: function(options, operation) {
            console.log("parameterMap!", options)       //Never see this
            .....
        }