Show/hide columns on column menu(kendo grid)

[heesu]

Hi,

 

I have simple two questions. 

 

I'm comparing both Kendo Vue Native components and wrapper components to migrate from Kendo jQuery. 

 

Wrapper components

 

-> If I set :columnMenu="true", I can see a list of menus like sort ascending and it also has 'Columns' menu which shows or hides columns by checking or unchecking check boxes. 

 

However When I implement same components by using native components, the list doesn't show 'Column' menu. 

Can someone tell how to show the column menu???

 

And, if I already have license for jQuery, is it possible to get license for Vue without extra payment?? 

[Ivan Danchev]

Hi Heesu,

See the following documentation section, which explains how to configure the Native Grid to show column menus: https://www.telerik.com/kendo-vue-ui/components/grid/columns/column-menu/#toc-column-menu

To answer your second question, the Kendo UI license includes Kendo UI for Vue, so a separate license is not needed.

Regards,
Ivan Danchev
Progress Telerik

[Xavier]

Hello, I'm having the same issue with the show "column" menu, and I cannot find the solution on the Telerik documentation "Vue Grid Columns Column Menu - Kendo UI for Vue". I'm using version 2025.1. Could you please help us by providing a more detail response/solution? Please see my code below. Thanks

Grid definition

<Grid
          :data-items="result"
          :sort="sort"
          :sortable="true"
          :pageable="true"          
          :filter="filter"
          :take="take"
          :skip="skip"
          :total="total"
          @datastatechange="dataStateChange"
          :columns="columns"
          :columnMenu="true"
        >
          <template v-slot:noRecords>
            <div class="k-grid-norecords">
              <div class="k-grid-norecords-text">No data available</div>
            </div>
          </template>
        </Grid>

Columns definition

const columns = ref([
  { field: 'WZNumber', title: 'WZ#', filterable: true, columnMenu: true },
  { field: 'Name', title: 'RQ Name', filterable: true, columnMenu: true },
  { field: 'City', title: 'City', filterable: true, columnMenu: true },
  { field: 'LegalName', title: 'Legal Name', filterable: false, hidden: true, columnMenu: true },
  { field: 'Phone', title: 'Phone', filterable: false, hidden: true, columnMenu: true },
  { 
    field: 'OpenBussinesDate', 
    title: 'Start Business Date',
    filter: 'date',
    format: '{0:MM/dd/yyyy}',
    filterable: true,
    columnMenu: true
  }
]);

The "Columns" option not show

[Ivan Danchev]

Hello Xavier,

Could you please elaborate more on what you mean by "the Columns option not show"? 

If by "Columns option" you mean the column menu, then it is shown in the screenshot you posted: there is a button with 3 dots that opens the column menu on click, and the column menu itself is also visible (a popup with sorting and filter options). Here's a screenshot that shows the same outcome with the column menu configuration you have in the code snippet you posted:

 

Thus, based on the configuration, the column menu seems to work correctly.

Let us know in case we are missing something with regard to this not being the expected result.