The details here, do not seem to work for AngularJS implementation. Nothing happens, and none of my log messages are shown on click or focus.
http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/how-to/select-all-on-focus
My Html:
<input kendo-numeric-text-box
k-min="0"
k-ng-model="params.averagePrice.max"
style="width: 45%;"
k-format="'n1'"
k-step="0.1"
k-on-change="maxChange(params.averagePrice)"
k-on-spin="maxChange(params.averagePrice)"/>
Inside my Angularjs Controller:
$(document).ready(function () {
$("input[type=text]").bind("focus", function () {
$log.info("bind focus ");
var input = $(this);
clearTimeout(input.data("selectTimeId")); //stop started time out if any
var selectTimeId = setTimeout(function () {
input.select();
});
input.data("selectTimeId", selectTimeId);
}).blur(function (e) {
$log.info("bind blur");
clearTimeout($(this).data("selectTimeId")); //stop started timeout
})
});
Currently I have a treeview populated from a datasource that has additional fields. I am using a filter to show checkboxes on the child nodes only (not the top level node). One of those extra fields is called loss. If the loss value is greater than zero I would like to change the text color of the node to red.
My current template is "# if(!item.items){# <input type='checkbox' value='true' />#}#"
How would I do this?
Thanks
Jason
How do I reduce the Tile container header font size, reduce header size and remove padding between containers?
Thanks.
I am using a kendo chart to display a scatter plot. Most of the data lie at zero levels and that gets almost hidden in the x-axis line.
Is there an option to make more space before the 0 on the y-axis and x-axis? i.e if there is an option to make the 0 start from a little bit up on the y-axis and a little bit right on the x-axis?
Like see in the figure 1.
I have left menu is hidden or same case is visible so when i click show button then the tab width is change from 100% to 70% so in this case the tab get added scroll and arrow so how to do that
Demo:
https://dojo.telerik.com/@vishal14/UcaPEYoh
Right now tooltips shows on entire chart div but i want two show tooltips on the specific bar only if leave that bar then tooltips will hide but now its showing leaving bar also. So i want to destroy the tooltips once leave the chart bar - series.
I try seriesOver and seriesLeave but its not working
My code
if (response.Success) {
$('#Campaigns').val(response.Campaigns);
$('.spotterUploadProcessFooter .submitButton:visible').removeClass('k-state-disabled');
if (response.AllowNextStep) {
$('li[data-wzform="BudgetDistribution"]').removeClass('k-state-disabled');
}
else {
$('li[data-wzform="BudgetDistribution"]').addClass('k-state-disabled');
$('.spotterUploadProcessFooter .submitButton:visible').text('Finish Import');
}
var tabStrip = $('#uploadSummaryCharts').data('kendoTabStrip');
for (var i = 0; i < response.CampaignUploadSummaryItems.length; i++) {
var template = kendo.template($('#uploadSummaryChartTemplate').html());
var previewHtml = template(response.CampaignUploadSummaryItems[i]);
tabStrip.append({
text: response.CampaignUploadSummaryItems[i].CampaignName + '(' + response.CampaignUploadSummaryItems[i].CampaignCode + ')',
content: previewHtml
});
var chartOptions = getChartOptions('Campaign ' + response.CampaignUploadSummaryItems[i].CampaignName + '(' + response.CampaignUploadSummaryItems[i].CampaignCode + ')');
if (response.CampaignUploadSummaryItems[i].HasCampaignCostDataUploadSummary) {
var chartDataOptions = {
dataSource: { data: response.CampaignUploadSummaryItems[i].CampaignCostDataUploadSummary },
categoryAxis: [{
field: 'Station',
majorGridLines: { visible: false },
line: { visible: true },
minorGridLines: { visible: false },
labels: { rotation: 'auto' }
}],
series: [{ field: 'OldGrossBudget', name: 'Old Gross Budget', axis: 'left' },
{ field: 'NewGrossBudget', name: 'New Gross Budget', axis: 'left' }],
seriesLeave: function (e) {
this.hideTooltip();
},
seriesOver: function (e) {
$(e.element).parent().parent().on("mouseleave", function () {
$('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).data('kendoChart').hideTooltip();
});
},
valueAxis: { name: 'left', title: { text: 'Gross Budget' }, labels: { format: '{0:#,#.##}' } },
legend: { item: { visual: chartLegend } },
tooltip: { visible: false },
seriesHover: function (e) {
var htmlData = getToolTipTemplate(e);
var tdClass = e.series.name.replace(/[^A-Za-z0-9]+/g, '');
onSeriesHover(tdClass, htmlData, e.sender.element.attr('id'));
$(e.element).parent().parent().on("mouseleave", function () {
$('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).data('kendoChart').hideTooltip();
});
}
};
$.extend(true, chartOptions, chartDataOptions);
$('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).kendoChart(chartOptions);
}
if (response.CampaignUploadSummaryItems[i].HasCampaignSpotDataUploadSummary) {
var chartDataOptions = {
dataSource: { data: response.CampaignUploadSummaryItems[i].CampaignSpotDataUploadSummary },
series: [{ field: 'OldImpacts', name: 'Old Impacts', type: 'column', axis: 'left' },
{ field: 'NewImpacts', name: 'New Impacts', type: 'column', axis: 'left' },
{ field: 'OldSpotCounts', name: 'Old Spot Counts', type: 'line', axis: 'right' },
{ field: 'NewSpotCounts', name: 'New Spot Counts', type: 'line', axis: 'right' }
],
valueAxis: [{ name: 'left', title: { text: 'Impacts' }, labels: { format: '{0:#,#.##}' } },
{ name: 'right', title: { text: 'Spot Count' }, labels: { format: '{0:#,#}' } }],
legend: { item: { visual: chartLegend } },
categoryAxis: {
axisCrossingValue: [0, 10000],
field: 'DateString',
majorGridLines: { visible: false },
line: { visible: true },
minorGridLines: { visible: false },
labels: { rotation: 'auto' }
},
tooltip: { visible: false },
seriesHover: function (e) {
var htmlData = getToolTipTemplate(e);
var tdClass = e.series.name.replace(/[^A-Za-z0-9]+/g, '');
onSeriesHover(tdClass, htmlData, e.sender.element.attr('id'));
}
}
$.extend(true, chartOptions, chartDataOptions);
$('#spotChart' + response.CampaignUploadSummaryItems[i].CampaignID).kendoChart(chartOptions);
}
}
tabStrip.select('li:first');
}
else {
showErrorNotification(response.ErrorMessage);
}
}, function () {
hidePreload();
});
The following does not work:
<div class="col-lg-8" id="toolbarContainer" data-ng-show="!showToolbarButtons" style="overflow:hidden;">
<div class="col-lg-1" style="padding-top: 5px;">
<kendo-button id="leftScrollButton" data-ng-click="scrollingLeft()" style="float: right;">
<span class="k-icon k-i-arrow-w"></span></kendo-button>
</div>
<div class="k-button-group" id="toolbarButtonGroup" kendo-sortable k-change="onChangeButtons" k-container="toolbarContainer"
k-auto-scroll="true" style="padding-top: 5px; overflow:hidden">
<span ng-repeat="availableWindow in availableWindows">
<kendo-button
style="font-size: 8pt"
data-ng-style="getButtonStyle(availableWindow.id)"
data-ng-click="toolbarButton(availableWindow.id)">
{{availableWindow.shortName ? availableWindow.shortName : availableWindow.window.title()}}
</kendo-button>
</span>
</div>
<div class="col-lg-1" style="padding-top: 5px">
<kendo-button id="rightScrollButton" data-ng-click="scrollingRight()">
<span class="k-icon k-i-arrow-e"></span></kendo-button>
</div>
</div>
Hello,
Does the Kendo UI Map Widget support using the Menu Contextual Menu if clicked on an marker, any example would be very helpful , else just a pointer will do
Thanks in advanced
I am adding markers for a few types of things. Is it possible to add a context menu on only certain ones.
I have markers for orders and markers for orders in loads which are joined by lines.
I need to be able to have a context menu for the orders that are in a load to be able to remove the order from the load.