Basic styling not working (MVC4/5) when using Html Helpers

2 posts, 0 answers
  1. Matthias
    Matthias avatar
    1 posts
    Member since:
    Nov 2013

    Posted 21 Nov 2013 Link to this post

    Hi, 
    I am just getting started with Kendo UI and am having trouble getting the Inline-Editing of a Grid to render properly when using the Html Helper (Html.Kendo().Grid<>()). Kendo seems to interfere with the default MVC 4 and MVC 5 styles even when I have a fresh "Kendo UI C#" project created right out of the box.

    I am tempted to give up on the Html Helpers all together and use the JS only route using Json calls for every data load etc, but it seems I would have to do quite a bit more work.

    I have attached a screenshot that shows the styling issues I mean. For instance all textboxes are 300px wide (which I believe is the MVC template default). How have you worked around this?

    @(Html.Kendo().Grid<KendoUIMvcApplication1.Models.MyEntity>(Model)
        .Name("DefaultGrid").Editable()
        .Columns( columns =>
            {
                columns.AutoGenerate(true);
                columns.Command(command =>
                {
                    command.Edit();
                });
            })
        .DataSource(dataSource => dataSource
            .Server()
            .Model(model => model.Id(p => p.Id))
            .Create("Create", "Home")
            .Update("Update", "Home")
            .Destroy("Delete", "Home"))
        );


    Thanks,
    Matt
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 25 Nov 2013 Link to this post

    Hello Matthias,

    If you have installed the MVC extensions with the Visual Studio extension that helps you add the needed files automatically, then you should also have pre-defined editor templates. In our of the latest version we added such default string template called String.cshtml

    with the following content:

    @model object
     
    @Html.TextBoxFor(model => model, new {@class="k-textbox" })

    This add the k-textbox class to every text input that is generated for the Grid. This way style of 100% width (and some other visual effects) will be added to the text inputs, which should resolve the width case that you shared.

    I hope this helps.

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