Hi,
I am currently attempting to upgrade the Kendo UI from 2022.2.510 to 2023.2.829 and need some assistance figuring out which .css files and .js files are the closest match to what I have for 2022.2.510. Wow it's different....seems like most of the css and javascript libraries have been reorganized.
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.common.min.css" />
<link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.mobile.min.css" />
<link rel="stylesheet" href="FontAwesome/font-awesome-4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="styles/jquery_1.12.0-rc2/jquery-ui.min.css" />
<!-- JAVASCRIPT -->
<script type="text/javascript" src="Kendo/2023.2.829/js/jquery.min.js"></script>
<script type="text/javascript" src="Kendo/2023.2.829/js/jszip.min.js"></script>
<script type="text/javascript" src="Kendo/2023.2.829/js/kendo.all.min.js"></script>
<script type="text/javascript" src="Kendo/2023.2.829/js/kendo.timezones.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/populateTable.js"></script>
<script type="text/javascript" src="scripts/interimDataRecs.js"></script>
<script type="text/javascript" src="scripts/payrollDataRecs.js"></script>
I am fairly new at working with the Kendo UI -- I may just need to be pointed to documentation or a README that maps the old files to the new(?). I am not using anything fancy...these are pretty much the default controls.
So far I have not attempted to swap out ANYTHING.... I don't even know where to begin.. I am however, starting to do this shortly. Yikes!
FYI: I am using the following controls:
Be curious if you all have a recommend approach or stratedgy to upgrading Kendo UI for jQuery libraries?
I'd also like to know the best approach to minifying the Kendo folders?
The Kendo stuff is stashed in the wwwroot (I did not design this structurer ... but I am stuck with it.):
Thanks for your help and patience ^__^
George
I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.
The js code block I wrote for solution but it does not work properly:
// The code inside the databound function of master grid
$("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
if ($(this).hasClass("k-i-expand")) { // if the grid is expand
// uid of tr element
var tr_UID = $(this).parents("tr").data("uid");
// master grid
var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");
$(ustGrid.dataSource.data()).each(function (i, item) {
if (item.uid == tr_UID) {
var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
var rowCount = altGrid.dataSource.view().length;
$("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
}
});
}
});
// This code block only works on second clicking the expan button.
// Does not recognize the second grid when clicked for the firs time
// Should I use databound for second grid? However I do not know how can I do that.
Hello,
I am new to Kendo UI. I am trying to create a hierarchy grid with two json data sources with the following code (two json files at the bottom of the post). The filter doesn't seem to take any effect. All movies are listed for both categories. It is the same when I change the filter to 'filter: { "field": "category", "operator": "eq", "value": "Drama"}'. What am I missing? Thanks.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "https://www.example.com/category.json"
},
schema: {
data: "categories"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "categoryName",
title: "Category",
width: "110px"
},
{
field: "description",
title: "Description",
width: "110px"
}
]
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "json",
transport: {
read: "https://www.example.com/movie.json"
},
schema: {
data: "movies"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 100,
filter: { field: "category", operator: "eq", value: e.data.categoryName }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "title", width: "110px" },
{ field: "year", width: "110px" }
]
});
}
</script>
</div>
#############################################################
category.json:
{
"categories": [
{
"categoryName": "SciFi",
"description": "SciFi movies since 1970"
},
{
"categoryName": "Drama",
"description": "Drama movies since 1990"
}
]
}
###############################################################
movie.json:
{
"movies": [
{ "title": "Star Wars: A New Hope", "year": 1977, "category": "SciFi" },
{ "title": "Star Wars: The Empire Strikes Back", "year": 1980, "category": "SciFi" },
{ "title": "Star Wars: Return of the Jedi", "year": 1983, "category": "SciFi" },
{ "title": "The Shawshenk Redemption", "year": 1994, "category": "Drama" },
{ "title": "Fight Club", "year": 1999, "category": "Drama" },
{ "title": "The Usual Suspects", "year": 1995, "category": "Drama" }
]
}
I am designing a hierarchy of pages and components and I am trying to figure out what _attachBubbleHandlers is used for considering it basically does:
that._data.bind(ERROR, e => {
that.trigger(ERROR, e);
});
where that._data is an ObservableArray which never triggers the error event.
See https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.data.js#L4856
Please clarify.
Dojo demonstrating the issue: https://dojo.telerik.com/@ian+telerik@ocucom.com/EBeDE
When using a HierarchicalDataSource bound to a viewModel, using any method to insert a new row in a child datasource results in a duplicate top-level item in the bound HTML view, until the "change" event is manually triggered on the parent.
My goal is putting together a hierarchical product editor (for, say, departments and employees; some hierarchy where the children are of differing object types to the parent).
If I have a node in a HierarchicalDataSource, and I want to sync changes to it, I assume I should call
node.parentNode().children.sync()
When I call this, the resulting data packet contains, as its 'id' property, the id of the parentNode, not of the child.
This seems to be due to the fact that kendo.data.Node's _initChildren function indiscriminately applies the parent's identity to the request's data object.
Clearly, that makes no sense for update/delete actions, where some other property would make more sense, or the ability to include or not include the parent property.
Arguably, the entire path should be available, for situations where a node can exist in multiple places in the tree.
I suppose I could overcome this with the data: property being a function, but I think the basic assumption is mistaken.