Telerik Forums
UI for ASP.NET MVC Forum
2 answers
4.3K+ views

 

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.

Patrick | Technical Support Engineer, Senior
Telerik team
 updated answer on 05 Feb 2024
0 answers
53 views

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") {

                var dataItem = $("#DesignMaterialSystemAttribute").data("kendoGrid").dataSource.get(e.model.DesignMaterialSystemAttributeId);
                console.log(dataItem)

                var min = parseFloat(dataItem.MinAcceptableText);
                var max = parseFloat(dataItem.MaxAcceptableText);
                var input = $("<input data-val='true' autocomplete='off' onblur='Value_validate()' onclick='setTwoNumberDecimal(this)' min = '" + min + "' max='" + max + "' type='number' step='0.01' data-validate='false' name='AttributeValue' id='AttributeFloatId' data-bind='value: AttributeValue' style='width: 70% ; outline:none' />");

                
                var grid = $("#DesignMaterialSystemAttribute").data("kendoGrid");
                var AttributeNumberValue = null;
                var data = grid.dataSource.data();
                var gridRowTr = grid.dataItem($(e.container).closest("tr"));
                var currentRowIndex = data.indexOf(gridRowTr);
                $(document).on('input', '#AttributeFloatId', function () {
                    AttributeNumberValue = $("#AttributeFloatId").val();
                    data[currentRowIndex].set("AttributeValue", AttributeNumberValue);
                    data[currentRowIndex].set("AttributeText", AttributeNumberValue);
                })

            

 

 

 

n/a
Top achievements
Rank 1
 asked on 16 Mar 2023
0 answers
122 views
0 answers
58 views

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

Dave Wolf
Top achievements
Rank 1
Iron
 asked on 22 Apr 2022
1 answer
98 views

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({
                      filter: "a.hasTooltip",
                        position: "right",
                        width: 500,
                        height: 500,
                        content: function (e) {
                            var URL = e.target.context.href;
                            return $("<img class='image-preview' height='500' width='500'>").attr("src", URL);
                        }
                    });

 

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.

 

Eyup
Telerik team
 answered on 16 Dec 2021
5 answers
5.0K+ views
When we hover on element that has title it will show correctly but when we hover on element that do not have title, it will still display the previous element title. So how to avoid tooltip to display when title attribute is unavailable or empty? Thank you.

$("#Grid").kendoTooltip({
         filter: "td"
});
Chris
Top achievements
Rank 1
Iron
 updated answer on 08 Oct 2021
1 answer
151 views

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]
        public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);

            return File(fileContents, contentType, fileName);
        }    
Anton Mironov
Telerik team
 answered on 08 Oct 2021
0 answers
48 views

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;

Vivek
Top achievements
Rank 1
Iron
 updated question on 12 Aug 2021
11 answers
762 views

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

Ianko
Telerik team
 answered on 08 Dec 2020
1 answer
167 views
Kendo tooltip overlaps the menu items. Any help is appreciated. Thank you.
Petar
Telerik team
 answered on 30 Nov 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?