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.
Related
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 found an official article which is showing, how to add clustering layer to Map but that example takes input from a TestDataGenerator function.I don't know how to pass my information so that map will generate pushpin based on my data.
Bing Map Official Article on "Add clustering layer to map"
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(39.393486, -98.100769),
zoom: 3
});
Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
// Creating sample Pushpin data within map view
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 });
map.layers.insert(clusterLayer);
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
Please visit the above link if anything is un-clear.
The test data generator returns an array of pushpins. Simply loop through your custom data and create an array of pushpins and then pass that into the clustering layer.
First add a new to your page with id and style display:none
add a gridview to this div
Bind your data to this gridview
Code Sample to bind data to map - works in ie - recently started having issues in Edge and Firefor - works on Safari
Issues seem to be related to attempts to add second cluster layer
Comments appreciated
function loadMap() {
var MaxLat = 0;
var MinLon = 0;
var MinLat = 0;
var MaxLon = 0;
var MLon = 0;
var MLat = 0;
var c;
var Val2;
var Val3;
var Lat;
var Lon;
var Val1;
var PPO;
var Val4;
var Val5;
if (typeof GVBounds !== "undefined" && GVBounds !== null) {
var Mcell = GVBounds.rows[1].cells;
MaxLat = Mcell(0).innerHTML;
MinLon = Mcell(1).innerHTML;
MinLat = Mcell(2).innerHTML;
MaxLon = Mcell(3).innerHTML;
MLat = Mcell(4).innerHTML;
MLon = Mcell(5).innerHTML;
}
var map;
var Rec = MaxLat + "," + MinLon + "," + MinLat + "," + MaxLon
var box = Microsoft.Maps.LocationRect.fromString(Rec);
//var PPCDr = new Microsoft.Maps.Layer();
//var PPCPU = new Microsoft.Maps.Layer();
//var PPCD = new Microsoft.Maps.Layer();
//var PPC = []
var pinDr;
var pinPU;
var pinD;
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
//center: new Microsoft.Maps.Location(MLat, MLon)
}
);
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var Pins = [];
Pins = GetPins();
//Create a ClusterLayer and add it to the map.
clusterLayer = new Microsoft.Maps.ClusterLayer(Pins, { gridSize: 10 });
map.layers.insert(clusterLayer);
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var DrPins = [];
DrPins = GetDrPins();
//Create a ClusterLayer and add it to the map.
DrclusterLayer = new Microsoft.Maps.ClusterLayer(DrPins, { gridSize: 1 });
map.layers.insert(DrclusterLayer);
});
map.setView({ bounds: box, padding: 20 });
}
RayD
My requirement is to bind these two dropdown with fullcalendar and reflect the changes according.
I have already searched lot about binding the custom dropdown to the fullcalendar but not getting success yet!!
So any help is appreciated.
$(document).ready(function() {
var $months = $('#months');
var $calendar = $('#calendar');
$calendar.fullCalendar({
viewRender: function() {
buildMonthList();
}
});
$('#months').on('change', function() {
$calendar.fullCalendar('gotoDate', $(this).val());
});
buildMonthList();
function buildMonthList() {
$('#months').empty();
var month = $calendar.fullCalendar('getDate');
var initial = month.format('YYYY-MM');
month.add(-6, 'month');
for (var i = 0; i < 13; i++) {
var opt = document.createElement('option');
opt.value = month.format('YYYY-MM-01');
opt.text = month.format('MMM YYYY');
opt.selected = initial === month.format('YYYY-MM');
$months.append(opt);
month.add(1, 'month');
}
}
});
Please check this fiddle for month and year dropdown for fullcalendar.
https://jsfiddle.net/L6a5LL5b/
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";
}
}
},
I have a Kendo grid that is sortable and filterable. When I export I want to export all the data that is currently viewable but not just the current page.
$("#grid").data("kendoGrid").dataSource -> seems to be the original list of items unsorted and unfiltered. In Chrome Developer tools, _data and _pristine seem to be the same.
There is also the dataSource.view but it is only the 10 items visible on the current page.
Is there a way to access the sorted list and/or filtered list?
update:
I have found this answer on the Kendo forums and will see if it helps.
http://www.kendoui.com/forums/framework/data-source/get-filtered-data-from-paged-grid.aspx
Here is how you access the filtered data:
var dataSource = $("#grid").data("kendoGrid").dataSource;
var filteredDataSource = new kendo.data.DataSource({
data: dataSource.data(),
filter: dataSource.filter()
});
filteredDataSource.read();
var data = filteredDataSource.view();
And then you can loop through the data:
for (var i = 0; i < data.length; i++) {
result += "<tr>";
result += "<td>";
result += data[i].SiteId;
result += "</td>";
result += "<td>";
result += data[i].SiteName;
result += "</td>";
result += "</tr>";
}
Most of the answers out there apply to the Kendo Grid when just looking at local data in memory. If you are using remote data (i.e. your grid is bound to an ODATA source for example) - you will need to iterate through all the pages to get the filtered data.
However, doing this was not as straight forward as I thought.
I came up with the following:
var filteredRows = [];
function getResults() {
var dataSource = $("#grid").data("kendoGrid").dataSource;
var filters = dataSource.filter();
var allData = dataSource.data();
var query = new kendo.data.Query(allData);
var data = query.filter(filters).data;
var totalRowCount = parseInt(dataSource.total().toString());
var totalPages = Math.ceil(totalRowCount / dataSource.pageSize());
PageTraverser(dataSource, 1, totalPages, filters, function () {
$('#pResults').text('Got ' + filteredRows.length + ' rows of filtered data.');
});
}
function PageTraverser(dataSource, targetPage, totalPages, filters, completionFunction) {
dataSource.query({
page: targetPage,
pageSize: 20,
filter: filters
}).then(function () {
var view = dataSource.view();
for (var viewItemId = 0; viewItemId < view.length; viewItemId++) {
var viewItem = view[viewItemId];
filteredRows.push(viewItem);
}
targetPage++;
if (targetPage <= totalPages) {
PageTraverser(dataSource, targetPage, totalPages, filters, completionFunction);
} else {
completionFunction();
}
});
}
Working example here: http://dojo.telerik.com/#JBoman32768/Ucudi
Here is how we are currently doing it, although there are multiple options:
var myData = new kendo.data.Query(dataSource.data()).filter(dataSource.filter()).data;
Your simply calling a new Query and applying the current filter that the grid has applied, which will return the exact same results as the grid.