<link rel="preload" href="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js" as="script"/>
https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js
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/kendo-vue-intl@2.7.3/dist/cdn/js/kendo-vue-intl.js" as="script"/>
<link rel="preload" href="https://unpkg.com/@progress/kendo-vue-grid@1.2.0/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/kendo-vue-excel-export@1.2.0/dist/cdn/js/kendo-vue-excel-export.js" as="script"/>
<link rel="preload" href ="https://unpkg.com/@progress/kendo-theme-default@4.43.0/dist/all.css" as="style" />
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@4.43.0/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)"> </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)"> </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/kendo-vue-intl@2.7.3/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/@progress/kendo-vue-grid@1.2.0/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/kendo-vue-excel-export@1.2.0/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
1 Answer, 1 is accepted
0
Hi, Shivam,
I reviewed the provided code and noticed that it uses the Kendo UI Wrappers for Vue, which reached end-of-life (EOL) in May 2024. After May 2024 no new versions of the Wrapper components will be released.
It appears that a Chinese security mechanism is inspecting the source code of all web applications. Since customizing the current script is not feasible in this context, I recommend migrating to the Kendo UI for Vue NativeGrid component. Unlike the wrappers, it does not rely on jQuery internally and should avoid triggering the current error. More information on the KendoUI for Vue Native Grid can be found here:
- https://www.telerik.com/kendo-vue-ui/components/grid
- https://www.telerik.com/kendo-vue-ui/components/vue-wrappers-deprecation#vue-wrappers-migration-guide
Please let me know in case further questions arise on this matter and I will gladly assist.
Regards,
Filip
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.