Questions on Kendo UI for Vue Forum

1 answer

6 views

Request for Customization and Licensing Clarification Regarding Kendo Script and YouTube API

This is the Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MassEditVCR.aspx.cs" Inherits="NGC.Web.Application.MassEditVCR" %>
<%@ Import Namespace="NGC.Language" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><%=NGC.Language.LM.GetString("LBL_MASS_EDIT_VCR")%></title>
		<%--<meta id="dataTableName" name="dataTableName" content="productionorder" runat="server" />--%>

		<meta id="securityID" name="securityID" content="60316" runat="server" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<link  rel="preload"  href="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"  as="script"/>
	<link  rel="preload"  href="https://unpkg.com/@progress/[email protected]/dist/cdn/js/kendo-vue-intl.js"  as="script"/>
	<link  rel="preload" href="https://unpkg.com/@progress/[email protected]/dist/cdn/js/kendo-vue-grid.js"  as="script"/>
	<link  rel="preload" href="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"  as="script"/>
	<link  rel="preload" href="https://unpkg.com/@progress/[email protected]/dist/cdn/js/kendo-vue-excel-export.js"  as="script"/>
	<link  rel="preload" href ="https://unpkg.com/@progress/[email protected]/dist/all.css" as="style" />

	<link rel="stylesheet" href="https://unpkg.com/@progress/[email protected]/dist/all.css" />
    
</head>
<body>
	<div id="sg1">
		<div id="maintoolbar" data-ngc-toolbartable="productionorder" data-ngc-role="toolbar">
				<div class="section">
				<h1><%=NGC.Language.LM.GetString("LBL_MASS_EDIT_VCR")%></h1></div>
		<div class="defaults noPrint">
	<input type="button" name="btn_boxtoggle" id="btn_boxtoggle" title="Collapser" value="Collapser" class="noPrint btncollapse BtnLayoutIcon BtnActive BtnIconExpand"  @click="toogleExpandedRows" >
		<button  @click="save" class="k-button BtnLayoutIconText BtnIconSave DoPost"><%=NGC.Language.LM.GetString("LBL_SAVE")%></button>
		<button  @click="saveAndSubmit" class="k-button BtnLayoutIconText BtnIconSave DoPost"><%=NGC.Language.LM.GetString("LBL_SAVE_SUBMIT")%></button>
		<button @click="refreshData" class="k-button BtnLayoutIconText BtnIconCancel DoPost"><%=NGC.Language.LM.GetString("LBL_CANCEL")%></button>
		<div class="custombutton">
		<button   @click="loadRecords" class="k-button BtnIconDownload  BtnLayoutIconText DoPost" id ="loadRecords"><%=NGC.Language.LM.GetString("LBL_LOAD_MORE")%></button>		
		<button @click="exportExcel" class="k-button BtnIconFileExcel  BtnLayoutIconText"><%=NGC.Language.LM.GetString("LBL_EXPORT_EXCEL")%></button>
		<button id="btn_configure" @click="configure" class="k-button BtnIconConfigure  BtnLayoutIconText" style="display: none;"><%=NGC.Language.LM.GetString("LBL_SELECT_COLUMNS")%></button>
		</div>
	</div>
	</div>
		<div id="toolbarSeparator"></div>
			<div class="otheritems">
				<NGC:Field ID="view" Label="LBL_VIEW" runat="server" IsDisabled="true" DataSource="viewname" Validation="ReadOnly" />
	</div>
		<kendo-grid :style="{height:  '600px', width: '100%'}" 
			id="renderedData"
			:data-items="gridData"
			:cell-render="cellFunction"
			:row-render ="rowRender"
			:resizable="true"
			:pageable="true"
			:skip= "skip"
			:take="take"
			:total="total"
			:sortable="true"
			:sort= "sort"
			:selectable="true"
			:selected-field="selectedField"
			:filter="filter"
			:filterable="true"
			:groupable="{footer: 'visible'}"
			:group= "group"
			:expand-field="'expanded'"
			:columns = "columns"
			 :edit-field="'inEdit'"
			:reorderable="true"
			@columnreorder="columnReorder"
			@datastatechange="dataStateChange"
			@selectionchange="onSelectionChange"
			@headerselectionchange="onHeaderSelectionChange"
			@expandchange="expandChange"
			@pagechange="pageChangeHandler" 
			>
			<template v-slot:myreasonCell="{props}">
			<td>
			<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'" class="field"  data-ngc-hint="search"   :class="classObject(props)">
				<input  data-ngc-datatype="text" :value="props.dataItem[props.field]" v-on:change="setDataFields(props, event)" />
				<span   v-on:click="openSearch(props)">&nbsp;</span>
			</div>
			</td>
			</template>
			<template v-slot:checkboxCell="{props}">
				<td>
					<div :data-item="props.field"  v-if="props.rowType !== 'groupFooter'"  :class="classObject(props)">
					<input type="checkbox"   data-ngc-datatype="bit" :value="props.dataItem[props.field]" :checked="props.dataItem[props.field]" @change="setDataFields(props, event)"/>
					</div>
				</td>
			</template>
			<template v-slot:textareaCell="{props}">
				<td>
					<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'"  class="field"  :class="classObject(props)">
					<textarea class="font" data-ngc-datatype="text" cols="60" rows="4" style="height: 50px; min-width: 200px; width: 100%;"  :value="props.dataItem[props.field]" v-on:change="setDataFields(props,event)"></textarea>
					</div>
				</td>
			</template>
			<template v-slot:dateCell="{props}">
			<td>
				<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'"  class="field "	data-ngc-hint="datepicker"   :class="classObject(props)" >
				 <input  type="text" :id="(props.dataIndex === -1 ?  props.dataItem.value : props.dataIndex) + props.field" maxlength="10" :value="setFieldValue(props,'date')" 
				 data-ngc-datatype="date"   v-on:change="setDataFields(props ,event)">
				<span  data-ngc-role="datepicker"  v-on:click="__NGCdatepickerMethods.callDatePicker((props.dataIndex === -1 ?  props.dataItem.value : props.dataIndex) + props.field)">&nbsp;</span>
				</div>
			</td>
			</template>
			<template v-slot:intCell="{props}">
			<td>
					<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'"  class="field " data-ngc-datatype="int"  :class="classObject(props)">
					 <input type="number"  :value="props.dataItem[props.field]"  min="0.0000" max="1000000000.0000" data-ngc-role="field" 
					data-ngc-validation="Number" data-ngc-datatype="number" v-on:change="setDataFields(props ,event)" ></div>
			</td>
			</template>	
				<template v-slot:moneyCell="{props}">
				<td>
					<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'"  class="field "  data-ngc-datatype="money"  :class="classObject(props)">
					 <input type="number"   data-ngc-datatype="money"   :value="props.dataItem[props.field]"   min="0.0000" max="1000000000.0000" data-ngc-role="field" 
					data-ngc-validation="Number|Decimal|Money" step="0.0001" data-ngc-precision="4"  v-on:change="setDataFields(props ,event)" ></div>
			</td>
			</template>	
		     <grid-toolbar>
			<button  @click="copy(event)" class="k-button BtnLayoutIconText BtnIconCopy DoPost"><%=NGC.Language.LM.GetString("LBL_COPY")%></button>
			<div class="checkBox">
			<input type="checkbox" v-model="filterModifiedRow"  @change="showModifiedRows(event)"/><label id="label_showModifiedRow" for="showModifiedRow"><%=NGC.Language.LM.GetString("LBL_FILTER_MODIFIED_LINES")%></label>                 
			</div> 
			<div class="freezefields"><input type="number" id="freezedcolumns" name="freezedcolumns" v-model="freezeColumns"  min="0.0000" max="1000000000.0000" @change="updatefreezeColumns(event)"   data-ngc-validation="Number" step="any" data-ngc-precision="0" title="4" class="">
			</div>
			<div class="labelBox"><label id="label_freezefields" for="freezefieldscolumn"><%=NGC.Language.LM.GetString("LBL_FREEZE_COLUMNS")%></label></div>
			<div class="inputFilter customfilter ">
					<input id="filter_filterobj" name="filter_criteria" type="text"  v-model="searchWord"><input id="dashboarditems_clear" type="button" class="inputClearButton"  @click="searchClear()" value="Clear">
				</div>
			
			</grid-toolbar>
</kendo-grid>
		<input type="hidden" id="productionOrderIDJSON" runat="server" />
		<input type="hidden" id="quantityreasoncodes" runat="server" />
		<input type="hidden" id="condition" runat="server" />
		<input type="hidden" id="isrequirefactorycommentsvcr" runat="server" />
	</div>
	<script src="https://unpkg.com/@progress/[email protected]/dist/cdn/js/kendo-vue-intl.js"></script>
	<script src="https://unpkg.com/@progress/[email protected]/dist/cdn/js/kendo-vue-grid.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
	<script src="https://unpkg.com/@progress/[email protected]/dist/cdn/js/kendo-vue-excel-export.js"></script>
<NGC:SearchResults runat="server" ID="ngcsearchresult" />
</body>
</html>

This error is coming in the console

The main kendo script is referencing a youtube.api interface, this is the reason the control will not work in China. We will need help to get support from Telerik to see if it is possible to customize the main script by removing all references to "youtube", and also to find out if we can distribute the script under the licensing terms (we would have to include the script in our Web/scripts folder - not import from the Telerik source).

Please give me some guidance and help to resolve that issue

Grid wrapper

answered on 06 Aug 2025

1 answer

10 views

Discontinued Wrapper Migration Q

First off: I know they are discontinued, not looking for support on them, this is a migration question

I'm investigating the possibility of migrating from vue2 to vue3 on our CMS, we have a bunch of vue2 kendoui vue2 wrapper widgets.

I have loaded the vue3 compat script and the widgets seem to still load (albeit with the warnings in the console). But will the continue to work if I fully move to vue3 or do they only work in the context of vue2.

General Discussions

answered on 01 Aug 2025

1 answer

10 views

How to populate dropdowntree with loadondemand

I am using Vuejs 2.x.

I am trying to use the dropdowntree to display a large hierarchy.

I am also trying to use the ValueMapper to pre load the checked items.

The problem I have is that the valueMapper is not being called until I start clicking on nodes.

How to I get the valueMapper to check the correct nodes when the page is rendered?

Here is my code:

<body>
    <input id="dropdowntree">
<script>
  $(document).ready(function () {

    var localData = [
        { id: 1, text: "Parent 1", items: [
            { id: 2, text: "Child 1.1" },
            { id: 3, text: "Child 1.2" }
        ]},
        { id: 4, text: "Parent 2", items: [
            { id: 5, text: "Child 2.1" },
            { id: 6, text: "Child 2.2" }
        ]}
    ];
    
    
    var dropDownTree = $("#dropdowntree").kendoDropDownTree({
      placeholder: "Select an item...",
      dataSource: {  
        data: localData,
      schema: {
        model: {
            id: "id", 
            children: "items",
            fields: {
                id: { type: "number" },
                text: { type: "string" }
            }
        }
      }      
      },
      loadOnDemand: {
//THIS IS NOT CALLED UNTIL I START CLICKING NODES
        valueMapper: function (options) {
        var value = options.value;
        var item = localData.find(function (dataItem) {
            return dataItem.id == value;
        });
        options.success(item ? [item.id] : []);
        }
      },
      dataTextField: "text",
      dataValueField: "id",		
      //value: [2,5],    //SETTING THIS DID NOT HELP
      checkboxes: true, 
      checkAll: true,   
      autoClose: false
    });

    dropDownTree.value = [5]; // Trying to manually set value and call the valuemapper
  });
</script>
    
</body>

DropDownList

answered on 31 Jul 2025

1 answer

15 views

Best way to display hierarchy dropdown with large data set

I am using Vue.js 2.x and Kendo controls.

Currently we are using the Kendo dropdowntree control to display hierarchy data.

Our control allows:

-1 or more items to be selected

-Also, once the data is saved, if the record is edited later, the dropdowntree will check each item that was previously checked.

-The properties we set in the dropdowntree:

      :data-source="items"
      tagMode="single"
      :autoClose="false"
      :checkboxes-check-children="checkChildren"
      :check-all="true"
      :placeholder="placeholder"
      dataTextField="text"
      dataValueField="id"
      @change="onChange"
      :value="selectedItems"
      style="width: 100%"
      height="400px"
      :load-on-demand="false"

The problem we have is that we have a scenario where a large hierarchy is being returned from the API with over 2000 rows.

This is causing the dropdowntree to take a long time to populate the control.

Is there a recommended way for the dropdowntree to handle large amounts of data?

Is there another control that can handle large amounts of data and display the data like the dropdowntree?

Is there another recommended way to display a hierarchy dropdown that acts like the dropdowntree?

DropDownList

DropDownTree wrapper

answered on 30 Jul 2025

1 answer

14 views

Customizing the button 's appearance through the available Sass variables

Unless I'm mistaken, but I cannot customize the apperance of Button which have the properties: 'theme-color' and 'fill-mode'.
In my case, I would like change the variable kendo-button-focus-shadow in the button : fill-mode (outline) and theme-color(primary).

Button

Styling / Themes

answered on 24 Jul 2025

0 answers

29 views

[Vue 3] Update DatePicker value using vue-test-utils

Hello, I am using the DatePicker component from the @progress/kendo-vue-dateinputs package.

I am trying to update the value of the date picker in a unit test using vue-test-utils.

I have tried the following, which is how I would ordinarily update input values:

const input = wrapper.find('input[id="my-date-field"]');

endDateInput.setValue('01/01/2025');
await nextTick();
endDateInput.trigger('change');
await nextTick();

This does seem to update the value, but does not update it correctly.

A snapshot of the markup after setting the value this way shows that it appears to set the year based on the last 2 digits of the new value, but not correctly, and it is also missing the dd/mm parts:

<input role="combobox"class="k-input-inner" id="my-date-field" value="dd/mm/0025" etc...>

Is there a way in which I can update the date picker value correctly?

I appreciate that the calendar popup is appended to <body>, so setting the value using that programatically is not possible, but any way of being able to update the input value is fine.

Happy to provide a minimal repro if required.

DateInput

DatePicker

DateTimePicker

updated question on 25 Jun 2025

0 answers

74 views

Issue with Data Columns Not Displaying Properly During Horizontal Scrolling (Vue 3)

Hello,

I'm currently using Vue 3 with Kendo UI Grid for Vue (version 4.3.3).
My grid has Multiple columns and Multi-headers.

However, when I scroll horizontally, the data columns are not displayed correctly.
They either appear misaligned or are not rendered properly.

Could you please advise how to resolve this issue?

Any help would be greatly appreciated.

<template style="table-layout: fixed;">
    <div class="row">
      <div class="col m-3">
        <Button @click="loadItems">Load 100 000 items</Button>
      </div>
    </div>
    <div class="row">
      <div class="col m-3">
        Virtual Scrolling
        <Switch @change="handleSwitchChange" :on-label="''" :off-label="''" />
        Paging
      </div>
    </div>
    <Grid
      :key="isPagingOn"
      :style="{ height: '440px' }"
      :scrollable="isPagingOn ? 'scrollable' : 'virtual'"
      :column-virtualization="true"
      :skip="skip"
      :take="take"
      :total="numberOfRows"
      :data-items="items"
      :columns="columns"
      :row-height="27"
      :pageable="isPagingOn ? pagerSettings : false"
      @pagechange="pageChange"
      :sortable="true"
      @sortchange="sortChange"
      :sort="sort"
      @cellclick="cellClick"
      @rowclick="rowClick"
      :page-size="10"
      :edit-field="'inEdit'"
      :data-item-key="'id'"
      @itemchange="itemChange"
    >
    </Grid>
  </template>
  <script>
  import { orderBy } from '@progress/kendo-data-query';
import { Button } from '@progress/kendo-vue-buttons';
import { Grid } from '@progress/kendo-vue-grid';
import { Switch } from '@progress/kendo-vue-inputs';
  export default {
    components: {
      Grid,
      Button,
      Switch,
    },
    data: function () {
      return {
        dataItems: [],
        data: [],
        numberOfColumns: 100,
        numberOfRows: 100000,
        pagerSettings: {
          info: true,
          type: 'input',
          previousNext: true,
        },
        columns: [],
        expandColumn: 'expanded',
        expandField: 'expanded',
        skip: 0,
        take: 20,
        isPagingOn: false,
        sort: [],
        items: [],
      };
    },
    created: function () {
      this.columns = this.createColumns();
      this.data = this.getData();
    },
    methods: {
      itemChange: function (e) {
        e.dataItem[e.field] = e.value;
      },
      cellClick: function (e) {
        if (e.dataItem.inEdit && e.field === this.editField) {
          return;
        }
        this.editField = e.field;
        e.dataItem.inEdit = e.field;
      },
      rowClick: function (e) {
        this.items.forEach((d) => {
          if (d.inEdit) {
            if (e.dataItem !== d) {
              d.inEdit = undefined;
            }
          }
        });
      },
      loadItems() {
        this.dataItems = this.data;
        this.items = this.dataItems.slice(this.skip, this.skip + this.take);
      },
      createColumns() {
        const columns = [
          {
            field: 'id',
            width: '150px',
          },
          {
            field: 'Field-1',
            width: '150px',
          },
          {
            title: 'test',
            children: [
              {
                field: 'Field-2',
                width: '150px',
              },
              {
                field: 'Field-3',
                width: '150px',
              },
              {
                field: 'Field-4',
                width: '150px',
              },
              {
                field: 'Field-5',
                width: '150px',
              },
              {
                field: 'Field-6',
                width: '150px',
              },
              {
                field: 'Field-7',
                width: '150px',
              },
              {
                field: 'Field-8',
                width: '150px',
              },
              {
                field: 'Field-9',
                width: '150px',
              },
              {
                field: 'Field-10',
                width: '150px',
              },
              {
                field: 'Field-11',
                width: '150px',
              },
              {
                field: 'Field-12',
                width: '150px',
              },
              {
                field: 'Field-13',
                width: '150px',
              },
              {
                field: 'Field-14',
                width: '150px',
              },
              {
                field: 'Field-15',
                width: '150px',
              },
            ]
          }
        ];
        /* for (let c = 1; c <= this.numberOfColumns; c++) {
          columns.push({
            field: 'Field-' + c.toString(),
            width: '150px',
          });
        } */
        return columns;
      },
      pageChange(event) {
        this.skip = event.page.skip;
        this.take = event.page.take;
        this.items = this.dataItems.slice(this.skip, this.skip + this.take);
      },
      handleSwitchChange(e) {
        this.isPagingOn = e.value;
      },
      sortChange(e) {
        this.dataItems = orderBy(this.data, e.sort);
        this.items = this.dataItems.slice(this.skip, this.skip + this.take);
        this.sort = e.sort;
      },
      getData() {
        const page = [];
        for (let r = 1; r <= this.numberOfRows; r++) {
          const row = {
            id: r,
          };
          for (let c = 1; c <= this.numberOfColumns; c++) {
            row['Field-' + c] = 'R' + r + ':C' + c;
          }
          page.push(row);
        }
        return page;
      },
    },
  };
  </script>

Thank you.

Grid

updated question on 09 Jun 2025

0 answers

42 views

How to mark specific dates in the calendar component

The project requires marking activities dates , so I want to highlight the corresponding event dates in the calendar component by displaying them with a red background. Are there any relevant methods for this?

I've checked the customization options in the documentation:

- The `CalendarCell` method only allows selecting dates within the current month and cannot select dates from other months.
- The `slot` method does not support selecting dates, months, or years.

Is there another way to achieve this?

Calendar

asked on 09 May 2025

0 answers

36 views

Datepicker Custom Date allowed - All other dates should be disabled

Hi All,

I have a query which goes as below -

We have min and max dates already applied to this datepicker.
But we want to go one step ahead and disable all the dates of the month save the last date between the min and max dates.

Thanks,
Ronnie

DatePicker

DateRangePicker