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

[Matthias]

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

[Petur Subev]

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