What is the best way to get data and bind to these controls?
1. Make everything an individual datasource
2. One data source which will have all the collections and bind them once the read request is completed
3. Any other approach?
6 Answers, 1 is accepted
The most basic and common sense thing is to use a shared DataSource for the two DropDownLists and separate DataSources for the other widgets.
http://docs.telerik.com/kendo-ui/framework/datasource/overview#binding-ui-widgets-to-the-kendo-ui-datasource
Theoretcally, it is possible to retrieve all collections with a single request and when the response arrives, distribute the data among several different Kendo UI widgets via the so called local data binding.
http://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#creating-a-datasource-for-local-data
http://docs.telerik.com/kendo-ui/framework/datasource/overview#creating-a-local-datasource-in-line-with-ui-widget-configuration
If you think that this optimization will make a difference in your case, keep in mind that it is applicable only if the data will not change later, otherwise you will need to do a lot of manual coding related to rebinding or CRUD operations.
Regards,
Dimo
Telerik
Rank 1
HTML Markup:
<div> <input id="PrimaryClass" name="PrimaryHazard" data-role="dropdownlist" data-value-field="Id" data-text-field="ClassName" data-bind="source: hazard" /></div><div> <input id="SecondaryClass" name="SecondaryHazard" data-role="dropdownlist" data-value-field="Id" data-text-field="class" data-bind="source: hazard" /></div>Data Source:
var classNames = new kendo.data.DataSource({ schema: { model: { id: "Id" } }, transport: { read: { url: 'Api/Classes', dataType: 'json', type: 'GET' } }});Model:
var classModel = kendo.observable({ title: "", class: classNames,});If i define this way there are two calls to the service to get class names. Do i need to retrieve the data separately and bind to drop-down lists once the read request end?
Rank 1
Normally, a dataSource instance will not make unnecessary repetitive data requests even when used by multiple widgets, however, this is theoretically possible in certain scenarios. Make sure you are not calling read() instead of fetch() somewhere.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-fetch
Another possible option is to try setting data-auto-bind="false" to all widgets, which use a shared DataSource, except one widget, which will trigger the data request.
If you need more information oin your scenario, please send me a runnable example, so that I can inspect it.
Regards,
Dimo
Telerik
Rank 1
Iron
Below is a sample code for shared datasource , everything looks well till I scroll to a point where the page changes which causes the grid to miss align , how to overcome this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
h1 {
color: Green;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #08c708;
width: 3000px;
overflow-x: auto;
overflow-y: auto;
white-space: nowrap;
}
#container {
overflow: auto;
width: 2000px;
}
#inner {
overflow: hidden;
width: 20000px;
}
.child {
float: left;
width: 500px;
height: 50px;
}
</style>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="container">
<div id="inner">
<div id="grid1" class="child"></div>
<div id="grid2" class="child"></div>
<div id="grid3" class="child"></div>
<div id="grid4" class="child"></div>
<div id="grid5" class="child"></div>
<div id="grid6" class="child"></div>
<div style="height: 2367px;"> </div>
</div></div></div>
<script>
$(document).ready(function () {
Window.Ds = new kendo.data.DataSource({
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 200
});
<!-- var ds1 =new kendo.data.DataSource(Window.Ds); -->
<!-- ds1.read(); -->
<!-- var ds2 =new kendo.data.DataSource(Window.Ds); -->
<!-- ds2.read(); -->
var g1= $("#grid1").kendoGrid({
// dataSource:Window.Ds ,
height: 2500,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
scrollable: {
virtual: true
},
resizable: true,
dataBound: function (e) {
var dataElement =$("#grid1").data("kendoGrid").content;
<!-- $('#grid1').data("kendoGrid").content.find(".k-virtual-scrollable-wrap").scroll(function () { -->
<!-- // $("#grid2").data("kendoGrid").wrapper.find(".k-auto-scrollable").scrollTop( ); -->
<!-- $('#grid2 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop()); -->
<!-- $('#grid3 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop()); -->
<!-- $('#grid4 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop()); -->
<!-- }); -->
$('#grid2 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop());
$('#grid3 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop());
$('#grid4 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop());
},
columns: [{
field: "OrderID",
title: "Order ID",
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
}, {
field: "ShipName",
title: "Ship Name",
width: 300
}, {
field: "ShipAddress",
width: 400
}
]
});
$("#grid3").kendoGrid({
dataSource: Window.Ds,
height: 2500,
scrollable: {
virtual: true
},
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
dataBound: function (e) {
},
columns: [{
field: "OrderID",
title: "Order ID",
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
}, {
field: "ShipName",
title: "Ship Name",
width: 300
}, {
field: "ShipAddress",
width: 400
}
]
});
$("#grid2").kendoGrid({
dataSource: Window.Ds,
height: 2500,
scrollable: {
virtual: true
},
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
dataBound: function (e) {
},
columns: [{
field: "OrderID",
title: "Order ID",
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
}, {
field: "ShipName",
title: "Ship Name",
width: 300
}, {
field: "ShipAddress",
width: 400
}
]
});
$("#grid4").kendoGrid({
dataSource: Window.Ds,
height: 2500,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
dataBound: function (e) {
},
columns: [{
field: "OrderID",
title: "Order ID",
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
}, {
field: "ShipName",
title: "Ship Name",
width: 300
}, {
field: "ShipAddress",
width: 400
}
]
});
$("#grid5").kendoGrid({
dataSource: Window.Ds,
height: 2500,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true, scrollable: {
virtual: true
},
dataBound: function (e) {
},
columns: [{
field: "OrderID",
title: "Order ID",
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
}, {
field: "ShipName",
title: "Ship Name",
width: 300
}, {
field: "ShipAddress",
width: 400
}
]
});
});
</script>
</body>
</html>
Hello Jagan,
I noticed that colleague Neli, replied earlier in the thread (ticket ID: 1587140) regarding the same scenario about shared DataSource.
For convenience, please find below her reply
However, the Grids are rendered as expected on my side. Here is a screencast where you could see their behavior and appearance. Could you please provide a little bit more details on the issue, as I am not sure that I understand it correctly? Please specify what exactly is misaligned, are the rows or columns, etc.?
I would reccommend to keep the conversation in a single thread.
Regards,
Lyuboslav
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.