or
1 answer
1.4K+ views
I have a Kendo grid that uses Export-to-excel and Export-to-pdf.
One particular column consists of data with padded zeros (so that column sorting works). Then, this column uses a template to display the data without the padded zeros (a business requirement). This is perfect for the grid.
Now, the export functions do not export the template, they export the underlying data (this is documented in the Known Limitations). So my exports show the data with padded-zeros. But... I need to show the data without padded zeros. So I have been looking for a workaround.
Workaround attempt A)
I created two columns padded and non-padded. The idea was this:
Column i/ Data = padded; Grid view = non-padded; do not export.
Column ii/ Data = non-padded; Grid view = hidden; export.
However, this doesn't work for two reasons.
Column i/ columns: exportable: { pdf: false, excel: false } doesn't actually seem to work(!!!)
Column ii/ This isn't legal anyway. If you hide the data in the grid you can't export it anyway.
Workaround attempt B)
In the excelExport() function I did this:
excelExport: function (e) {
for (var j = 0; j < e.data.length; j++) {
e.data[j].padded_column = e.data[j].non-padded_column;
}
},
In the console this appears to work fine, that is I replace the value of the padded column with the data of the non-padded column. However, it makes no difference to what appears on the spreadsheet. My guess is that this is because the spreadsheet has already been generated before excelExport() modifies the data.
So, I need a new approach. Can anybody help?
ADDITIONAL INFORMATION
For further reference, here is the code for the column:columns: [{
field: 'sys_id_sorted',
title: 'File ref',
hidden: false,
template: function (dataItem) {
var ctyClass = '';
switch (dataItem.cty_id) {
case '1':
ctyClass = 'CHAP';
break;
case '2':
ctyClass = 'EU-PILOT';
break;
case '3':
ctyClass = 'NIF';
break;
case '4':
ctyClass = 'OTHER';
break;
default:
ctyClass = 'default';
break;
}
return '<div class="label label-' + ctyClass + ' origin">' + dataItem.sys_id + '</div>';
}
},
'sys_id_sorted' is the field that has padded zeros.
'dataItem.sys_id' is the field with no padded zeros.
Nikolay
Telerik team
answered
on
23 Sep 2021
1 answer
4.2K+ views
I have implemented a grid with inline editing, which has a dropdown in one of its columns. The problem is, everytime I am trying to save a change I made, I get the following TypeError and I think it is the dropdown which causes this:
kendo.all.js:6412 Uncaught TypeError: Cannot read properties of undefined (reading 'data')
at init.setup (VM13051 kendo.all.min.js:formatted:4953)
at init.update (VM13051 kendo.all.min.js:formatted:4946)
at Object.<anonymous> (VM13051 kendo.all.min.js:formatted:5531)
at Function.Deferred (VM12816 AJS097.P:528)
at init._promise (VM13051 kendo.all.min.js:formatted:5526)
at init._send (VM13051 kendo.all.min.js:formatted:5557)
at init.sync (VM13051 kendo.all.min.js:formatted:5341)
at init.saveRow (VM13051 kendo.all.min.js:formatted:48900)
at init._editUpdateClick (VM13051 kendo.all.min.js:formatted:48689)
at HTMLAnchorElement.proxy (VM12816 AJS097.P:65)Here is the implementation of the grid (I tried to keep it as simple as I could, by removing anything that might be unnecessary for this problem):
jq(document).ready(function() {
var copyBool = false
grid_counter = 0;
jq("#inline_grid").kendoGrid({
autoBind: true,
dataSource: {
transport: {
read: {
url: "GetJsonData_Grid.p",
dataType: "json",
data:{
"function": "testfunction",
"element": "grid",
"param1": "testparam1",
"param2": "",
"param3": "",
"rowid": $("rowid").value
}
}
},
schema: {
data: "data",
total: "recordsCount",
model: {
id: "field1",
fields: {
field1: {
type: "string",
validation: {
required: true,
maxlength: "3",
field1validation: function(input) {
var grid_length = jq("#inline_grid").data("kendoGrid").dataSource.data().length + 1;
if(input.is("[name='field1']") && input.val() == "0") {
input.attr("data-field1validation-msg","the number must be greater than 0");
returnfalse;
} elseif(input.is("[name='field1']") && input.val() == "") {
input.attr("data-field1validation-msg","the number must not be empty");
returnfalse;
} elseif(input.is("[name='field1']") && (input.val() < "0" || input.val() > "99999999")) {
input.attr("data-field1validation-msg","the input is invalid");
input.val(grid_length);
returnfalse;
}
returntrue;
}
}
},
field2: { type: "string", validation: { required: false }},
field3: { type: "string", validation: { required: false }},
field4: { type: "string", validation: { required: false }},
field5: { type: "string", validation: { required: false }},
field6: { type: "string", validation: { required: false }}
}
}
},
pageSize: 15
},
toolbar: [
{ name: "create", text: "Add", iconClass: "" },
],
dataBound: function(e) {
if(grid_counter == 0) {
this.select("tr:eq(0)");
grid_counter++;
}
},
selectable: true,
change: function(e) {
var selectedRows = this.select(),
dataItem = this.dataItem(selectedRows[0]);
...
},
sortable: false,
scrollable: {
virtual: true
},
persistSelection: true,
columns: [
{ field: "field1", title: "nr", width: "30px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor },
{ field: "field2", title: "active", width: "20px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: cbEditor },
{ field: "field3", title: "art", width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: ddlEditor },
{ field: "field4", title: "description", width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor },
{ field: "field5", title: "comment", width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor },
{ field: "field6", title: "processed", width: "60px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: cbEditor },
{ command: [
{ name: "edit",
text: { edit: " ", update: "Save", cancel: " "}
},
{ name: "copy",
text: " ",
iconClass: "k-icon k-i-copy",
click: function(e) {
e.preventDefault();
var data = this.dataItem(jq(e.target).closest("tr"));
field1 = data.field1;
field2 = data.field2;
field3 = data.field3;
field4 = data.field4;
field5 = data.field5;
field6 = data.field6;
copyBool = true;
jq("#inline_grid").data("kendoGrid").addRow();
}
},
{ name: "destroy",
text: " ",
iconClass: "k-icon k-i-delete"
},
], title: " ", width: "60px", attributes: {style: "text-align:right;"} }
],
noRecords: true,
pageable: {
previousNext: false,
numeric: false,
alwaysVisible: true,
pageSizes: [5,10,15]
},
editable: {
mode: "inline",
createAt: "bottom"
},
edit: function(e) {
var model = e.model,
container = e.container,
nummer = parseInt(jq("#inline_grid").data("kendoGrid")._data[jq("#inline_grid").data("kendoGrid")._data.length - 2].field1) + 1;
jq("#inline_grid tbody").find("tr.k-state-selected").removeClass("k-state-selected k-state-selecting");
/* field1 */if(e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=field1]")
.val(nummer)
.change();
}
if(copyBool) {
e.model.set("field2", field2);
e.model.set("field3", field3);
e.model.set("field4", field4);
e.model.set("field5", field5);
e.model.set("field6", field6);
copyBool = false;
}
...
},
save: function(e) {
$("model").value = "test";
$("nr").value = e.model.field1;
$("active").value = e.model.field2;
$("art").value = e.model.field3;
$("description").value = e.model.field4;
$("comment").value = e.model.field5;
$("processed").value = e.model.field6;
...
},
remove: function(e) {
$("model").value = "test";
$("nr").value = e.model.field1;
...
}
});
var inline_grid = jq("#inline_grid").data("kendoGrid");
function textEditor(container,options) {
jq('<input data-value-update="input" type="text" class="k-textbox k-valid" id="' + options.field + '" name="' + options.field + '" maxlength="30" autocomplete="off" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
function cbEditor(container,options) {
jq('<input type="checkbox" class="k-checkbox" id="' + options.field + '" name="' + options.field + '" value="yes"/>')
.appendTo(container);
}
function ddlEditor(container,options) {
jq('<input id="ddl_' + options.field + '" data-text-field="field1" data-value-field="field1" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "field1",
dataValueField: "field1",
autoBind: false,
dataSource: {
transport: {
read: {
url: "GetJsonData_Grid.p",
data: {
"function": "testfunction",
"element": "ddl",
"param1": "testparam1"
}
},
dataType: "json"
},
schema:{
data: "data",
total: "recordsCount"
},
sort: {
field: "field1", dir: "asc"
}
},
optionLabel: "-- select --",
optionLabelTemplate:"<span style='color:gray;'>-- select --</span>",
filter: "startswith",
filtering: function(e) {
var filterValue = e.filter != undefined ? e.filter.value : "";
e.preventDefault();
filtering("#ddl_" + options.field,filterValue,2);
},
headerTemplate: "<div> \
<table> \
<tr> \
<td style='font-weight:bold;width:100px;'>Code</td> \
<td style='font-weight:bold;width:200px;'>Description</td> \
</tr> \
</table> \
<div>",
template: "<div> \
<table> \
<tr> \
<td style='width:100px;' nowrap>#= field1 #</td> \
<td style='width:200px;' nowrap>#= field2 #</td> \
</tr> \
</table> \
<div>",
autoWidth: true,
change: function(e) {
ddl_value = this.value();
// Tooltip
e.sender.select(function (dataItem) {
if(dataItem.field1 == ddl_value) {
jq("[data-container-for=" + options.field + "] .k-widget.k-dropdown").prop("title", dataItem.field2);
return (dataItem.field1 == ddl_value);
}
});
}
});
};
}); // jq(document).ready(function() {
Any idea what might be causing the typeError?
Thanks in advance,
Syian
Georgi Denchev
Telerik team
answered
on
21 Sep 2021
1 answer
566 views
Hi Team,
This dojo to illustrate the problem: https://dojo.telerik.com/iNIsiHig
When using jquery 3.6.0, the window does not get focus. Using any previous jquery like 3.5.1 or 1.12.4 makes it work.
Please advise.
Best regards,
Laurent.
Martin
Telerik team
answered
on
21 Sep 2021
0 answers
120 views
Is it possible instead of uploading files can I choose a file from the file explorer window and upload a hyperlink which has the file path to that file from a shared server.
1 answer
244 views
Hi Team,
is there a way we can open the table wizard popup as a slider instead of a popup? currently as it attaches to the body itself, there is no way to even do it using JQuery or CSS post render.
Ianko
Telerik team
answered
on
20 Sep 2021
1 answer
275 views
I am currently working with the Pivot Grid; its quite nice. I have noticed though that if the Column is removed, the grid itself still retains data and formatting unique to that column. Using the demo as an example:
https://demos.telerik.com/jsp-ui/pivotgrid/index
The default columns are:
[Date].[Calendar] and [Product].[Category]
The default measure is:
[Measures].[Reseller Freight Cost]
If you remove all three of the above, both column fields and the measure, the resulting PivotGrid will still reflect a financial amount even though only a Row is populated with a Field.
See screen shot:
This is confusing to me and my users; why is it working this way? Is it possible to change this behavior?
Nikolay
Telerik team
answered
on
20 Sep 2021
1 answer
1.4K+ views
I am trying to find a way to scroll to a specific row while using virtual scrolling but my solution has not been consistent. Here is the function that is being called each time I want to select a specific row:
function selectGridRow(grid_element,grid_value,grid_field) {
var dataSource = grid_element.dataSource,
filters = dataSource.filter() || {},
sort = dataSource.sort() || {},
models = dataSource.data();
var query = new kendo.data.Query(models),
rowNum = 0,
modelToSelect = null;
models = query.filter(filters).sort(sort).data;
// Item Position
for (var i = 0; i < models.length; ++i) {
var model = models[i];
if (model[grid_field] == grid_value) {
modelToSelect = model;
rowNum = i;
break;
}
}
grid_element._selectedIds = {};
// Change to the page where the row is and select it
var currentPageSize = grid_element.dataSource.pageSize(),
pageWithRow = parseInt((rowNum / currentPageSize)) + 1;
grid_element.dataSource.page(pageWithRow);
var row = grid_element.element.find("tr[data-uid='" + modelToSelect.uid + "']");
if (row.length > 0) {
grid_element.select(row);
grid_element.content.scrollTop(grid_element.select().position().top);
}
}Is there anything I am missing here?
Georgi Denchev
Telerik team
answered
on
20 Sep 2021
1 answer
4.2K+ views
I have a grid that I'm filling with the results of a REST API call. The grid should have a dynamic button that renders based on the status in the results.
The API is actually sending a valid link so but when I try to display the result in a column it renders as text is there a trick to this?
Example result that is not rendering as a button just as text. For the field
Properties.AppointRetire
<a href="/Governance/Forms/Staff/Retire.aspx?ID=9526295&OfficeHolderID=9526744&SEQN=170" class="TextButton">Retire</a>"
CODE:
function fillgrid(parsedPayload) {
$("#grid").kendoGrid({
dataSource: {
data: parsedPayload,
pageSize: 15,
},
columns: [
{ field:"Properties.DivisionBranch", title: "Division - Branch", width: 300 },
{ field:"Properties.FirstName", title: "First Name", width: 200 },
{ field: "Properties.LastName", title: "Last Name", width: 200 },
{ field: "Properties.Appointed", title: "Appointed", type: "date", format: "{0:dd/MM/yyyy}" },
{ field: "Properties.GoverningCommittee", title: "Governing Committee", width: 300 },
{ field: "Properties.Office", title: "Office", width: 200 },
{ field: "Properties.Occupation", title: "Occupation", width: 200 },
{ field: "Properties.Status", title: "Office <br />Status", filterable:false, width:80 },
{ field: "Properties.AppointRetire", title: " ", filterable:false, width:100 }
],
filterable: {
mode: "row",
operators: {
string: {
contains: "Contains"
}
}
},
toolbar: ["excel", "pdf", "search"],
excel: {
filterable: false
},
sortable: true,
pageable: {
pageSizes: [10, 20, 50, "all"],
buttonCount: 15
}
});
}
Georgi Denchev
Telerik team
answered
on
20 Sep 2021
0 answers
232 views
I have kendo editor and kendo listview grouping controls , editor is working fine but after bind the data, listview group fiter is not working with this lib "https://kendo.cdn.telerik.com/2021.3.914/js/kendo.all.min.js" Please help on this issue.
0 answers
135 views
Hello
We have an application where new kendo window opens from a hyper link on a child pop up from the parent window. when the new window is closed and the child pop up is closed , some of the buttons on the parent window does not work they just gets frozen. Please advise how can we fix this. I tried many options...
Note : the new window has a splitter, we used Kendo splitter.
When i click button, it gives " Uncaught TypeError: Cannot read properties of undefined" in the console
