Edit input elements not themed for Grid

5 posts, 0 answers
  1. Jonathan Travis
    Jonathan Travis avatar
    20 posts
    Member since:
    Dec 2013

    Posted 06 Dec 2013 Link to this post

    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


  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 10 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jonathan Travis
    Jonathan Travis avatar
    20 posts
    Member since:
    Dec 2013

    Posted 13 Dec 2013 Link to this post

    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.
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 13 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Jonathan Travis
    Jonathan Travis avatar
    20 posts
    Member since:
    Dec 2013

    Posted 16 Dec 2013 Link to this post

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