or
1 answer
3.5K+ views
The autoFitColum method sizes the chosen column to the correct size, but it also reduces all other columns to their width property as shown below.
I created some examples to show what I'm talking about by editing autoFitColumn - API Reference - Kendo UI Grid | Kendo UI for jQuery (telerik.com)
This behavior works out in cases where the auto fit column exceeds the grid width (see figure 1), but not in cases where the the data is Smaller than the grid (see figure 2).
The desired behavior, for me, would be for the autoFitColumn method to act like setting the width manually (see figure 3 or dojo example). I need scrollable to be true and grid width to be auto to work on any screen width. Allowing the rows to text-wrap doesn't work for scrolling large data tables.
Is figure 2 the intended behavior, and is there a way to achieve my desired behavior?
<div id="grid"></div><script>
$("#grid").kendoGrid({
columns: [
{ field: "name", width: 100 },
{ field: "age", width : 50 },
{ field: "quote" }
],
dataSource: [
{ name: "Jane Doe", age: 30, quote: "I like Pi." },
{ name: "John Doe", age: 33, quote: "The FitnessGram™ Pacer Test ... ding" }
],
scrollable: true,
width: 'auto'
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("quote");
</script>
figure 1: behavior of autoFitColumn if data is longer than grid is wide.
<div id="grid"></div><script>
$("#grid").kendoGrid({
columns: [
{ field: "name", width: 100 },
{ field: "age", width : 50 },
{ field: "quote", }
],
dataSource: [
{ name: "Jane Doe", age: 30, quote: "I like Pi." },
{ name: "John Doe", age: 33, quote: "I like Pi too." }
],
scrollable: true,
width: 'auto'
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("quote");
</script>
firuge 2: behavior of autoFitColumn if data is shorter than grid is wide
<div id="grid"></div><hr/><div id="grid2"></div><script>
$("#grid").kendoGrid({
columns: [
{ field: "name", width: 100 },
{ field: "age", width : 50 },
{ field: "quote", width : 3272 } //this width should be set by autoFitColumn instead of manually
],
dataSource: [
{ name: "Jane Doe", age: 30, quote: "I like Pi." },
{ name: "John Doe", age: 33, quote: "The FitnessGram™ Pacer Test ... ding" }
],
scrollable: true,
width: 'auto'
});
$("#grid2").kendoGrid({
columns: [
{ field: "name", width: 100 },
{ field: "age", width : 50 },
{ field: "quote", width: 93 }//this width should be set by autoFitColumn instead of manually
],
dataSource: [
{ name: "Jane Doe", age: 30, quote: "I like Pi." },
{ name: "John Doe", age: 33, quote: "I like Pi too" }
],
scrollable: true,
width: 'auto'
});
//I left this code in a comment to make switching back and forth between my desired and actual behavior easier
/*var grid = $("#grid").data("kendoGrid");
var grid2 = $("#grid2").data("kendoGrid");
grid.autoFitColumn("quote");
grid2.autoFitColumn("quote");*/
</script>
figure 3: desired visual result, but the width should be set using autoFitColumn, not manualy
Neli
Telerik team
answered
on
05 Jul 2021
1 answer
183 views
Hi Team,
This is regarding the subjected issue with in our application where we are unable to drag one particular cell value to adjacent/the same/or horizontal cells' , am attaching the replication for the same(file name : bugreplicationhelper.zip), so, could you help us or correct, if some more information needed from us on the same.
Dimitar
Telerik team
answered
on
05 Jul 2021
1 answer
124 views
Why does the Yaxis display on right side of area chart?
The vertical scale show up on the right-hand side no matter what I do. and the chart is blank even though series items were populated
Georgi Denchev
Telerik team
answered
on
05 Jul 2021
1 answer
210 views
Is there a way to increase performance of dragging down a cell to the point where the page has to scroll? Dragging is so fast until I get to the last row currently in view. As soon as scroll down is activated by my drag, the speed decreases and it takes about 2 minutes to drag down 350 rows.
Veselin Tsvetanov
Telerik team
answered
on
02 Jul 2021
1 answer
236 views
Hi there,
I would like to use the MultiSelect to set the value of a cell in a TreeList.
My code almost works, but once the MultiSelect closes the values displayed in the grid are not what I expected.
I tried using a template to display selected values, but it doesn't look right.
Here is a dojo link https://dojo.telerik.com/OdAFErap/11 and below the code of that dojo
Thanks in advance,
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script type="text/kendo" id="alertsTemplate">
# if (Alerts) { #
<ul>
# for(var i = 0; i< Alerts.length; i++){ #
<li>#: Alerts[i].name #</li>
# } #
</ul>
# } #
</script>
<script>
$(document).ready(function () {
var AlertsList = [
{ code: '9', name: 'Black' },
{ code: '5', name: 'Red' },
{ code: '5', name: 'Yello' },
{ code: '3', name: 'Blue' },
{ code: '1', name: 'Green' }
];
var alertsEditor = (container, options) => {
$('<input name="Alerts">')
.appendTo(container)
.kendoMultiSelect({
dataValueField: "code",
dataTextField: "name",
dataSource: AlertsList
});
};
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, Name: "Daryl Sweeney", Alerts: null, parentId: null },
{ id: 2, Name: "Guy Wooten", Alerts: null, parentId: 1 },
{ id: 32, Name: "Buffy Weber", Alerts: null, parentId: 2 },
{ id: 11, Name: "Hyacinth Hood", Alerts: null, parentId: 32 },
{ id: 60, Name: "Akeem Carr", Alerts: null, parentId: 11 },
{ id: 78, Name: "Rinah Simon", Alerts: null, parentId: 11 },
{ id: 42, Name: "Gage Daniels", Alerts: null, parentId: 32 },
{ id: 43, Name: "Constance Vazquez", Alerts: null, parentId: 32 },
{ id: 46, Name: "Darrel Solis", Alerts: null, parentId: 43 },
{ id: 47, Name: "Brian Yang", Alerts: null, parentId: 46 },
{ id: 50, Name: "Lillian Bradshaw", Alerts: null, parentId: 46 },
{ id: 51, Name: "Christian Palmer", Alerts: null, parentId: 46 },
{ id: 55, Name: "Summer Mosley", Alerts: null, parentId: 46 },
{ id: 56, Name: "Barry Ayers", Alerts: null, parentId: 46 },
{ id: 59, Name: "Keiko Espinoza", Alerts: null, parentId: 46 },
{ id: 61, Name: "Candace Pickett", Alerts: null, parentId: 46 }
],
schema: {
model: {
id: "id",
expanded: true,
fields: {
Name: { type: "string", editable: false },
Alerts: { type: "string", editable: true }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
batch: true,
editable: "inline",
columns: [
"Name",
{
field: "Alerts",
editor: alertsEditor,
template: $("#alertsTemplate").html()
},
{ command: ["edit"] }
]
});
});
</script>
</div>
</body>
</html>
Martin
Telerik team
answered
on
02 Jul 2021
1 answer
293 views
I am using the spreadsheet component and need to partially update my datasource from the server prior to submit.
Basically I have 350 rows in the spreadsheet. I send some (those that have been edited) to the server via ajax where some additional fields are populated. Then those records are sent back to the client side and the user keeps editing before submitting later. On Ajax success I need to update my datasource based on the changes from the server.
Currently in js I am looping through the returned rows, finding them in the datasource, and updating each cell with the new value from the server using datasource.set(). The problem is that this is extremely slow for a few hundred rows. I found this forum answer that is very similar to my situation, except this person is using the grid instead of the spreadsheet.
https://www.telerik.com/forums/modifying-datasource-values-is-very-slow-with-bigger-data-sets
I tried setting my cell values with = instead of set() and then calling $("#spreadsheet").data("kendoSpreadsheet").refresh(); but the spreadsheet rows are not redrawn, even though datasource is reflecting the updated values. I can't use dataSource.sync() because the rows aren't ready to be submitted. I've also tried using dataSource.pushUpdate(<returned from server rows>) which works, but clears out all of the dirty flags by design, meaning I'd need to reset them manually (also slow).
Are there any other options for doing a partial update of a datasource quickly and maintining dirty flags?
Veselin Tsvetanov
Telerik team
answered
on
01 Jul 2021
1 answer
209 views
In the download portal, I can only find the kendoui.for.jquery.2021.2.616.commercial-source is fully version.
But the interesting fact is the trial version contains minify version, but I do not sure if that fully matches the commercial version.
But the interesting fact is the trial version contains minify version, but I do not sure if that fully matches the commercial version.
Martin
Telerik team
answered
on
01 Jul 2021
1 answer
157 views
Hi,
At the moment I am using filters to filter a grid like below:
var filter =
{
filters:
[
{ field: "Done", operator: "eq", value: value }
]
}
But the filtred status uses a client template like below:
<div style='text-align:center;'><span style='font-size: 1.4em;' class='fa-stack'># if(data.Done=='1') {# <i class='fa fa-square fa-stack-1x' style='color: white;'></i><i class='fa fa-check-square fa-stack-1x' style='color: \\#4d6992'></i> #} else if(data.Done=='0') {# <i class='fa fa-square' style='color: \\#bfccd3'></i> # } # </span></div>
What is the best way to filter on this column?
Roel
Georgi Denchev
Telerik team
answered
on
01 Jul 2021
0 answers
123 views
Hi, this is my problem.
I use the confirm function in kendo dropdownlist to make sure the user want to change the value or not.
When the user choose "cancel", that means he doesn't want to change the old value.
However the value in the dropdownlist UI shows the changed NEW value.
Here is the example: https://stackblitz.com/edit/juptyl?file=src/main.vue
Although the console shows "CANCEL", but the UI still shows the changed new value.
How can I fix this ? Thank you in advance!!!
Dev
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
asked
on
30 Jun 2021
1 answer
154 views
This code if pasted into a dojo works to build a diagram example.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/index">
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="diagram"></div>
<script>
var data = [{
level: 0,
ordCode: "Org1",
orgName: "Org1 Level 0",
parentOrg: "",
items: [{
level: 1,
ordCode: "Org2A",
orgName: "Org2A Level 1",
parentOrg: "Org1"
},
{
level: 1,
ordCode: "Org2B",
orgName: "Org2B Level 1",
parentorg: "Org1"
},
{
level: 1,
ordCode: "Org2C",
orgName: "Org2C Level 1",
parentOrg: "Org1",
items:
[
{
level: 2,
ordCode: "Org3A",
orgName: "Org3A Level 2",
parentOrg: "Org2C"
},
{
level: 2,
ordCode: "Org3B",
orgName: "Org3B Level 2",
parentorg: "Org2C"
},
{
level: 2,
ordCode: "Org3C",
orgName: "Org3C Level 2",
parentOrg: "Org2C",
items:[]
},
{
level: 2,
ordCode: "Org3D",
orgName: "Org3D Level 2",
parentOrg: "Org2C"
},
]
},
{
level: 1,
ordCode: "Org2D",
orgName: "Org2D Level 1",
parentOrg: "Org1"
},
]
}];
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: "green",
offset: 0,
opacity: 0.5
}, {
color: "green",
offset: 1,
opacity: 1
}]
}
}
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.ordCode,
x: 85,
y: 20,
fill: "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.orgName,
x: 85,
y: 40,
fill: "#fff"
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
schema: {
model: {
children: "items"
}
}
}),
layout: {
type: "layered"
},
shapeDefaults: {
visual: visualTemplate
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 2
}
}
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
$(document).ready(createDiagram);
</script>
</div>
</body>
</html>
I would like to limit the number of shapes to a number (i.e. 2) per level. See attached image for example.
Georgi Denchev
Telerik team
answered
on
30 Jun 2021
