I'm using Kendo UI grid and I want to export the grid data to excel file.
I want that the data will be displayed from right to left
(It's currently displayed ltr).
How can I do that?
Thanks,
Yael
Wire ExcelExport Event to the function below:
function onExcelExport(e) {
var sheet = e.workbook.sheets[0];
for (var i = 0; i < sheet.rows.length; i++) {
sheet.rows[i].cells.reverse();
for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
sheet.rows[i].cells[ci].hAlign = "right";
sheet.rows[i].cells[ci].fontFamily = "tahoma";
sheet.rows[i].cells[ci].textAlign = "center";
}
}
}
It's not the best solution but it's the closest so far.
in the excelExport of grid config add this code :
e.workbook.rtl = true
toolbar: ["excel"],
excel: {
allPages: true
},
excelExport: function(e) {
var workbook = e.workbook;
var sheet = workbook.sheets[0];
workbook.rtl = true;
for (var i = 0; i < sheet.rows.length; i++) {
for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
sheet.rows[i].cells[ci].hAlign = "right";
}
}
},
Related
I have a razor page that implements a Telerik UI Kendo Grid .I want to use javascript to set / unset the dirty markers for certain fields in the grid when there is an error.
I have searched many forums and google'd the problem and looked at the examples on GitHub, but I cannot get anything to work.
I tried :
`
function onError(e) {
// got any error messages
if (e.errors) {
e.preventDefault();
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
for (var i = 0; i < data.length; i++) {
data[i].dirty = true;
}
grid.refresh();
}
}
I have also tried:
function onError(e) {
// got any error messages
if (e.errors) {
var grid = $("#grid").data("kendoGrid");
var $gridData = grid.dataSource.data();
for (var i = 0; i < $gridData.length; i++) {
var row = grid.tbody.find("tr[data-uid='" + $gridData[i].uid + "']");
var cell = row.find("td:eq(" + $gridData[i].ColumnIndex + ")");
cell.addClass("k-dirty-cell");
$gridData[i].dirty = true;
var foo = "";
}
grid.refresh();
}
}
`
Thank you for your help.
I tried the below custom paste function to paste only values but it doesn't trigger the change event in order for me to sync the data to the data source.
Dojo Demo Link
...
change: onExcelChange,
paste: function(e) {
e.preventDefault()
var currentRange = e.range;
var fullData = e.clipboardContent.data;
var mergedCells = e.clipboardContent.mergedCells;
var topLeft = currentRange.topLeft();
var initialRow = topLeft.row;
var initialCol = topLeft.col;
var origRef = e.clipboardContent.origRef;
var numberOfRows = origRef.bottomRight.row - origRef.topLeft.row + 1;
var numberOfCols = origRef.bottomRight.col - origRef.topLeft.col + 1;
var spread = e.sender;
var sheet = spread.activeSheet();
var rangeToPaste = sheet.range(initialRow, initialCol, numberOfRows, numberOfCols);
sheet.batch(function() {
for(var i = 0; i < fullData.length; i += 1) {
var currentFullData = fullData[i];
for(var j = 0; j < currentFullData.length; j += 1 ) {
var range = sheet.range(initialRow + i, initialCol + j);
var value = currentFullData[j].value;
if (value !== null) {
range.input(value);
range.format(null);
}
}
}
sheet.select(rangeToPaste);
}, { layout: true, recalc: true });
} ...
I have tried to use recalc: true in sheet.batch to trigger the change to no avail. Any help would be greatly appreciated.
All Kendo widgets inherit from Observable, which has a trigger method:
var obj = new kendo.Observable();
obj.bind("myevent", function(e) {
console.log(e.data); // outputs "data"
});
obj.trigger("myevent", { data: "data" });
You need to manually trigger the Spreadheet's change event with its correct parameters.
I am having difficulty saving the names in a variable or something, found in features.properties.ADMIN as to call them for a tooltip. I wish to save them where it would simply call d.country or something for my tooltip.
d3.json('countries.geojson', function(drawMaps) {
var features = drawMaps.features
var data2;
data2 = drawMaps.parse(function(d) {
return {
country: d.features.properties.ADMIN
};
});
console.log(drawMaps.features[1].properties.ADMIN);
console.log(features[2].properties.ADMIN);
});
Edit 1.
d3.json('countries.geojson', function(drawMaps2) {
for (var j = 0; j < drawMaps2.features.length; j++) {
var jsonCountry = drawMaps2.features[j].properties.ADMIN;
console.log(jsonCountry);
break;
}
console.log(jsonCountry);
console.log(drawMaps2.features[3].properties.ADMIN);
});
I am fairly new to SlickGrid. I am trying to make SlickGrid filter work but no luck. I am following the example (http://mleibman.github.io/SlickGrid/examples/example4-model.html).
Below is my source code.
$(document).ready(function() {
var tName;
$('#submit').click(function(e) {
tName = $('#source option:selected').text();// name1
tName = tName.trim();
$.ajax({
url : 'someUrl',
type : 'GET',
cache : false,
success : function(d) {
var grid;
var searchString = "";
var data = [];
var columns = new Array();
var cols = d[0].columns;
var pkColNames = d[0].pkColNames;
for (var j=0; j< cols.length; j++) {
var key = {id: cols[j].colName, name: cols[j].colName, field: cols[j].colName, width: 200, sortable:true, editor: Slick.Editors.LongText};
columns[j] = key;
}
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableColumnReorder:true,
multiColumnSort: false,
autoEdit: false,
autoHeight: false
};
function myFilter(item, args) {
return true;// Let us return true all time ?
}
for (var i = 0; i < d.length; i++) {
var tempData = (data[i] = {});
var title = null;
var val = null;
for (var q = 0; q < d[i].columns.length; q++) {
title = d[i].columns[q].colName;
val = d[i].columns[q].colValue;
tempData[title] = val;
}
}
var dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#myGrid", dataView, columns, options);
dataView.setPagingOptions({
pageSize: 25
});
var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager"));
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.onAddNewRow.subscribe(function(e, args) {
// Adding a new record is not yet decided.
});
grid.onCellChange.subscribe(function (e) {
var editedCellNo = arguments[1].cell;
var editedColName = grid.getColumns()[editedCellNo].field;
var newUpdatedValue= arguments[1].item[grid.getColumns()[editedCellNo].field];
var editedColType = "";
for (var cnt = 0; cnt < cols.length; cnt++) {
if (editedColName == cols[cnt].colName) {
editedColType = cols[cnt].colType;
break;
}
}
var pkKeyValue="";
for (var v=0; v <pkColNames.length;v++) {
for (var p=0; p<grid.getColumns().length; p++) {
if (pkColNames[v] == grid.getColumns()[p].field) {
var value = arguments[1].item[grid.getColumns()[p].field];
pkKeyValue += "{"+pkColNames[v] + '~' +getColDbType(grid.getColumns()[p].field) + ":"+value+"},";
break;
}
}
}
function getColDbType(colName) {
for (var c = 0; c < cols.length; c++) {
if (colName == cols[c].colName) {
return cols[c].colType;
}
}
}
pkKeyValue = pkKeyValue.substring(0, pkKeyValue.length-1);
$.ajax({
url: 'anotherUrl',
type:'GET',
dataType:'text',
success: function(f) {
bootbox.alert("Data updated successfully");
},
error: function() {
bootbox.alert("Error - updating data. Please ensure you are adding the data in right format.");
grid.invalidateAllRows();
grid.render();
}
});
});
grid.onClick.subscribe(function (e) {
//do-nothing
});
dataView.onRowsChanged.subscribe(function(e, args) {
grid.updateRowCount();
grid.invalidateRows(args.rows);
grid.render();
});
grid.onSort.subscribe(function(e, args) {
// args.multiColumnSort indicates whether or not this is a multi-column sort.
// If it is, args.sortCols will have an array of {sortCol:..., sortAsc:...} objects.
// If not, the sort column and direction will be in args.sortCol & args.sortAsc.
// We'll use a simple comparer function here.
var comparer = function(a, b) {
return a[args.sortCol.field] > b[args.sortCol.field];
}
// Delegate the sorting to DataView.
// This will fire the change events and update the grid.
dataView.sort(comparer, args.sortAsc);
});
// wire up the search textbox to apply the filter to the model
$("#txtSearch").keyup(function (e) {
console.log('Called...txtSearch');
Slick.GlobalEditorLock.cancelCurrentEdit();
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchString = this.value;
updateFilter();
});
function updateFilter() {
console.log("updateFilter");
dataView.setFilterArgs({
searchString: searchString
});
dataView.refresh();
}
dataView.beginUpdate();
dataView.setItems(data, pkColNames);
dataView.setFilterArgs({
searchString: searchString
});
dataView.setFilter(myFilter);
dataView.endUpdate();
},
error : function() {
bootbox.alert("Invalid user");
}
});
});
});
Your function myFilter() is always returning true so of course it will never work. The example that you looked at, was to filter something specific. I would recommend that you look at the following example to have a generic filter. From the example, simply type the text you are looking on a chosen column and look at the result... see example below (from SlickGrid examples).Using fixed header row for quick filters
In case you want a more in depth conditional filters ( > 10, <> 10, etc...), please take a look at my previous answer on how to make this kind of filtering possible, see my previous answer below:SlickGrid column type
Hope that helps you out
YAHOO.util.Event.addListener("genes", "change", function(e) {
var value = YAHOO.util.Event.getTarget(e).value;
if(YAHOO.lang.isValue(value)) {
myDataTable.getDataSource().sendRequest(null, {
success:function(request, response, payload) {
this.initializeTable();
var rs = response.results;
var filtered = [];
for(var i = 0; i < rs.length; i++) {
//alert(rs[i].gene);
if(rs[i].gene == value) {
filtered[filtered.length] = rs[i];
}
}
this.getRecordSet().setRecords(filtered, 0);
this.render();
},
scope:myDataTable,
argument:null
});
}
});
This is my code to filter the data. i am getting the data perfectly when i change the option for selection.
but the pagination is not working it is showing as '0' even the records are displayed.
can any one plz suggest me.
Thanks!!
You can try this:
dobMenuButton.subscribe("selectedMenuItemChange",function(e) {
var value =e.newValue.value;
if(YAHOO.lang.isValue(value)) {
myDataTable.getDataSource().sendRequest(null, {
success:function(request, response, payload) {
this.initializeTable();
var rs = response.results;
var filtered = [];
for(var i = 0; i < rs.length; i++) {
if(((rs[i].dateOfBirth).format("MM/dd/yyyy")) == value) {
filtered[filtered.length] = rs[i];
}
}
this.getRecordSet().reset();
MCMPagination.paginatorvar.setTotalRecords(filtered.length,true);
this.getRecordSet().setRecords(filtered, 0);
this.render();
},
scope:myDataTable,
argument:myDataTable.getState()
});
}
});