Kendo pie chart explode function not working:
$( e.sender.dataSource.options.data ) //this line become null..
following are javascript:
seriesClick: function(e){
$( e.sender.dataSource.options.data ).each( function ( i, item ) {
if ( item.Description != e.category )
{
item.Exploded= false;
}
else
{
item.Exploded= true;
}
} );
createChart();
}
The Explode clicked pie chart segment demo shows how to do this. Here is the relevant code:
seriesClick: function(e){
$.each(e.sender.dataSource.view(), function() {
// Clean up exploded state
this.explode = false;
});
// Disable animations
e.sender.options.transitions = false;
// Explode the current slice
e.dataItem.explode = true;
e.sender.refresh();
}
Related
I am new to Kendo-UI and Web-Engineering and I am facing a problem which I haven't solved after investing hours of time.
I have a grid with 8 columns, and a Excel toolbar button. When I fire the excelExport event, i show 2 more hidden columns to include their data in the report, and after that I hide them again.
My Problem is that my columns shrink for the hidden columns when they are shown, yet dont expand their width afterwards when they're hidden again.
Here's my script for the excelExport event:
<script type="text/javascript">
var exportFlag = false;
$(window).load(function() {
$("#pr-grid").data("kendoGrid").bind("excelExport",function(e) {
if (!exportFlag) {
e.sender.showColumn("CallOff");
e.sender.showColumn("LastChange");
e.preventDefault();
exportFlag = true;
setTimeout(function() {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn("CallOff");
e.sender.hideColumn("LastChange");
exportFlag = false;
}
});
});
</script>
I'd appreciate any help.
Regards Paparis
$('#pr-grid table').width('100%');
<script type="text/javascript">
var exportFlag = false;
function excelExport(e) {
if (!exportFlag) {
e.sender.showColumn("CallOff");
e.sender.showColumn("LastChange");
e.preventDefault();
exportFlag = true;
setTimeout(function() {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn("CallOff");
e.sender.hideColumn("LastChange");
exportFlag = false;
$('#grid table').width('100%');
}
}
</script>
I have checkbox in Kendo grid. Once i click on Checkbox it always focus the top cell in Kendo Grid. Below is code for Kendo grid that I am binding to checkbox value on checkbox click event in Kendo Grid
$("#contactgrid").on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#contactgrid').data().kendoGrid;
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
// grid.tbody.find("tr").eq(rowIndex).foucs(); This doesn't work
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsSelected', checked);
});
I can get the row index and cell Index in click event but I was not able to figure out to focus the specific cell.
Thanks!
When you want to edit Grid with checkbox then I would suggest you to use the approach from this code library. No matter it uses the MVC extensions open Views/Home/Index.cshtml and see how the template is defined and the javascript used after initializing the Grid.
Here it is
Column template:
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(200);
<script type="text/javascript">
$(function () {
$('#persons').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#persons').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsAdmin', checked);
})
})
function checkAll(ele) {
var state = $(ele).is(':checked');
var grid = $('#persons').data().kendoGrid;
$.each(grid.dataSource.view(), function () {
if (this['IsAdmin'] != state)
this.dirty=true;
this['IsAdmin'] = state;
});
grid.refresh();
}
</script>
I struggled with this. I essential refocused the cell as shown below. There's plenty of room for improvement in the Kendo grid client-side API. Hopefully my helper methods below will help people out.
var $row = getRowForDataItem(this);
var $current = getCurrentCell($row);
var currentCellIndex = $row.find(">td").index($current);
this.set('PriceFromDateTime', resultFromDate);
$row = getRowForDataItem(this);
var grid = getContainingGrid($row);
//select the previously selected cell by it's index(offset) within the td tags
if (currentCellIndex >= 0) {
grid.current($row.find(">td").eq(currentCellIndex));
}
//Kendo grid helpers
function getColumn(grid, columnName) {
return $.grep(grid.columns, function (item) {
return item.field === columnName;
})[0];
}
function getRowForDataItem(dataItem) {
return $("tr[data-uid='" + dataItem.uid + "']");
}
function getCurrentCell($elem) {
return getContainingGrid($elem).current();
}
function getContainingDataItem($elem) {
return getDataItemForRow(getContainingRow($elem));
}
function getContainingCell($elem) {
return $elem.closest("td[role='gridcell']");
}
function getContainingRow($elem) {
return $elem.closest("tr[role='row']");
}
function getContainingGrid($elem) {
return $elem.closest("div[data-role='grid']").data("kendoGrid");
}
function getGridForDataItem(dataItem) {
return getContainingGrid(getRowForDataItem(dataItem));
}
function getDataItemForRow($row, $grid) {
if (!$grid) $grid = getContainingGrid($row);
return $grid.dataItem($row);
}
function getMasterRow($element) {
return $element.closest("tr.k-detail-row").prev();
}
function getChildGridForDataItem(dataItem) {
return getRowForDataItem(dataItem).next().find("div.k-grid").data("kendoGrid");
}
function getMasterRowDataItem($element) {
var $row = getMasterRow($element);
return getDataItemForRow($row);
}
I Have kendo chart and tree-view in my application.I want to to change the value axis dynamically on check-box checked event,example When we check the "KM" check-box in treeview then value axis for Km and data will be displaying in chart.
so I tried some code then my chart is not displaying.
My checked event code is
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
$("#treeview").find(":checked").each(function() {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function(index, valueAxes) {
if (valueAxes.field == nodeText) {
checkedSeries.push(valueAxes);
}
});
});
chart.options.valueAxes = checkedSeries;
chart.refresh();
});
What's wrong in my code please help me.
Here is my jsbin http://jsbin.com/eyibar/11/edit
First you need to assign the chart to a variable in on-change event event of tree view,without that the tree-view didn't recognize the chart and it's value axis and in your valueAxes code there is no property of field,so by name of the valueAxes you need to check the treeview node and then push the valueAxes.
$("#treview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
if ($("#treeview").find(":checked").length !== 0) {
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedSeries.push(valueAxes);
checkedSeries.visible = true;
}
});
});
createChart(checkedSeries);
}
else {
createChart(checkedSeries);
}
});
I've implemented Isotope this way http://jsfiddle.net/circlecube/LNRzZ/ to my Joomla website. Sorting and filtering work perfeclty but only in the current page.
I would like to sort/filter all items but display only 20 items per page. I wish to keep a numeric navigation, like this http://tutorials.vinnysingh.co/quicksand/.
Can Isotope handle this or should I use another plugin? Any help is greatly appreciated. Thanks in advance.
Here is my full code:
jQuery( document ).ready( function ($) {
// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
getSortData : {
author : function ( $elem ) {
return $elem.find('.author').text();
},
city : function ( $elem ) {
return $elem.find('.city').text();
},
country : function ( $elem ) {
return $elem.find('.country').text();
},
price : function( $elem ) {
return parseFloat( $elem.find('.price').text().replace( /[\(\)]/g, '') );
},
rating : function ( $elem ) {
return parseInt( $elem.find('.rating').text(), 10 );
},
review : function ( $elem ) {
return parseInt( $elem.find('.review').text(), 10 );
},
perfDate: function (element) {
// parse out the performance date from the css classes
var classList = element.attr('class').split(/\s+/);
var dateClassPrefix = 'date-';
var date;
$.each(classList, function(index, cssClassName){
if (cssClassName.substring(0, dateClassPrefix.length) === dateClassPrefix) {
// Should be a date in format 'yyyy-MM-dd'
var dateString = cssClassName.substring(dateClassPrefix.length);
date = SF.parseDate('dd/mm/yyyy').getTime();
}
});
return date;
}
}
});
$('#sort-by a').click(function(){
// get href attribute, minus the '#'
var sortName = $(this).attr('href').slice(1);
$('#container').isotope({ sortBy : sortName });
return false;
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
if ($this.hasClass('lock')){
//return false;
}
else if ($this.hasClass('asc')){
$this.removeClass('asc').addClass('desc');
}
else if ($this.hasClass('desc')){
$this.removeClass('desc').addClass('asc');
}
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ($this.hasClass('asc') || $this.hasClass('desc'))
options[ 'sortAscending' ] = $this.hasClass('asc');
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
});
Isotope doesn't do pagination. You'll need to implement the pagination in Joomla.
I have some asp code in which I have a set of Telerik grids on separate jQueryUI tabs, and I am lazy-loading the grid data so that the grids only bind to live data if you actually view the tab that contains them. The rebind causes an ajax postback, and I have added an endRequest handler to re-apply the jQueryUI formatting once the request returns. This is working in Firefox, Chrome, Safari, and IE. But on the iPad the endRequest handler never fires. Any suggestions on how to troubleshoot this?
My code is as follows:
<script language="javascript" type="text/javascript">
(function ($, Sys) {
function setUpEmsDashboard() {
$('#emsDashboard').dnnTabs().dnnPanels();
$('#dInvoiceLink').click(function () {
lazyLoadOutstandingInvoicesGrid();
});
if ($('#dInvoice').is(':visible')) {
lazyLoadOutstandingInvoicesGrid();
}
$('#dCountsForStaffLink').click(function () {
lazyLoadCountsForStaffGrids();
});
if ($('#dCountsForStaff').is(':visible')) {
lazyLoadCountsForStaffGrids();
}
}
$(document).ready(function () {
setUpEmsDashboard();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
setUpEmsDashboard();
});
});
} (jQuery, window.Sys));
</script>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script language="javascript" type="text/javascript">
function lazyLoadOutstandingInvoicesGrid() {
var grid = $find("<%=OutstandingInvoicesGrid.ClientID%>");
var masterTableView = grid.get_masterTableView();
var name = masterTableView.get_name();
if (name == 'Temp Data') {
masterTableView.rebind();
}
return true;
}
function lazyLoadCountsForStaffGrids() {
var countsBySalesRegionGrid = $find("<%=CountsBySalesRegionGrid.ClientID%>");
var cbsrMasterTableView = countsBySalesRegionGrid.get_masterTableView();
var cbsrName = cbsrMasterTableView.get_name();
if (cbsrName == 'Temp Data') {
cbsrMasterTableView.rebind();
return true;
}
var countsBySupplierTypeGrid = $find("<%=CountsBySupplierTypeGrid.ClientID%>");
var cbstMasterTableView = countsBySupplierTypeGrid.get_masterTableView();
var cbstName = cbstMasterTableView.get_name();
if (cbstName == 'Temp Data') {
cbstMasterTableView.rebind();
return true;
}
var countsByCategoryGrid = $find("<%=CountsByCategoryGrid.ClientID%>");
var cbcMasterTableView = countsByCategoryGrid.get_masterTableView();
var cbcName = cbcMasterTableView.get_name();
if (cbcName == 'Temp Data') {
cbcMasterTableView.rebind();
}
return true;
}
</script>
</telerik:RadCodeBlock>
Never mind, I found the issue. What I had was a race condition where for some browsers in some circumstances, the grid objects were null.
I changed:
function lazyLoadOutstandingInvoicesGrid() {
var grid = $find("<%=OutstandingInvoicesGrid.ClientID%>");
var masterTableView = grid.get_masterTableView();
var name = masterTableView.get_name();
if (name == 'Temp Data') {
masterTableView.rebind();
}
return true;
}
to:
function lazyLoadOutstandingInvoicesGrid() {
var grid = $find("<%=OutstandingInvoicesGrid.ClientID%>");
if (typeof (grid) !== 'undefined' && grid != null) {
var masterTableView = grid.get_masterTableView();
var name = masterTableView.get_name();
if (name == 'Temp Data') {
masterTableView.rebind();
}
return true;
}
}
...and made similar changes to the other function. That prevented the object reference error that had been silently causing the rest of the main function to fail. Now it works consistently.