Questions on Kendo UI for Vue Forum

2 answers

51 views

Hi everyone,

I'm having some problems with pageable configuration in kendo native grid. In pageSize I have this array [ 10, 15, 20, "all" ] but when I click on "all" it doesn't work and says "No records available". Do you have an example of this kind of implementation? I've tested in 2.1.2 and 3.4.4 versions.

Thanks a lot.

Grid

answered on 02 Aug 2022

0 answers

405 views

Kendo Grid Column Custom Menu custom template

Hello,

In my grid in the columns I put custom colum menu, so I can use directly the filters. The problem is that although everything seems to be working fine, when I click on on column filter it opens a popup, and when I click on one other columns filter it also opens a popup BUT does not close the previous one.

I ve seen examples where this functionality works, and some others that it does not. Is there a solution for when I open one columns filter popup to close all the others that is currently open?

Thanks

//This adds a custom template to my column menu
column.columnMenu = "CheckboxColumnFilterRender";
//This adds a custom icon and a custom color to my column header
headerClassName:"generic-filter-icon c-gray-600",
 
<templatev-slot:CheckboxColumnFilterRender="{ props }">
                        <NbGenericCheckboxesColumnFilter
                            v-if="gridDataReady"
                            :column="props.column"
                            :filterable="props.filterable"
                            :filter="props.filter"
                            :data-items="dataItems"
                            @filterChange="(e) => props.onFilterchange(e)"
                            @closeMenu="(e) => props.onClosemenu(e)"
                            @contentFocus="(e) => props.onContentfocus(e)"
                        ></NbGenericCheckboxesColumnFilter>
</template>

Grid

asked on 03 Feb 2023

1 answer

54 views

Customize Scheduler header

Hi,

Im using kendo Scheduler in my vue project. I need to customize the scheduler header. First image is the default header I'm getting. I need to customize it as shown in the second image.I need to show the date and then a button to change the date and finally a button to go to current date. Is there a way to customize this scheduler header.

Thanks in advance.

answered on 23 Jul 2019

11 answers

2.5K+ views

Binding kendo multiselect to array of objects

How can I bind a kendo multiselect to a list of objects? The v-model binding only returns an array with the values of data-value-field.

<kendo-multiselect

id="employees"

v-model="selectedEmployees"

:data-source="employeesDataSource"

:data-text-field="'name'"

:data-value-field="'employeeNumber'"

:delay="1000"

:auto-bind="true"

:min-length="2">

</kendo-multiselect>

In the example above selectedEmployees will be set to an array of employee numbers instead of employee objects. How can I get it so work with objects instead?

answered on 28 Oct 2019

1 answer

281 views

How to disable checkboxes in Dropdowntree

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>

DropDownTree wrapper

answered on 24 Jun 2021

0 answers

73 views

How to change Column string search functionality from startsWith to any other value

Hello,

We are using kendo vue native component Grid.

FilWe do have column filtration. We noticed that when we filter a column with string values from column filter, the search that is being done, is a startsWith. For our business purposes we want to change startsWith to Contains for example.

Is there a clean way of doing this? Do you have any suggestions or examples?

Thanks

Grid

asked on 10 Jul 2023

1 answer

73 views

Native grid single select

Is there an easy way to allow only one item selected in the navite grid? I find it strange that it's not a simple prop to add to the component.

Thank you.

Checkbox

Grid

answered on 14 Mar 2022

1 answer

53 views

Select all checkboxes kendo-treeview-vue-wrapper

Hi Everyone,

I had implemented tree view wrapper for vue and I need to make a functionality that select or unselect all checkboxes in the tree view.

I'm using the latests versions of treeview-vue-wrapper and vue js.

Hope you could help me.

Thanks

TreeView wrapper

answered on 04 Apr 2023

1 answer

83 views

Use Kendo native component with CDN jquery culture

Currently I have a website that runs Kendo for jQuery which uses multiple cultures in the old Wrapper Components way. I want to re-use these files to change the culture of the new Kendo Native Components. Is that possible? If not, how can I do this with the new culture implementation.

Below I have added a Stackblitz with jQuery culture and Native Components which isn't working atm.

https://stackblitz.com/edit/nlfavc?file=src/main.vue

DatePicker

Localization

NumericTextBox

updated question on 18 May 2022

5 answers

313 views

selecting rows in kendo-grid for vue, is slow

Hello
We are developing a module whereby what is selected on one grid filters a second grid. As part of this we need to enable multi-select on the master grid.

I have two separate scripts for getting the data item of the selected grids, but both seem a little slow, ~1 sec to ~3 secs.

The scripts we are testing are:

onChange: function(ev) {

var that = this;

var selected = $.map(ev.sender.select(), function(item) {

var tr = $(item).closest('tr');

var grid = that.$refs.itemsGrid.kendoWidget();

var data = grid.dataItem(tr);

return data.itemNumber;

});

this.$root.$emit('item-grid-selected',selected);

},

change: function(e) {

var selectedRows = e.sender.select();

var selectedDataItems = [];

for (var i = 0; i < selectedRows.length; i++) {

var dataItem = e.sender.dataItem(selectedRows[i]);

selectedDataItems.push(dataItem.name);

}

console.log(selectedDataItems);// contains all selected data items

this.$root.$emit('item-grid-selected',selectedDataItems);

},

with the grid code of:

<kendo-grid ref="itemsGrid"

:data-source="items"

v-on:databound="autoFitColumns"

:sortable-mode="'single'"

:sortable-allow-unsort="true"

:groupable="true"

:pageable="false"

:page-size="20"

:pageable-page-size="10"

:pageable-always-visible="false"

:filterable-mode="'row'"

:selectable="'multiple'"

:toolbar="[]"

:editable="false"

:server-paging="false"

:column-menu="true"

:scrollable-horizontal="true"

v-on:change="change"

v-on:save="grid_save">

</kendo-grid>

Without any event raised on the change event of the grid, the selection following a click of any rows in the grid is seemingly instant. Just for info, there are only three rows in this table, so it is not because there is a lot to go through.

Can you make any suggestions for speeding this up?

Regards
John