Custom Row Template that expands on Mouse over

[Reid]

I am using ASP.NET Core MVC in this project.  I want to have a row template show on the hover of a column value in the grid.  So if the user is viewing products in a row format, when the user hovers over the Product Name the row would expand and show the custom row template showing details. 

Are there any examples of this in action?

[Marin Bratanov]

Hello Reid,

You could define the desired template and use CSS to increase the row height when it is hovered (note that tables stretch to their content, so the height rules must be somewhere in the content). 

Here's a basic example I made for you (of course you can change the element that gets hovered to be the particular cell content not the entire row):

View:

<style>
    .myTemplate .description {
        height: 20px;
        overflow: hidden;
    }

    .myTemplate:hover .description {
        height: 60px;
        border: 2px solid red;
    }
</style>

@(Html.Kendo().Grid<MyData>()
    .Name("grid")
    .HtmlAttributes(new { style = "height:430px;", @class= "fixedLayout" })
    .Columns(columns =>
    {
        columns.Bound(e => e.ID).Width(400).Title("ID");
        columns.Bound(e => e.Name);
    })
    .ClientRowTemplate(
        "<tr data-uid='#: uid #' class='myTemplate'>" +
         "<td>" +
         "<div class='description'>Name  #: Name# <br />" +
             "Country : #: AnotherField# </div>" +
         "</td>" +
         "<td>" +
             "#: ID #" +
         "</td>" +
        "</tr>"
    )

    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("RowTemplate_Read", "Home"))
    )
    .Scrollable()
)

Model:

public IActionResult Index()
{

    return View();
}

public ActionResult  RowTemplate_Read([DataSourceRequest] DataSourceRequest request)
{
    return Json(
        Enumerable.Range(1, 20)
        .Select(x => new MyData { ID = x, Name = "name " + x, AnotherField = "some data " + x })
        .ToDataSourceResult(request)
        );
}

Controller:

public class MyData
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string AnotherField { get; set; }
}

Regards,
Marin Bratanov
Progress Telerik