How to specify style in Kendo UI asp.net mvc grid editor

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    6 posts
    Member since:
    Mar 2013

    Posted 06 Mar 2013 Link to this post

    I'm working through some Kendo UI tutorials and have a problem with the look of my text boxes on the grid. The demo I'm following is http://demos.kendoui.com/web/grid/editing-inline.html.

    I've figured out how to format the date in the grid and use a datepicker for the date in the editor. To do this I've used an Editor template.

    I've added an editor template for the name column just so I could apply a css class and it looks better but it doesn't function correctly. When the editor opens up the value in the text box is empty (see image). Surely there must be an easier way to apply a css class.

    Do I have to create an editor template for all text boxes in the grid? If so, how can I have it bring the value when editing?

    Here's the code for the grid:

    @(Html.Kendo().Grid<Product>()    
    .Name("Grid")    
    .Columns(columns => {        
        columns.Bound(p => p.Name);
        columns.Bound(p => p.UnitPrice).Width(140);
        columns.Bound(p => p.Units).Width(140);
        columns.Bound(p => p.Discontinued).Width(100);
                columns.Bound(p => p.Date).Width(100).Format("{0:d/M/yyyy}");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource        
        .Ajax()                 
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.Id))
        .Create(update => update.Action("EditingInline_Create", "Home"))
        .Read(read => read.Action("EditingInline_Read", "Home"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
    )

    Here's the code for the name editor template:

    @using Kendo.Mvc.UI
    @model KendoUiOne.Models.Product
    
    @Html.TextBoxFor(x=>x.Name, new {@class = "k-input k-textbox"})

    I also posted on stackoverflow.

    http://stackoverflow.com/questions/15257247/how-to-specify-style-in-kendo-ui-asp-net-mvc-grid-editor
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 08 Mar 2013 Link to this post

    Hi again Andrew,

    The issue is that model passed to the editor template is not the Product but just the string. This means that the model of the editor template is string. And you should declare the TextBox helper to be for the model itself.

    the Editor template should look like this

    @model string @Html.TextBoxFor(x=>x, new {@class = "k-input k-textbox"})
    To eliminate any further issues I created a sample project - check the Name column and its editor.

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top