Hi,

I have a Kendo Grid and its first column is a Datetime and Its a Kendo DatePicker.

When the user click on Add new record button then the 1st cell which is a date picker should be auto focus.

Note: When the user click on Add new record button then we are sorting the grid in ascending order so that the new row should appear on the top, which is working fine but the 1st cell of the newly created row a Kendo Date picker in not in focus.

But when the user click on the first cell of the newly created row, then it opens the datepicker to allow user to select a date.

My requirement is when i am clicking the Add new record button then 
1. It should sort in ascending order (Which is working now)

2. The 1st cell of the Kendo Datepicker should auto focus like the above screenshot.

.ToolBar(toolbar =>
{
    toolbar.Create().HtmlAttributes(new { onclick = "SortGridAscending();" });
})

function SortGridAscending(){
       var grid = $("#TLPCurveAllocationsGrid").data("kendoGrid");
    //sort Grid's dataSource
    grid.dataSource.sort({field: "AllocationDate", dir: "asc"});
}

I am using a Kendo.Filter object like the following to filter results in a Kendo Grid:

@(Html.Kendo().Filter<CustomPersonClass>()
     .Name("personFilter")
     .DataSource("peopleDS")
     .ApplyButton(false)
     .Fields(f =>
     {
         f.Add(p => p.LastName).Label("Last Name");
         f.Add(p => p.FirstName).Label("First Name");
         f.Add(p => p.MiddleName).Label("Middle Name");
         f.Add(p => p.StartDate).Label("Start Date").Operators(o => o.Date(d => d.Eq("Is equal to").Gte("Greater than equal").Lte("Less than equal")));
     })
)

 I have helper code to handle the toolbar in my Kendo Grid like the following, :

@helper ToolbarTemplate()
{
    <button class="k-button k-button-solid k-button-solid-base" id="applyFilter"><span class="k-icon k-i-filter"></span>Apply Filter</button>
    <button class="k-button k-button-solid k-button-solid-base" id="clearFilter">Reset</button>
    <button class="k-button k-grid-excel k-button-solid k-button-solid-base"><span class="k-icon k-i-excel"></span>Export to Excel</button>
}

I also have some JavaScript in a function to apply the filter when the Apply Filter button is clicked, as seen here:

$("#applyFilter").click(function (e) {
    //e.preventDefault();
    var myFilter = $("#personFilter").getKendoFilter();
    localStorage["kendo-person-filter-options"] = kendo.stringify(myFilter.getOptions().expression);
    myFilter.applyFilter();
});

The problem I am having is if I enter an invalid Leap Year date (e.g. 2/29/2003, since 2023 didn't have a February 29th), I get no data back; however, if I enter a valid Leap Year (e.g. 2/29/2004), my Kendo Grid will show data.  Is there a way to validate the date that is being entered manually into a DatePicker field used for filtering?  That is, if I use the DatePicker, it will not show me 2/29/2003 as an option, but if I type in 2/29/2003 and click Apply Filter, it doesn't throw any kind of error about 2/29/2003 being invalid.

How can we make sure optional field is not validated?  Also the model is a DateTime? type.

                                    i.Add()
                                        .Field(x=>x.ProductionDate)
                                        .Label(l => l.Text(Extensions.GetPropertyDisplayName<Detail_InfoForm_ViewModel>(x => x.ProductionDate)).Optional(true))
                                        .Editor(e => e.DatePicker()
                                            .HtmlAttributes(new { style = "width: 100%", title = "Production date" })
                                            .DateInput()
                                        );

Hi,

I have the following code using datepicker for a Datetime filed but it is not showing the date icon to show the dropdown of calendar. It just shows the text box.

FYI. I am using datepicker and it works fine. Also, I am using Timepicker which works fine.

Is there any reason why it shows the calendar pop up in one screen and not in other.

 <div class="form-group col-md-6 row rowSmall text-right ">
                    @Html.LabelFor(model => model.XStartDate, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-8 text-left">
                        @*@(Html.Kendo().DatePickerFor(model => model.XStartDate).Value(DateTime.Today).HtmlAttributes(new { style = "width: 150px", title = "datepicker" }))*@
                        @(Html.Kendo().DatePickerFor(model => model.HearingStartDate).HtmlAttributes(new { style = "width: 200px", title = "datepicker" }))
                    </div>

Thanks