Export Kendogrid data to excel in a generic way - kendo-ui

I have configured the kendo grid and configured all the table rows and header.
When I click export button it is generating an excel file.But it was showing the data format by opening in another URL with data:application/vnd.ms-excel,OrderIDFreight.......
I dont need to mention column names and like this export.
Button click for Export Grid data to Excel
var dataSource = $("#grid").data("kendoGrid").dataSource;
var filteredDataSource = new kendo.data.DataSource( {
data: dataSource.data(),
filter: dataSource.filter()
});
filteredDataSource.read();
var data = filteredDataSource.view();
var result = "data:application/vnd.ms-excel,";
result += "<table><tr><th>OrderID</th><th>Freight</th><th>Order Date</th><th>Ship
Name</th><th>Ship City</th></tr>";
for (var i = 0; i < data.length; i++) {
result += "<tr>";
result += "<td>";
result += data[i].OrderID;
result += "</td>";
result += "<td>";
result += data[i].Freight;
result += "</td>";
result += "<td>";
result += kendo.format("{0:MM/dd/yyyy}", data[i].OrderDate);
result += "</td>";
result += "<td>";
result += data[i].ShipName;
result += "</td>";
result += "<td>";
result += data[i].ShipCity;
result += "</td>";
result += "</tr>";
}
result += "</table>";
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(new Blob([result]),'export.xls');
} else {
window.open(result);
}
e.preventDefault();
});
It should be in a generic way.
http://jsfiddle.net/SZBrt/100/
Thanks.

Have you tried doing a server side export? This would work for sure & also gives you a provision to perform a full export rather than exporting the grid current page data.
Within the Kendo Code library, they already have a project that can help you do so. Kindly refer the link http://www.telerik.com/support/code-library/export-grid-to-excel-8d91dd145501 for more details.

Related

Get a list of keys returned from PFObject Javascript

I'm working on some cloud code right now where I have an id I query against which returns all the data for that row.
I then need to iterate over all the fields (columns) of data and make some changes to the values then update that row.
Im able to get the data from parse but im not sure how to pull out the PFObject keys to iterate over the data in a for loop , make changes then save.
Here is some sample code where I hardcoded a field value in but I'm not sure how to get the fields, then iterate over them in a for loop..
Also excuse the JS code, I its been years since I wrote any JS.
<script type="text/javascript">
Parse.initialize("xxxx", "xxxx");
var LocationTag = Parse.Object.extend("LocationTags");
var query = new Parse.Query(LocationTag);
query.equalTo("SomeId", "302d87f2-0188-4cbe-bc2c-e6dcbf822539");
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
var object = results[i];
var data = object.get('T0fYiV9PeeU'); <--- hardcoded field key.. i need to iterate over all fields returned from the row..
count = data.length;
for (var c = 0; c < count; c++) {
var res = Number(data[c].split(":")[0]);
text += "Value: " + res + "<br>";
sum += parseInt(res);
}
document.getElementById("main").innerHTML = text + ' sum: ' + sum + ' average: ' + sum/100 + results
}
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
Any ideas.. sorry again if its just a simple JS issue.. but I need to iterate over all fields, returned in the PFObject
If I understand correctly, you want a list of properties from a Parse.Object. The easiest way to to this is to call .toJSON() on the Parse.Object and then extract the keys from the json.
Example:
for (var i = 0; i < results.length; i++) {
var pfObject = results[i];
var jsonObject = pfObject.toJSON();
var pfKeys = [];
for(var key in pfKeys){
if(jsonObject.hasOwnProperty(key)){
pfKeys.push(key);
}
}
//Now we have a list of the pfObject keys in pfKeys
}

Import from CSV into HandsOnTable and Export to CSV from HandsOnTable

I am using http://handsontable.com/ as one of the widgets for showing prices for my project, I could not find export and import from CSV feature in their API or FAQ.
Has anyone implemented or know about it ?
Yup, that comment links you to the explanation on how to do it, and here is my implementation of it for anyone that wants to just reuse code. There are a few enhancements beyond the basic CSV exporting like the escaping of spaces and special characters, as well as apostrophes. It also sets the column headers if they exist so remove that line if you don't have column headers.
The relevant code assuming you have a button with id=export-csv:
function parseRow(infoArray, index, csvContent) {
var sizeData = _.size(hot1.getData());
if (index < sizeData - 1) {
dataString = "";
_.each(infoArray, function(col, i) {
dataString += _.contains(col, ",") ? "\"" + col + "\"" : col;
dataString += i < _.size(infoArray) - 1 ? "," : "";
})
csvContent += index < sizeData - 2 ? dataString + "\n" : dataString;
}
return csvContent;
}
/**
* Export to CSV button
*/
var exportCsv = $("#export-csv")[0];
if (exportCsv) {
Handsontable.Dom.addEvent(exportCsv, "mouseup", function(e) {
exportCsv.blur(); // jquery ui hackfix
var csvContent = "data:text/csv;charset=utf-8,";
csvContent = parseRow(colHeaders, 0, csvContent); // comment this out to remove column headers
_.each(hot1.getData(), function(infoArray, index) {
csvContent = parseRow(infoArray, index, csvContent);
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", $("h1").text() + ".csv");
link.click();
})
}
Hope it helps!

JQGrid: Export Grid to PDF

Is there any way of exporting JQGrid data to Excel/PDF. I am using SQL server 2008 R2 as database and WCF service for HTTP Request/response. Client is written using JavaScript and AJAX calls are made to interact with SQL database through WCF service.
Will 'excelExport' function of jqgrid work?
Here is the code to collect Grid Data and store:
enter code here
function ExportExcel() {
var mya=new Array();
mya = $("#PrjBudgetGrid").getDataIDs(); // Get All IDs
var data = $("#PrjBudgetGrid").getRowData(mya[0]); // Get First row to get the labels
var colNames=new Array();
var ii=0;
for (var i in data) {
colNames[ii++] = i;
} // capture col names
var html = "";
for (i = 0; i < mya.length; i++) {
data = $("#PrjBudgetGrid").getRowData(mya[i]); // get each row
for (j = 0; j < colNames.length; j++) {
html = html + data[colNames[j]] + "\t"; // output each column as tab delimited
}
html = html + "\n"; // output each row with end of line
}
html=html+"\n"; // end of line at the end
}
You can use the code from the answer or even better from another more recent answer. The part of the code which export data to Excel you can easy change to WCF code. See here an example how to use Stream as the output of WCF method.

Is there anyway to apply telerik combo on dynamic created select-box via JavaScript?

I have java script which create select box depend of ajax result.
For example, if result = 2x combo, i create 2x select box via javascript.
if (this.Type == "combo") {
var result = "<label>" + this.Name + "</label><select onChange='ProChange(this)' name='" + this.ID + "'>";
result += "<option value='0'>Please select</option>";
for (var i = 0; i < this.Values.length; i++) {
var resultId = this.Values[i].ID;
var resultName = this.Values[i].Name;
result += "<option value= " + resultId + ">" + resultName + "</option>";
}
result += "<option value='-1'>Other</option>";
result += "<input type='text' name='"+this.ID+"other' style='display:none;' id='"+this.ID+"' />";
result += "</select>";
So my main question is, can i apply telerik style on dynamic created select box?
You can use the Telerik RadFormDecorator
<telerik:RadFormDecorator ID="rfd_combo" runat="server" DecoratedControls="Select" />
and after creating your controls by javascript:
$find("<%= rfd_combo.ClientID %>").decorate();
More details: http://www.telerik.com/support/kb/aspnet-ajax/formdecorator/decorate-dynamically-added-controls-by-using-radformdecorator.aspx

How can I find the checked rows in a YUI DataTable?

I'm using a YUI DataTable with a checkbox column like this:
var myColumnDefs = [
{key:"check", label:'', formatter:"checkbox"},
{other columns...}
];
How can I iterate over all the rows that have been checked?
UPDATE:
Here is my current work-around:
function getCheckedIds() {
var records = yuiDataTable.getRecordSet().getRecords();
var ids = '';
for (i=0; i < records.length; i++) {
var checked = false;
if (records[i] != undefined)
{
checked = $('#' + records[i].getId() + ' td div.yui-dt-liner input.yui-dt-checkbox').attr('checked');
if (checked) {
if (ids != '') {
ids += ',';
}
ids += records[i].getData("item.id");
}
}
}
return ids;
}
A better approach might be to subscribe to the checkboxClickEvent of the Datatable, then when a check box is selected (or unselected) programmatically mark the row as selected using the selectRow/unselectRow method of the Datatable. If you do this, it looks better in the UI (the rows are highlighted) and it is easy to get the selected rows using the getSelectedRows method of the Datatable.

Resources