Command Button Tooltip

3 posts, 1 answers
  1. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 06 Aug 2014 Link to this post

    I need to add a tolltip to the Edit Button. I've tried this approach but it fails display the values for the column.
    This approach displays the Following tooltip: Edit #= UserFirstName # #=UserLastName#, #=RoleDescription#
    Should display: Edit MIKE JOHNSON, Adminstrator

    com.Edit().HtmlAttributes(new { title = string.Format("Edit {0} {1}, {2}", "#= UserFirstName # ", "#=UserLastName#", "#=RoleDescription#") });

    I was not able to find any post that shows a solution to this.
    What I'm doing wrong.

    Current Version: 2014.2.716

    The complete code is below.

    @(Html.Kendo().Grid<FDolUser>()
    .Name("grid")
    .Columns(col =>
    {
    col.Command(com =>
    {
    com.Edit().HtmlAttributes(new { title = string.Format("Edit {0} {1}, {2}", "#= UserFirstName # ", "#=UserLastName#", "#=RoleDescription#") });
    com.Destroy();
    });
    col.Bound(c => c.RacfId).ClientTemplate("#=UserTypeDescription#").Title("User Type");
    col.Bound(c => c.RacfId).ClientTemplate("#=VendId#").Title("Vendor Id");
    col.Bound(c => c.RacfId);
    col.Bound(c => c.RacfId).ClientTemplate("#=StaffMemberSequence#").Title("Staff Id");
    col.Bound(c => c.RoleCode).ClientTemplate("#=RoleDescription#");
    col.Bound(c => c.RacfId).ClientTemplate("#=SubScrabAcctId#").Title("ISA Id");
    col.Bound(c => c.UserFirstName);
    col.Bound(c => c.UserLastName);
    })
    .Filterable()
    .Sortable()
    .Pageable()
    .ToolBar(t => t.Create())
    .Editable(e => e.Mode(GridEditMode.PopUp))
    .Events(e => e.Edit("onEdit").DataBound("onDataBound"))
    .DataSource(ds => ds
    .Ajax()
    .Model(model => model.Id(p => p.UsrSq))
    .Events(events => events.Error("onError"))
    .Read(r => r.Action("GetUser", "Admin"))
    .Update(u => u.Action("UserUpdate", "Admin").Data("additionalInfo"))
    .Destroy(d => d.Action("userDestroy", "Admin"))
    .Create(c => c.Action("UserUpdate", "Admin").Data("additionalInfo"))
    .ServerOperation(true)
    ))
  2. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1431 posts

    Posted 08 Aug 2014 Link to this post

    Hi Mike,

    I would recommend using a Kendo UI Tooltip widget instead. For example: 
    @(Html.Kendo().Tooltip()
        .For("#grid")
        .Filter(".k-grid-edit")
        .ContentHandler("getTooltipContent")
    )
    <script type="text/javascript">
        function getTooltipContent(e) {
            var row = e.target.closest("tr");
            var grid = $("#grid").getKendoGrid();
            var item = grid.dataItem(row);
            return "Edit " + item.UserFirstName ;
        }
    </script>


    Regards,
    Alexander Popov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 08 Aug 2014 in reply to Alexander Popov Link to this post

    Thanks, that worked great.
Back to Top