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.

For example on:  http://demos.kendoui.com/web/grid/hierarchy.html  Is there a setting (using the KendoUI ASP.NET MVC controls) that will change the initial grid loading so that the first nested record in a hierarchy grid (ie: the "Nancy" record) loads in a collapsed state.

I attached 2 images to clarify:
hierarchy-before.png is how it currently loads
hierarchy-after.png is how I would like it to initially load.

Thanks

I have a ListView with a PageSize of 1.as below:-

@(Html.Kendo().ListView<ResultViewModel>()
               .Name("detailListView")
               .TagName("div")
         .DataSource(dataSource =>
         {
             dataSource.Read(read => read.Action("GetDetails", "Result", new { id = ViewBag.TeamId }));
             dataSource.PageSize(1);
          })
            .ClientTemplateId("detail-template")
                .Pageable(pager => pager
                    .Numeric(true)
                    .PreviousNext(true)
                    .Info(true)
                )                
    )

How do I set the initial page number to a number other than 1? The datasource JS has a 'page' option but this wrapper doesn't seem to have one.

Not matter what I try, I cannot get the template working when using ajax binding on a DropDownList() using Razor / MVC and EF.

The dropdownlist is getting the data properly from the json endpoint (returning a generic list of ef objects via json) but it's the drop down template that is not being generated properly.  I get "undefined" for data values in each item's option.

Have tried all kinds of things like:

.Template( " Employee Name : ${ data.empname }")

or

.Template( " Employee Name : ${ #=data.empname# }")

or

.Template( " Employee Name : #=data.empname# ")

and not matter what I try - i get

 "Employee Name:  undefined"

for each item.

Any help appreciated....

Is there a way to make something editable only on create and not on edit in the editor?

To specify what I mean.

I would like different rules for editable depending on whether you have add new or edit old post. Some key fields cannot be edited once you done the initial create.

Is it possible to specify page number somewhere in HTML helper so that grid's current page will be set to this specific page after loading? (I know it could be done by JavaScript without using HTML helpers, but it would be great to be able to do it in HTML helper)

Hello,

We are using Kendo grid to show records. We have a requirement of showing a textbox for a column when "Edit" button is clicked. This is working fine (in-built functionality provided by Kendo). However, when the "Create" button is clicked, the very same column needs to be replaced by an '<input type="file"....' so that the user is able to select a file from his machine. Any pointers on this will be really helpful.

Regards,
Nikhil

Hi everyone,

I'm doing an ASP.NET MVC project with Kendo UI, and I've got a little problem.

I have a jquery script for re sizing my splitter.


But when I load my layout, I've got the good size, but not the good display. (1.png)

If I hide my bottom splitter , and then show it, it's the well display (2.png)

Thanks all for you answers :)

How do I change the text of the "Cancel changes" button on a toolbar of a grid?


Regards,
Jan Erik

I am trying to conditionally format a column of booleans to display "Yes" if true and "No" if false.  I am following the example here, but it is not working.  Regardless of the values in my "IsEnabled" column, it displays the same thing for every column.  In the case below, it displays "Yes" for every row in the column even though "IsEnabled" is false. Please advise. Thanks.