I would like to display data in a popup window or tooltip when users hover over or click on a cell in the Telerik grid. I tried using the Telerik tooltip, however the tooltip doesn't display at all. I also tried the jquery and bootstrap tooltips, but they do not work as well. When I use the tooltips for an element outside of the grid, they work fine. Does anyone have a razor example for using the Telerik tooltip in a grid? Also, are there other ways to approach this? Essentially, I want to display a small popup window with a table of additional information related to one specific cell in each row of the table.
Value column has an inline validation of max and min. On entering the correct values also I am getting this error.
I am using this JS code for custom input control. Please suggest me some approach to resolve this error.
if (e.model.UnitTypeCode === "UNIT_LOOKUP_FLOAT") {
i am getting the error when i use @html.kendo()
it showing are you missing any directives
>please suggest any solution
I just upgraded to version 2022.1412 from 2020.3.915. I have a tooltip that loads dynamic content. It used to show a loading panel to the user while it was reaching out the server. After I upgraded it doesn't show it anymore and sometimes it seems like it's not doing anything because the load can take a few seconds. Is there anyway to get this back?
This is what it used to look like...
Thanks
Hi,
I have been trying to display an image inside a Kendo Tooltip in MVC.
The image src is from web.
When I deploy my app in Azure and try to view the tooltip. It do not display the image, instead I get a <broken image> icon displayed.
Requirement:
I am displaying list of Image files in a table in a page.
The table has three columns:
Document Name | Date of Upload | Uploader name
The "Document Name" column will display the name of the documents and these names are visible in the form of hyperlink that has the URL of the document location. (The documents are from SharePoint Online).
My requirement is to on hover I must display a tooltip that will display the image file. (which resembles like a preview)
I am using the below code for kendo tooltip
$("td.documentNo").kendoTooltip({
Here "td.documentNo" :- .documentNo is a class name given to identify the column.
Here "a.hasTooltip" :- .hasTooltip is a class name given to identify the Anchor tag
This on testing in my local works absolutely fine. But when I upload this in Azure Cloud the code doesn't work. It display the tooltip but the image is not displayed.
Am I doing anything wrong. Please guide me.
Regards,
Niroj.
Hi,
I couldn't add the Export to Excel feature to my Dashboard due to the system error "Excel Export in Server Binding Mode".
I am wondering if it is doable by changing my current code. (As an example, I pasted one of the Dashboard tabs that we'd like to be able to download to Excel).
Thank you!
items.Add()
.Text("LLL")
.Content(@<text>
<b>All values in $mn</b>
<div>
@(Html.Kendo().Grid(Model.LLL_Item).Name("LLL")
.Columns(col =>
{
col.Bound(c => c.Asset).Title("Asset").Width(200);
col.Bound(c => c.Current).Title("Current").Format("{0:C}").Width(100);
col.Bound(c => c.YE0).Title("Year End").Format("{0:C}").Width(100);
col.Bound(c => c.YE1).Title("Year 1").Format("{0:C}").Width(100);
col.Bound(c => c.YE2).Title("Year 2").Format("{0:C}").Width(100);
col.Bound(c => c.YE3).Title("Year 3").Format("{0:C}").Width(100);
col.Bound(c => c.YE4).Title("Year 4").Format("{0:C}").Width(100);
col.Bound(c => c.YE5).Title("Year 5").Format("{0:C}").Width(100);
})
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Reports"))
))
</div>
And in Controller I have this:
[HttpPost]I have a grid, I have added custom validations on multiple columns. It's working as expected. But there is one issue, I am not able to edit other cells if there is any validation error on the cell, So first I need to fix the error for this cell then only I am allowed to edit other cells. But I want that it should show the validation error in the tooltip and as well as to edit other cells.
I have attached the tooltip message in the question.
columns.Bound(config => config.X).Title("X").HeaderHtmlAttributes(new { @class = "grid-headercustom" }).
ClientTemplate("#if(data.X == 1)" + "{#<span>Y</span>#}" + "else{#<span>N</span>#}#").
HtmlAttributes(new { @class = "grid-rowcustom" }).HtmlAttributes(new { style = "font-size:12px" }).Filterable(ftb => ftb.Enabled(false));
$.extend(true, kendo.ui.validator, {
rules: {
RateV: function (input, params) {
if (input.is("[name='X']")) {
var grid = $("#mygrid").data("kendoGrid");
var row = input.closest("tr");
var dataItem = grid.dataItem(row);
if (dataItem.X == true && dataItem.Y <= 0) {
input.attr("data-RateV-msg", "X must be greater than zero when the Y is ticked");
return false;
}
}
return true;
}
},
messages: {
RateV: function (input) {
// return the message text
return input.attr("data-val-X");
}
}
});
})(jQuery, kendo);
I have tried to return true also but it doesn't show the error then.
input.attr("data-RateV-msg", "X must be greater than zero when the Y is ticked");
return true;
Hi,
I am trying to persist my MVC Kendo Grid using getOptions() and setOptions(). I am successfully able to save and get.
Now I am facing problem with Kendo grid columns tooptip and data tooltip while setOptions() loading to my page.
I need to get tooptip on Account Code after loading my user preferences by using setOptions(). Please help me.
Here my code
@(Html.Kendo()
.Grid<Models.TransactionSummary>()
.Name("TransactionDetailGrid")
.Columns(c =>
{
c.Bound(p => p.Account.Code).Width(60);
c.Bound(p => p.VendorInvoiceNumber).Width(80);
}
function SaveUserPrererences() {
var grid = $("#" + SearchResultGridId()).data().kendoGrid;
var resources = kendo.stringify(grid.getOptions());
$.ajax(
{
url: "@Url.Action("SaveUserPreferences", "Review", new { area = "Transaction" })",
type: 'POST',
async: false,
contentType: "application/json; charset:utf",
dataType: 'json',
data: JSON.stringify({ gridResources: resources, isActive: isActive }),
success: function (data) { }
}
$("#load").click(function (e) {
var grid = $("#" + SearchResultGridId()).data().kendoGrid;
e.preventDefault();
$.ajax(
{
url: "@Url.Action("GetUserPreferences", "Review", new { area = "Transaction" })",
async: false,
type: "POST",
dataType: 'json',
success: function (data){
if (data) {
var parsedOptions = JSON.parse(data);
parsedOptions.toolbar = [
{ template: $("#toolbarTemplate").html() }
];
parsedOptions.columns[0].headerTemplate = $("#headerTemplate").html();
grid.setOptions(parsedOptions);
}
}