Export Grid PDF with Custom Text for Some Columns
Environment
Product Version | 2019.3.917 |
Product | Progress® Kendo UI® Grid for jQuery |
Description
How I can change the value before export of grid data to PDF?
I have a checkbox, and I need to change the format, I want to write YES/NO for checkboxes. Is it possible to change PDF export to say Yes / No for check-boxes?
Solution
The Kendo UI PDF export adds a special class during the export so you can use that to your advantage in the following way:
-
In the template column, add a span with the Yes/No text (the Kendo Template syntax can be used for that) and a class name of your choice
{ template: '#=dirtyField(data,"Discontinued")#<input type="checkbox" #= Discontinued ? \'checked="checked"\' : "" # class="chkbx" /><span class="export-text">#= Discontinued ? "Yes": "No"#</ span>', width: 110 }
Add a CSS rule that this element with your chosen class should be hidden
-
Add another CSS rule that when the
.k-pdf-export
class is added, the element with the text should be visible and the checkbox should be hidden<style> .k-pdf-export input.chkbx, .export-text { display:none; } .k-pdf-export .export-text { display:inline; } </style>
<style>
.k-pdf-export input.chkbx, .export-text {
display:none;
}
.k-pdf-export .export-text {
display:inline;
}
</style>
<div id="grid"></div>
<script>
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["pdf"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
{ field: "UnitsInStock", title: "Units In Stock", width: 110 },
{ template: '#=dirtyField(data,"Discontinued")#<input type="checkbox" #= Discontinued ? \'checked="checked"\' : "" # class="chkbx" /><span class="export-text">#= Discontinued ? "Yes": "No"#</span>', width: 110 },
{ command: "destroy", title: " ", width: 100 }],
editable: true
});
$("#grid .k-grid-content").on("change", "input.chkbx", function(e) {
var grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.set("Discontinued", this.checked);
});
function dirtyField(data, fieldName){
var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;
if(data.dirty && data.dirtyFields[fieldName] && hasClass){
return "<span class='k-dirty'></span>"
}
else{
return "";
}
}
</script>