or
3 answers
1.1K+ views
I'm using the tooltip for validation purposes. I create tooltips when a form fails validation by hooking into jQuery validation.
Because it's for validation, I don't want the tooltips to disappear when the user clicks away from the input.
e.g. I have an input text box which has invalid data, and so I show the tooltip next to the input. When the user clicks away from the input, the tooltip is hidden. I want it to permanently stay shown.
I've tried overriding the hide() method with no success.
Code below:
$.validator.setDefaults({
showErrors: function (errorMap, errorList) {
$.each(this.validElements(), function (index, element) {
var tooltip = $(element).data("kendoTooltip");
if (tooltip) {
tooltip.destroy();
}
});
$.each(this.invalidElements(), function (index, element) {
var tooltip = $(element).data("kendoTooltip");
if (tooltip) {
tooltip.destroy();
}
});
$.each(errorList, function (index, error) {
var element = $(error.element);
element.addClass("input-validation-error");
var tooltip = element.kendoTooltip({
content: error.message,
hide: function() {} //! THIS DOESN'T OVERRIDE!
}).data("kendoTooltip");
tooltip.show(element);
});
}
});
Because it's for validation, I don't want the tooltips to disappear when the user clicks away from the input.
e.g. I have an input text box which has invalid data, and so I show the tooltip next to the input. When the user clicks away from the input, the tooltip is hidden. I want it to permanently stay shown.
I've tried overriding the hide() method with no success.
Code below:
$.validator.setDefaults({
showErrors: function (errorMap, errorList) {
$.each(this.validElements(), function (index, element) {
var tooltip = $(element).data("kendoTooltip");
if (tooltip) {
tooltip.destroy();
}
});
$.each(this.invalidElements(), function (index, element) {
var tooltip = $(element).data("kendoTooltip");
if (tooltip) {
tooltip.destroy();
}
});
$.each(errorList, function (index, error) {
var element = $(error.element);
element.addClass("input-validation-error");
var tooltip = element.kendoTooltip({
content: error.message,
hide: function() {} //! THIS DOESN'T OVERRIDE!
}).data("kendoTooltip");
tooltip.show(element);
});
}
});
Kiril Nikolov
Telerik team
answered
on
10 Jun 2014
3 answers
735 views
Hello ,
I have a Kendo dropdownlist which has items like "Hello Mr. %1 ", "Welcome %1" etc. I Display in kendowindow a TextBox for Username Input and then this Dropdown. When i enter a Name in username field and then cloick on Dropdown i should replace %1 with username in the Open Event so Dropdown Displays Hello Mr. Username. I would like to achieve this in JQuery.
$("#Briefanrede").data("kendoDropDownList").bind("open", function () {
});
Thanks
Anamika
I have a Kendo dropdownlist which has items like "Hello Mr. %1 ", "Welcome %1" etc. I Display in kendowindow a TextBox for Username Input and then this Dropdown. When i enter a Name in username field and then cloick on Dropdown i should replace %1 with username in the Open Event so Dropdown Displays Hello Mr. Username. I would like to achieve this in JQuery.
$("#Briefanrede").data("kendoDropDownList").bind("open", function () {
});
Thanks
Anamika
Alexander Valchev
Telerik team
answered
on
10 Jun 2014
3 answers
944 views
I have the need that I trigger a scroll to bottom once a new line gets added to the listview. This should be triggered by code but so far I have not found a good solution.
So far my solution is:
scrollViewToBottom: function (view) {
var scroller = view.scroller;
console.log("scrollheight " + scroller.scrollHeight() + " height: " + scroller.height());
var offset = scroller.height();
if (offset == 0)
offset = 100;
scroller.scrollTo(0, scroller.scrollHeight() * -1 + offset);
},
but this does not work in most scenarious because scroller.scrollHeight and scroller.height don't seem to be initialized.
Is there any better solution to this?
Christoph
So far my solution is:
scrollViewToBottom: function (view) {
var scroller = view.scroller;
console.log("scrollheight " + scroller.scrollHeight() + " height: " + scroller.height());
var offset = scroller.height();
if (offset == 0)
offset = 100;
scroller.scrollTo(0, scroller.scrollHeight() * -1 + offset);
},
but this does not work in most scenarious because scroller.scrollHeight and scroller.height don't seem to be initialized.
Is there any better solution to this?
Christoph
Kiril Nikolov
Telerik team
answered
on
10 Jun 2014
2 answers
1.0K+ views
I'm using a filter and setting the title attribute on an element, but the original title is appearing.
I find that I need to also do this:
$elem.data(kendo.ns + 'title', newTitle);
... for the new title to appear in the tooltip. However, IF I force a different tooltip to appear first, then my updated title attribute is displayed.
Seems to me that in _show, a test should be made to check if the title attribute has changed;
if (!current || current[0] != target[0] || _hasNewContent(target)) {
that._appendContent(target);
that.popup.options.anchor = target;
}
_hasNewContent can compare the current title attribute to the value that's been saved off and, if different, reset the content.
I find that I need to also do this:
$elem.data(kendo.ns + 'title', newTitle);
... for the new title to appear in the tooltip. However, IF I force a different tooltip to appear first, then my updated title attribute is displayed.
Seems to me that in _show, a test should be made to check if the title attribute has changed;
if (!current || current[0] != target[0] || _hasNewContent(target)) {
that._appendContent(target);
that.popup.options.anchor = target;
}
_hasNewContent can compare the current title attribute to the value that's been saved off and, if different, reset the content.
1 answer
238 views
I can select a tab no problem by using tabStrip.activateTab(tabElement);
However, the color is not the regular selected tab color. I actually have to click it to make it get styled properly.
Is there any easy way to trigger this behavior?
However, the color is not the regular selected tab color. I actually have to click it to make it get styled properly.
Is there any easy way to trigger this behavior?
Dimo
Telerik team
answered
on
09 Jun 2014
1 answer
347 views
Hello there,
I am only using the month view for my Scheduler and i would like to disable public holidays and some other special days in the calendar and give these days a particular background color setting.
Is this possible?
Thanking you,
Chandra
I am only using the month view for my Scheduler and i would like to disable public holidays and some other special days in the calendar and give these days a particular background color setting.
Is this possible?
Thanking you,
Chandra
Alexander Popov
Telerik team
answered
on
09 Jun 2014
3 answers
229 views
Hi,
I am sending an ajax request inside datasource update method. How can stay in edit mode if this request fails ?
Following is a sample code snippet of mine .
this._datasource = new kendo.data.DataSource({
transport: {
create: create,
read: read,
update: update,
destroy: destroy
}
})
function update(options) {
that._api.put(resource, inputData)
.done(function (data) {
})
.fail(function (error) {
that._datasource.cancelChanges();
});
}
I am sending an ajax request inside datasource update method. How can stay in edit mode if this request fails ?
Following is a sample code snippet of mine .
this._datasource = new kendo.data.DataSource({
transport: {
create: create,
read: read,
update: update,
destroy: destroy
}
})
function update(options) {
that._api.put(resource, inputData)
.done(function (data) {
})
.fail(function (error) {
that._datasource.cancelChanges();
});
}
Petur Subev
Telerik team
answered
on
09 Jun 2014
4 answers
232 views
Are the Kendo UI Dataviz components supported on IE7/IE8. As far as I can tell, they seem to be using SVG for rendering, which is not supported by IE7/IE8. I tried this example: http://demos.telerik.com/kendo-ui/area-charts/index. It does not work on IE7 (emulation mode on IE11). Surprisingly it works in IE8 (emulation mode) although IE8 does not support SVG - I don't understand that part!
T. Tsonev
Telerik team
answered
on
09 Jun 2014
1 answer
109 views
We are replicating the functionality of the RadDataFilter control of Telerik with DataSourceFilter of Kendo Grid.
Here certain filters like 'Does not contain', 'Is contained in', 'Is empty', 'Is null', 'Is not null' etc. are not found with the DataSourceFilter.
Hence, please provide us with some suggestion.
Here certain filters like 'Does not contain', 'Is contained in', 'Is empty', 'Is null', 'Is not null' etc. are not found with the DataSourceFilter.
Hence, please provide us with some suggestion.
Kiril Nikolov
Telerik team
answered
on
09 Jun 2014
1 answer
780 views
I have a column called Due that contains a date from the server. On the client I use SetValAndColorForDue() to change the date to a the number of hours from today and I change the color to either Red or Black.
When I implement SetValAndColorForDue in the grid { field: "Due", title: "Due", width: 100, template: '#=SetValAndColorForDue(Due)#' , as seen below, the filtering doesn't work at all. I can see the filter options just that when I filter by the output nothing happens.
The grid: Focus on the BOLD code below.
When I implement SetValAndColorForDue in the grid { field: "Due", title: "Due", width: 100, template: '#=SetValAndColorForDue(Due)#' , as seen below, the filtering doesn't work at all. I can see the filter options just that when I filter by the output nothing happens.
function SetValAndColorForDue(dueDate) { var a = moment(); var b = moment(dueDate); var duration = a.diff(b, 'hours'); if (duration > 24){ return "<font color=\"red\">" + duration + " </font>"; } else { return duration; }}The grid: Focus on the BOLD code below.
$(document).ready(function () { var selectedCaseID = 43; $("#grid").kendoGrid({ height: 600, columns: [ "InvestigationID", { field: "Status", title: "Status", width: 100 }, { field: "FullName", title: "Full Name", width: 220 }, "Priority", "Created", { field: "Due", title: "Due", width: 100, template: '#=SetValAndColorForDue(Due)#' }, "LastActivityDate", "LastActivityBy" ], selectable: "row", pageable: { info: true }, // enable paging filterable: true, // enable filtering sortable: true, // enable sorting //toolbar: ["create", "save", "cancel"], // specify toolbar commands dataSource: { serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 50, schema: { data: "d.Data", // web methods return JSON in the following format { "d": <result> }. Specify how to get the result. total: "d.Total", model: { // define the model of the data source. Required for validation and property types. id: "InvestigationID", fields: { InvestigationID: { type: "string" }, Status: { type: "string" }, FullName: { type: "string" }, Priority: { type: "string" }, Created: { type: "string" }, Due: { type: "string" }, LastActivityDate: { type: "string" }, LastActivityBy: { type: "string" } } } }, transport: { read: { url: "/InvestigationDesign.aspx/Investigations", //specify the URL which data should return the records. This is the Read method of the Products.asmx service. contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON type: "POST" //use HTTP POST request as the default GET is not allowed for web methods }, parameterMap: function (data, operation) { if (data.models) { return JSON.stringify({ products: data.models }); } else if (operation == "read") { //Page methods always need values for their parameters data = $.extend({caseid: selectedCaseID, sort: null, filter: null }, data); return JSON.stringify(data); } } } } }); var grid = $("#grid").data("kendoGrid"); // Handles double click of grid. $("#grid").on("dblclick", "tr.k-state-selected", function () { var model = grid.dataItem(grid.select()); window.open("Investigation/DefaultAngularTest.aspx?invID=" + model.InvestigationID, "_blank"); }); });
Dimo
Telerik team
answered
on
09 Jun 2014
