I have some grids that have a date/time column. The default equality operators for the filter match both the date and time. I am trying to customize the equality operator (or add a new operator) that ignores the time and only compares the date. Using a custom operator works the first time I select the operator. When I go back to the filter menu after setting it the first time, the dropdown has no operator selected and I changing the value again doesn't work until after I select equals again.

How can I have the equals operator remain selected or add a new operator?

If this isn't supported, are there any other ways I can accomplish the same thing? I want to display both the date and time, but have equals only filter on the date.

Here is some example code: https://stackblitz.com/edit/custom-filter-only?file=src/main.vue

Hi,

i would like to have undo and redo buttons in vue text Editor , I couldn't see it here in where I'm typing question now.

The undo () and redo () icons--> like these or buttons anything would work.

could you please suggest what could be done to add undo and redo buttons.

appreciate your help,

Thank you

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"
        );
      }
    },

Is there a way to disable just the checkbox in the dropdowntree? I need to be able to select and drill down in each node, but also need some checkboxes to be disabled. So a node could be disabled, but I would still like to drill down and select items inside that node that are enabled.

"myDataSource" has a "isEnabled" property that is set to true or false.

How can I disable just the checkbox in the control below

<dropdowntree
      :data-source="myDataSource"
      tagMode="single"
      :autoClose=false
      :checkboxes-check-children="true"
      :check-all="true"
      dataTextField="text"
      dataValueField="id"
      style="width: 100%;"
      height="auto"
    >
    </dropdowntree>

Hi all,

Is it possible to attach a native grid to a kendo datasource component?

Thanks

Michele

Hi, here is my problem.

I used the Vue Kendo Native Grid Grouping.

When it is Basics, it CAN show the format of columns. (As the screenshot of CAN format)

The STACKBLITZ example in this page is the one I tried for CAN format. 

https://www.telerik.com/kendo-vue-ui/components/grid/grouping/

---

But when it is Aggregates, it CANNOT show the format of columns. (As the screenshot of CANNOT format)

The STACKBLITZ example in this page is the one I tried for CANNOT format. 

https://www.telerik.com/kendo-vue-ui/components/grid/grouping/grouping/

How can I show the format of columns when I use the Vue Kendo Grid Grouping Aggregates?

Thank you a lot!!!

I try to use v-bind:steps="{ hour: 1, minute: 15 }" but turns out it doesn't have any effect.

I would like to make sure if it is not supported or I have misconfigured.

Thanks!

I'm using the kendo DropDownTree control with VueJS.

I have the control working in a component with my Hierarchy data as shown below.

When I have a parent node with 1 or more child nodes and I check the parent, how can I get all the child nodes to be checked also? Is there a prop for that?

The "check-all" only works for checking or unchecking the entire tree. I would like to check or uncheck all the children within the selected parent. Is that possible? 

    <dropdowntree

      :data-source="items"
      tagMode="single"
      :autoClose=false
      :checkboxes="true"
      :check-all="true"
      :placeholder="placeholder"
      dataTextField="text"
      dataValueField="id"
      @change="onChange"
      v-model="selectedItems"
      style="width: 100%;"
      height="auto"
      >
    </dropdowntree>    

I'm using the dropdowntree control in Vuejs.

When the checkboxes are selected, the selected items are display in an oval with an "x" at the top of the control. 

How do I keep the selected items from displaying at the top of the control?

I'd rather have the total number of items that are selected to display at the top of the control. Is this possible?

<dropdowntree 
:data-source="myDataSource"
:autoClose="false"
:checkboxes="true"
:check-all="true"
:placeholder="'Select Items'"
dataTextField="text"
dataValueField="id"
v-model="selectedItemsList"
style="width: 500px;"
>
</dropdowntree>

Hi,

I have the same question as this one.
https://www.telerik.com/forums/angular-kendo-editor-inside-kendo-tabstrip#login

When I have a kendo editor inside the kendo tabstrip, it seems cannot edit.

How can I do in Vue?

Here is the  Parent.vue , and I use components for each Tab.

 <k-tabstrip>
   <ul>
     <li class="k-state-active">Tab1</li>
     <li>Tab2</li>
   </ul>
   <div>
     <tab1 v-if="Object.keys(buildData.TAB_1).length >0" :data="buildData.TAB_1"></tab2>
   </div>
   <div >
     <tab2 v-if="Object.keys(buildData.TAB_2).length >0" :data="buildData.TAB_2"></tab1>
   </div>
 </k-tabstrip>

Here is code in Tab2 component.

<template>
    <div>
        <k-editor style="height:280px"></k-editor>
    </div>
</template>

How can I edit the  editor wrapper which is insinde the tabstrip wrapper in VUE?

Thanks a lot!!!!