This is a migrated thread and some comments may be shown as answers.

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

1 Answer 24 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matthias
Top achievements
Rank 1
Matthias asked on 22 Nov 2013, 03:36 AM
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

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 25 Nov 2013, 12:48 PM
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!
Tags
Grid
Asked by
Matthias
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or