Tooltip for grid cell data (Razor)

[Richard]

I want to present a data element as a tool tip in a grid that has limited space. The data would be a property of the object the grid already displays. This particular property is not displayed due to limited space. I've looked through all the examples I can find. None of them look like what I'm trying to accomplish.

Ideally the user would hover over a row or a cell on a given row and the tooltip would be displayed. In this case the data would indicate whether or not a warehouse item had been picked up or not.

If this is possible, do you have an example in Razor format? This will be implemented in a .cshtml view in MVC4.

Thanks for your help with this!

[Konstantin Dikov]

Hi Richard,

You could take a look at the approach demonstrated in the following HowTo article:

• http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/grid-with-kendo-ui-tooltip

The same principle could be used for the MVC wrappers.

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Richard]

Thanks! This got me started in the right direction. I'm stuck though on trying to fit the example into the Razor syntax for the .Content member. Razor doesn't like the in-line function I'm trying to define and I haven't been able to find an example of the .Content member being defined with an in-line function. I'm thinking perhaps that the way to go is with .Event but how do I get the cell data if I go that way?

Here's the example I'm trying to emulate followed by my non-working experiment:

  $("#grid").kendoTooltip({
    filter: "td:nth-child(2)", //this filter selects the second column's cells
    position: "right",
    content: function(e){
      var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
      var content = dataItem.Text;
      return content;
    }
  }).data("kendoTooltip");
});

.

@(Html.Kendo().ToolTip()
    .For("TranGrid_#=BatchID#")
    .Filter("td:nth-child(3)")
    //.Content(@functions{ function(e){ return "test"; } } )
    .Position("right")
    .Width("500px")
    .AutoHide("true")
//.Events(e => e
//    .Show("tooltip_show")
)

[Konstantin Dikov]

Hi Richard,

Here is the correct way for setting the handler for the content (note that ContentHandler should be used instead of the Content):

@(Html.Kendo().Tooltip()
    .For("#MyGrid")
    .Filter("td:nth-child(2)")
    .ContentHandler("toolTipContent")
    .Position(TooltipPosition.Right)
    .Width(500)
    .AutoHide(true)
)

<script>
    function toolTipContent(e) {
        return "test";
    }
</script>

Best Regards,
Konstantin Dikov
Telerik

[Richard]

Thanks Konstantin,

This get's me closer, and I greatly appreciate the Razor example. (ed. comment, please ask your powers that be to update the documentation with Razor sample code!).

Now I'm having trouble getting the tooltip to refer to the correct object. I've appended my grid structure. It's a 2 level hierarchal grid that displays @model IEnumerable<ROAMTranReview.ROAMHostSvc.BatchHeader> which consists of a BatchHeader object displayed by the top level grid, and n number of child Transaction objects in the second level. I want the tool tip to show one of the properties of the Transaction object for any given row. The actual property I'll display isn't part of the object yet. I'm testing with one that is currently available until I get the tooltip working before I go to the extra work to add the new property.

The error I'm getting is "error CS1061: Kendo.Mvc.UI.Fluent.WidgetFactory<System.Collections.Generic.IEnumerable<ROAMTranReview.ROAMHostSvc.BatchHeader>>' does not contain a definition for 'ToolTip' and no extension method 'ToolTip' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.WidgetFactory<System.Collections.Generic.IEnumerable<ROAMTranReview.ROAMHostSvc.BatchHeader>>' could be found".

I've tried several different combinations of ways to try and get the tooltip to hook to the grid I want but none of them have worked and I get the same error every time.

Here's the grid structure for reference:

@model IEnumerable<ROAMTranReview.ROAMHostSvc.BatchHeader>
@Html.AntiForgeryToken()
@(Html.Kendo().Grid(Model)
    .Name("BatchGrid")
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:725px; width:1700px" })
    .Columns(columns =>
                {
                    columns.Bound(b => b.BatchID)
                                        .Width("300px")
                                        .Title("Batch ID")
                                        .Visible(false);
                    columns.Bound(b => b.ShortBatchID)
                                        .Width("100px")
                                        .Title("Batch ID");
                    columns.Bound(b => b.HasErrorTransaction)
                                        .Width("50px")
                                        .Title("Err").Visible(false);
                    columns.Command(c => c.Custom("Post Batch")
                                            .Click("onClickPostBatch")).Width("100px");
                    columns.Bound(b => b.Created_Emp_Name)
                                        .Width("200px")
                                        .Title("Created Employee");
                    columns.Bound(b => b.Transmitted_DateTime)
                                        .Width("175px")
                                        .Format("{0:MM/dd/yyyy hh:mm tt}")
                                        .Title("Transmitted");
                    columns.Command(c => c.Custom("Delete Batch")
                                            .Click("onClickDeleteBatch")).Width("100px");
                }
            )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Sort(sort => sort.Add("HasErrorTransaction").Ascending()) // <-- initial sort
            .PageSize(16)
            .Read(read => read.Action("FetchBatchCollection", "Home").Data("addlData"))
            .ServerOperation(false)
        )
        .Events(events => events.DataBound("onBatchGridDataBound")
                                .DetailExpand("onBatchGridExpand"))
        .ClientDetailTemplateId("transactions")
    )


<!-- Nested grid for transaction object, member of BatchHeader.TranCollection
     There can be many ITransaction objects per BatchHeader -->
<script id="transactions" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ROAMTranReview.ROAMHostSvc.TransactionBase>()
            .Name("TranGrid_#=BatchID#")  // makes the sub-grid name unique so that it will be displayed on each child row.
            .HtmlAttributes(new { style = "height:350px; width:1600px" })
            .Columns(columns =>
            {
                columns.Bound(b => b.BatchID)
                                    .Visible(false);
                columns.Bound(b => b.TransactionType)
                                    .Visible(false);
                columns.Bound(b => b.ItemDescription)
                                    .Visible(false); // todo: this must be changed when tool tip is working... different field is required but not yet part of the object
                columns.Bound(b => b.ID)
                                    .Width("300px")
                                    .Title("Transaction ID")
                                    .Visible(false);
                columns.Bound(b => b.ShortTranID)
                                    .Width("80px")
                                    .Title("Tran ID");
                columns.Command(c => c.Custom("View")
                                      .Click("onClickViewTransaction"))
                                      .Width("90px");
                columns.Bound(b => b.TranTypeDisplayText)
                                    .Width("100px")
                                    .Title("Type");
                columns.Bound(b => b.ItemID)
                                    .Width("100px")
                                    .Title("Item ID");
                /*
                columns.Bound(b => b.ItemDescription)
                                    .Width("200px")
                                    .Title("Item Description");
    */
                columns.Bound(b => b.ShortItemDescription)
                                    .Width("300px")
                                    .Title("Item Description");
                columns.Bound(b => b.ItemClassification)
                                    .Width("100px")
                                    .Title("Class");
                columns.Bound(b => b.Quantity)
                                    .Width("50px")
                                    .Title("Qty");
                columns.Bound(b => b.IssueUnitOfMeasure)
                                    .Width("75px")
                                    .Title("UOM");
                columns.Bound(b => b.WorkOrderTask)
                                    .Width("100px")
                                    .Title("Workorder");
                columns.Bound(b => b.EmployeeName)
                                    .Width("200px")
                                    .Title("Employee");
                columns.Command(c => c.Custom("Del Tran")
                                      .Click("onClickDeleteTransaction")).Width("110px");
                columns.Bound(b => b.PostingFlagDisplayText)
                                    .Width("150px")
                                    .Title("Posting Flag");
           })
           .Scrollable()
           .Pageable()
           .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .PageSize(4)
                .Read(read => read.Action("FetchTransactionCollection", "Home", new { batchID = "#=BatchID#" }))
            )
            .Events(events => events.DataBound("onTranGridDataBound")
                                    .DetailExpand("onTranGridExpand"))
            .ToClientTemplate()
    )

    @(Html.Kendo().ToolTip()
        .For("#BatchGrid_#=TranGrid_#=BatchID#")
        .Filter("td:nth-child(3)")
        .ContentHandler("toolTipContent")
        .Position(TooltipPosition.Right)
        .Width(500)
        .AutoHide(true)
    )

 function tooltipContent(e) {
        return "test from tooltipContent() handler";
        //var dataItem = $("#TranGrid_#=BatchID#").data("kendoGrid").dataItem(e.target.closest("tr"));
        //var content = dataItem.Text;
        //return content;
    }

 

[Konstantin Dikov]

Hello Richard,

For enabling the tooltip for the detail tables you could use the following approach, where you are setting the "For" property to point to the main grid, but within the Filter you are limiting the tooltip to the child grids only:

@(Html.Kendo().Tooltip()
    .For("#grid")
    .Filter(".k-detail-cell td")
    .ContentHandler("toolTipContent")
    .Position(TooltipPosition.Right)
    .Width(500)
    .AutoHide(true)
)

Please give this a try and let me know if everything works correctly on your side too.


Regards,
Konstantin Dikov
Telerik

[Richard]

Those changes seem not to have any effect, although they did look promising and looked like a good approach. I'm still getting the same error reported before where the grid appears to be trying to access a property of the model that it doesn't (and never will) have.

One thought I had was whether or not the tooltip definition belonged in the same script block as the child grid. I tried moving it to it's own script block and also to being outside of any script block. It made no difference at all. The same error was rendered.

Would it matter if it was in the block with the parent grid? That doesn't seem reasonable, but I've been logical and wrong lot's of times!

Thanks,

Rich

 

[Viktor Tachev]

Hi Richard,

Would you send us a runnable sample where the issue is replicated? Thus, we will be able to examine the problematic behavior locally and look for its cause.

Regards,
Viktor Tachev
Telerik

[Richard]

Hello Viktor. My apologies for the delay... we work 4 10's and had a national holiday this past Monday. I have uploaded a working demo that should illustrate the problem. FYI, the real application has been in production for a couple of years now. I'm adding the tooltip as an enhancement for a data element the grid has no room to show normally. This would indicate if an item had been picked up from a storeroom or not.

The error in the demo is not precisely the same but does reference the objects the grid uses vs. the grid columns itself. I used the same objects as the production apps and faked the data using an xml file. I stripped much of the class code out in order to keep this small and relevant. None of the properties have been modified. If it matters, the production app is in VB.Net and the demo is in C#. I used your handy translator to do that.

I'm very much looking forward to your reply.

Thanks!

Rich

 

[Richard]

Viktor, looks like the zip file did not get uploaded as it's too big. I've already stripped the demo down as far as I can. Please let me know if you have an ftp location I can send this too. The file is ~7.3MB.

[Viktor Tachev]

Hi Richard,

The attached file limit is 20MB and you should be able to attach the 7MB file. However, you cannot do that in a public forum post.

Would you open a support ticket and attach the sample there? Just ensure that it is archived in zip format.

Regards,
Viktor Tachev
Telerik by Progress