Edit input elements not themed for Grid

[Jonathan Travis]

I'm building a grid based off of the popup editing demo: 
http://demos.kendoui.com/web/grid/editing-popup.html

However, the input elements of my grid are not styled/themed.

The date input is just a textbox, not a datepicker, and all the textboxes are offset from their horizontal center.

Here is the code for the grid

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(100);
        columns.Bound(p => p.UnitsInStock).Width(100);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.LastSupply).Editable(true);

        })
        .Create(update => update.Action("EditingPopup_Create", "Grid"))
        .Read(read => read.Action("EditingPopup_Read", "Grid"))
        .Update(update => update.Action("EditingPopup_Update", "Grid"))
        .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
    )
)


It looks like the appropriate classes are not being added to the elements.  When I check out the rendered markup for the input elements, a textbox is rendered as such.

<input name="Company" class="text-box single-line" id="Company" type="text" value="" data-val-required="The Company Name field is required." data-val="true" data-bind="value:Company">

The classes are incorrect as they should be "k-input k-textbox".

Also, you can see from the screen shot that the datetime is rendered as a textbox and not a calendar picker.

Here is the model.

    public partial class Opportunity
    {
        [ScaffoldColumn(false)]
        public int ID { get; set; }

        [Required]
        [DisplayName("Company Name")]
        public string Company { get; set; }
        public int? StatusID { get; set; }

        [DataType(DataType.Date)]
        public DateTime DateAdded { get; set; }

        public string PotentialAmount { get; set; }
        public double? PercentComplete { get; set; }
        public string CreatedBy { get; set; }
        public DateTime? DateClosed { get; set; }
    }



Thanks

[Dimiter Madjarov]

Hi Buddy,

I assume that the Kendo UI editor templates are not included in the project. By convention they should be placed in the ~Views/Shared/EditorTemplates folder. You could find the built in templates in the wrappers/aspnetmvc/ EditorTemplates folder of your Kendo UI distribution package.

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik

[Jonathan Travis]

Thank you for your help.  That worked for the most part.

However, the date field is rendering as a datetime picker and not just a date picker.  Is there a way to specify which it should be? As you can see in my code, I've set the datatype to date with an annotation.

Thanks.

[Dimiter Madjarov]

Hi Buddy,


Specifying the Data annotation type attribute is the correct way to go in the current case. We are using it in our MVC demos solution too.

ProductViewModel class

[DisplayName("Last supply")]
[DataType(DataType.Date)]
public DateTime LastSupply
{
    get;
    set;
}

Date.cshtml

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m))

You could assure that a DatePicker is rendering by adding a LastSupply column in some of the editing demos.

If you are still experiencing the issue, could you please provide us a small runnable isolated example, where it is reproducing so we could inspect it locally and assist you further?

Regards,
Dimiter Madjarov
Telerik

[Jonathan Travis]

Thank you, the data annotations did it.  It looks like I updated the wrong class with the annotations.