Kendo MVC Grid not constrained within main Div @RenderBody generated content

[BRiddle]

I am trying to teach myself both ASP.Net MVC and Kendo.   I used Microsoft's "MvcMusicStore" tutorial and app to get the basic principles and next have been working through replacing some of the tutorial app's HTML controls with Kendo from the 2012.3.1114 "Complete for MVC" download to learn how to use Kendo itself. 

Two questions:

1.)  I replaced one of the app's main HTML tables (on the /StoreManager/Index/ view) with the Kendo Grid.   The original table is output by the @RenderBody() function in the 'Main" <div> on the shared "_Layout.cshtml page.   That layout has a vertical menu panel to the left of this <div> that extends down the upper left side of table, so the entire table renders to the right of that menu.  (See attached MvcMusicStoreWithStockTable.jpg screenshot).

I have the Kendo Grid rendering, now, but instead of rendering in the <div> to the right of the shared vertical menu, it renders from the entire page's left margin completely below the vertical menu panel and with its left boundary equal to the left boundary of that panel.  It's basically placed below the shared _Layout instead of rendered as part of it.  (See attached MvcMusicStoreWithKendoGrid.jpg screenshot).

What am I doing wrong here such that I can't retain the menu panel to the left of the "Main" <div> containing the Kendo grid?

2.)   Part of the MvcMusicStore tutorial is about using Html Helpers.   Part of the tutorial defines an "@Truncate" helper which is used to truncate some of the longer strings and leave them as partial string plus an ellipsis.   In the original table, it is used as in this:

        <td>
            @Truncate(item.Artist.Name, 25)
        </td>


But I cannot find a syntax in the "Columns.Bound" sequence of the Grid that will allow me to use the Truncate helper without throwing syntax errors.  (I had thought this might be possible via a Kendo Grid Column Template).   Is that possible or do I need to implement an intermediate ViewModel with the truncation built in instead of being able to make that decision at the View HTML level?

Thank you in advance for the help,
-Bob

@model IEnumerable<MvcMusicStore.Models.Album>
           
@helper Truncate(string input, int length)
{
    if (input.Length <= length) {
        @input
    }
    else {
        @input.Substring(0, length)<text>...</text>
    }
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

@(Html.Kendo().Grid(Model)    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(o => o.Genre.Name).Title("Genre");
        columns.Bound(o => o.Artist.Name).Title("Artist");
        columns.Bound(o => o.Title).Title("Album Title");
        columns.Bound(o => o.Price).Title("Price");

        columns.Template(@<text>
                    @Html.ActionLink("Edit", "Edit", new { id = @item.AlbumId }) |
                    @Html.ActionLink("Details", "Details", new { id = @item.AlbumId }) |
                    @Html.ActionLink("Delete", "Delete", new { id = @item.AlbumId })  
        </text>);
    })
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { @class = "maxHeight" }).Scrollable(scrolling => scrolling.Height("auto"))
    )

** Note that overwriting the installed Kendo MVC 2012.3.1114 with the files from hotfix 2012.3.1304 did not help.

[Vladimir Iliev]

Hi Bob,

 
Please find the answers of your questions below:

1. I tried to replicate the project locally and when I replace the table with the provided code I was able to get the identical view as in the provided screenshot. After checking the generated HTML code it seems that the page is rendered correctly with the current logic - currently the Grid has no explicitly set width and the "main" container CSS "float" property is set to "left". In this case the IE set the Grid table to the page width and because there are insufficient space the Grid is moved under the menu. Basically to achieve the desired behavior you should set the Grid width - please check the example below:

   .HtmlAttributes(new { @style = "width: 1000px;" })

2. To truncate current column text you can simply use the Template method in the following way:

   columns.Bound(o => o.Genre.Name)
       .Title("Genre")
       .Template(@<text>
           @Truncate(item.Genre.Name, 25)
       </text>);
   columns.Bound(o => o.Artist.Name)
       .Title("Artist")
       .Template(@<text>
           @Truncate(item.Artist.Name, 25)
       </text>);
   columns.Bound(o => o.Title)
       .Title("Album Title")
       .Template(@<text>
           @Truncate(item.Title, 25)
       </text>);

          

Kind Regards,
Vladimir Iliev
the Telerik team

[BRiddle]

Hi Vladimir,

Thank you very much for the response.   Your suggestions resolved both of my questions.

Thanks again,
-Bob