Tooltip for grid cell data (Razor)

11 posts, 0 answers
  1. Richard
    Richard avatar
    38 posts
    Member since:
    Mar 2011

    Posted 20 Jun Link to this post

    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!

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 22 Jun Link to this post

    Hi Richard,

    You could take a look at the approach demonstrated in the following HowTo article:
    The same principle could be used for the MVC wrappers.

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Richard
    Richard avatar
    38 posts
    Member since:
    Mar 2011

    Posted 22 Jun in reply to Konstantin Dikov Link to this post

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

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 24 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Richard
    Richard avatar
    38 posts
    Member since:
    Mar 2011

    Posted 27 Jun in reply to Konstantin Dikov Link to this post

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

     

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 28 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Richard
    Richard avatar
    38 posts
    Member since:
    Mar 2011

    Posted 28 Jun in reply to Konstantin Dikov Link to this post

    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

     

  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 30 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Richard
    Richard avatar
    38 posts
    Member since:
    Mar 2011

    Posted 06 Jul in reply to Viktor Tachev Link to this post

    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

     

  11. Richard
    Richard avatar
    38 posts
    Member since:
    Mar 2011

    Posted 06 Jul in reply to Richard Link to this post

    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.
  12. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 08 Jul Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready