I wish I'd bookmarked what I saw, but I'd swear I saw a page demonstrating a commonly used technique to help users understand a page: a small popup and arrow points to one area of the page and explains what it does, and when the user closes that popup another on a different part of the page points to another control and explains it, and this happens for several steps. I can't seem to find that control or demo on the kendo ui demo page- does anybody recall what I'm remembering?

Thanks.

In Numeric Textbox when provide value more than 16 digits, Clicking outside the textbox, The number automatically gets incremented and decremented on different values

Another scenario when the provide value more than 20 digits, Clicking outside the textbox displays only one digit or different value

Do we have any solution/workaround to achieve this scenario?

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();
});