Rank 1
Hello,
We have upgraded our Kendo jQuery package. The previous version was 2019.1.220 and our latest version is 2023.3.1114. We observed that
- Some classes were changed in the new js say buttons in the kendo grid.
- Some CSS files are removed. (Assuming it is not compatible with the current version.
After upgrading some of our css are not getting applied. Attaching the screenshots for reference. I'm attaching my sample code.
Below are the stylesheets I'm using<link href="{{ URL::asset('css/boostrap_v4_alpha.css') }}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('kendo/styles/material-main.css') }}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('kendo/styles/font-icons/index.css') }}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('kendo/styles/bootstrap-main.css') }}" rel="stylesheet" type="text/css">1 Answer, 1 is accepted
Hello Abhijeet,
Straight to the questions.
- Indeed rendering changes have happened since 2019 including CSS classes renaming. For example, state classes, such as .k-state-disabled, are now not using the word "state" anymore. More information you can find in the following article:
I also recommend checking the Breaking Changes article before upgrading your project. It lists the breaking or important changes happening per release.
- Since R1 SP1 2023 Kendo jQuery release the Less Themes are no longer supported and shipped with the product. Below I am posting the Less to Sass Theme Migration article that you would like to follow to switch your project to a Sass theme:
Also, below you will find a blog post giving in-depth information about this decision and our future plans:
Regards,
Nikolay
Progress Telerik
Rank 1
What are the rendering changes that have occurred since 2019 in Kendo UI for jQuery, particularly regarding the renaming of CSS classes and state classes?
Hi Heather,
The state classes changes you can find listed in the following table:
The component rendering changes regarding their appearance are listed in the following table. You can click on each component to be redirected to their Appearance article.
- https://docs.telerik.com/kendo-ui/styles-and-layout/components-rendering-overview#updated-components
Feel free to submit a support ticket for any specific questions you mig ht have or problems you have encountered.
Regards,
Nikolay
Rank 1
var gridName = <HTML_SELECTOR+NAME>,
gridURL = <SERVER_URL>,
columnNames = [{
template: "# if((uploaded_status =='Delete In Process')||(uploaded_status =='GSTN Delete Error')||(uploaded_status =='Saved')|(uploaded_status =='Submitted')|(uploaded_status =='Filed') ){} else { # <input type='checkbox' class='checkBoxClassInv' name='selectgst[]' value='#: data.gstin_of_customer #:#: data.invoice_no #'> #}#",
field: "gstin",
title: "<input type='checkbox' check-id='checkBoxClassInv' class='checkAllGrid'>",
filterable: false,
sortable: false,
groupable: false,
width: 30
}, {
template: "<div class='status #: uploaded_status #'>#: uploaded_status #</div>",
field: "uploaded_status",
title: "Status",
width: 100
}, {
field: "outwardvsgstr1_status",
title: "OutwardVsGstr1 Status",
width: 90
}, {
field: "invoice_category",
title: "Tran Type",
width: 100
}, {
field: "doc_type",
title: "Doc Type",
width: 100
}, {
template: "<span class='grid-align-left'>#: customer_name #</span>",
field: "customer_name",
title: "Customer Name",
width: 200
}, {
template: "<span class='invoice_no' >#: invoice_no #</span>",
field: "invoice_no",
title: "Doc No ",
width: 100
}, {
field: "invoice_date",
title: "Doc Date",
width: 100
}, {
field: "place_of_supply",
title: "POS",
width: 90
}, {
command: [{
text: " ",
name: "Details",
click: outwardInvoiceDetails,
iconClass: "k-icon k-icon-20 k-i-info m-r-0-imp op-1"
}, {
text: " ",
name: "Edit",
click: outwardInvoiceEditDetails,
iconClass: "k-icon k-icon-20 k-i-edit m-r-0-imp op-1",
visible: function (dataItem) {
if ((dataItem.uploaded_status == 'Deleted') || (dataItem.uploaded_status == 'Pending Response') || (dataItem.uploaded_status == 'Delete In Process') || (dataItem.uploaded_status == 'GSTN Delete Error') || (dataItem.uploaded_status == 'Saved') || (dataItem.uploaded_status == 'Submitted') || (dataItem.uploaded_status == 'Filed')) { } else {
if (outwardManualEntryConf == 1 && editable == 1) {
return true;
} else {
return false;
}
}
}
}],
title: "<span class='select'>Details</span>",
width: 130
}],
gridData = {
p_gstin: gstin,
return_period: fpdate
};
//below is kendo grid defination
$("#" + gridId).empty().kendoGrid({
dataSource: {
transport: {
read: {
url: <SERVER_URL>,
type: "POST",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: gridData,
dataType: "json"
}
},
schema: {
aggregates: serverAggregateConf,
model: modelConf,
parse: function (response) {
//schema response structure
},
total: function (count) {
// custom total page counter
}
},
error: function (response) {
dataSourceError(response);
},
serverPaging: serverpgination,
pageSize: defaultPageSize,
aggregate: aggregateConf,
serverAggregates: typeof (serverAggregateConf) == 'undefined' ? false : true
},
dataBound: function (e) {
//UI manipulations logic
},
scrollable: true,
change: function (e) {
//setting heights as per UI
},
dataBinding: function () {
srno = (this.dataSource.page() - 1) * this.dataSource.pageSize();
},
noRecords: {
//custom message if no message
},
height: 800,
groupable: groupableConf,
sortable: sortableConf,
columnMenu: columnMenuConf,
resizable: resizableConf,
pageable: pagingConf,
filterable: filterConf,
columns: gridColumns,
excelExport: excelConf,
excel: {
allPages: true
}
}).data("kendoGrid");
Hello Abhijeet,
Is this error present only for 'Doc Type' column or any Grid columns?
Does this error pop up after upgrading the Kendo UI version?
I can suggest the jQuery version you are using is compatible with the Kendo UI version: https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support#jquery-version
Regards,
Nikolay
Rank 1
I'm getting this error for mostly all of the columns. I've just checked that my current jQuery version is `jQuery v3.7.1` which is compatible
Rank 1
Is my jQuery version 3.7.1 compatible with the current Kendo UI version, and are there any specific considerations I should be aware of when using this version of jQuery with Kendo UI?
Hello,
The jQuery 3.7.1 is compatible with the latest Kendo UI. All supported jQuery versions are listed in this article and if you find it there you should be fine.
Abhijeet, I would recommend submitting a private support thread and sharing the Grid declaration or even better a Dojo demo where the problem is replicated. We would be best able to assist you there.
Regards,
Nikolay
Rank 1
Hello Nikolay,
It will be really helpful if you help on how to submit a private support thread. I'll share the dojo demo
Hi Abhijeet,
You can log in to your Telerik account, hover your avatar, and select Support Center from the dropdown:
Then you can click on Contact Us:
Regards,
Nikolay
Rank 1
Hi Ian,
Please accept my apologies for the misleading information I gave previously.
The jQuery 3.7.1 has not yet been fully tested with Kendo UI. Once it is so and is compatible we will update the article in question.
Regards,
Nikolay
Because some CSS files have been removed because it is not compatible with the current version. So all old data is also deleted?
bob the robber