Telerik Forums
UI for ASP.NET MVC Forum
0 answers
7 views
Hi 
in my asp.net MVC page i have kendogrid with multiple rows and each row has a datetimepicker. with current modern type component i need to scroll for hours and minutes selection. but we want flat grid for hours ( 0 to 23) and minutes (0 to 59) for selection just like radtelerickdatetime picker in asp.net webforms. is there any template or customization possible for MVC page datetimepicker
Sushma
Top achievements
Rank 1
 asked on 11 Mar 2024
1 answer
10 views

I've been working with the Kendo DatePicker UI component and I really like the masking and validation it provides if a user wants to manually enter a date when DateInput() is applied. However, it also adds segmentation which means a user either needs to click or use arrow keys to move on to edit other parts of the date like month, day or year. If I remove DateInput() there is no more segmentation, but also no validation or masking. Is there a way to keep validation and masking in the date input field without the segmentation and keep the date picker functionality? My other option is to remove .DateInput() along with the messages and manually apply validation and masking, but if there is a solution within the component itself, that would be ideal. Below is what we currently have.

                                                       @(Html.Kendo().DatePicker()
.Format(Model.DateMask)
.Name("DateStart")
.DateInput()
.Messages(m => m.DateInput(d => d.Day("__")))
.Messages(m => m.DateInput(d => d.Month("__")))
.Messages(m => m.DateInput(d => d.Year("____")))
.Culture(UICulture)
.Footer(false)
                          )

Anton Mironov
Telerik team
 answered on 05 Mar 2024
0 answers
22 views

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.

1 answer
16 views
While Telerik UI for jQuery has this option, I couldn't find any examples of how to use it for MVC:

$("#test").kendoDatePicker({
  dateInput: true,
  messages: {
    dateInput: {
      month: "__",
      year: "____",
      day: "__",
    },
  },
});

@(Html.Kendo().DatePicker()

.Name("ProcedureDateEnd")

.DateInput()

///// how to use messages here?

)



Alexander
Telerik team
 answered on 12 Feb 2024
1 answer
55 views

I have a model class given below in MVC. I am trying to set MinDate and MaxDate for the DatePicker

public class YourModel
{
    public DateTime Deadline { get; set; }
    public DateTime MinDate { get; set; }
    public DateTime MaxDate { get; set; }
}
Now I have the code as given, I am trying to replace the existing Mindate and MaxDate with the Model class properties. I am looking for the correct code .

@(Html.Kendo().DatePickerFor(x => x.Deadline)
    .Name("datepicker") // Set the name attribute
    .Format("MM/dd/yyyy")
    .Min(DateTime.Today) // Set the minimum date
    .Max(DateTime.Today.AddMonths(3)) // Set the maximum date (in this example, 3 months from today)
    .HtmlAttributes(new { id = "datepicker" }) // Set the ID attribute
)

Anton Mironov
Telerik team
 answered on 24 Jan 2024
0 answers
40 views

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()
                                        );

Jordan
Top achievements
Rank 1
Iron
 asked on 10 Apr 2023
1 answer
245 views

I've just started a new project and used the latest release of the framework (v2022.3.1109). Unfortunately I've encountered some issues which didn't appear using earlier versions of the framework (pre R1 2022 I believe).

The problems are

  • the datepicker control stretches to 100% of the page, if a width is not set in the html attributes (I can't believe this is the default intended behavior)
  • I cannot reduce the font-size of the datepicker control regardless of where I put the style statement (parent container, html attributes etc..)
  • The same is true for the grid, whereas before font size could be adjusted using the style on the parent div, this no longer works

Is there any documentation detailing the changes from R1 2022 and how to achieve these relatively simple appearance changes?

I'm using bootstrap 5 and the kendo.bootstrap-nordic.min.css  css file.

Thanks

Eyup
Telerik team
 answered on 23 Dec 2022
1 answer
104 views

Hello,

I am Kendo Grid in MVC

The grid is set up for in-cell batch editing. One of the fields is a date field. If the date is selected using date picker the value stays in the cell, whereas if the date value is manually entered the value does not hold in the cell. Any suggestions why the value is not holding in the cell when manually entered.

Thank you

 

Eyup
Telerik team
 answered on 21 Dec 2022
4 answers
13.9K+ views

Hi,

Am getting 'Kendo is not defined' error while using date picker MVC UI control.

Uncaught ReferenceError: kendo is not defined

 

Anubhav
Top achievements
Rank 1
Iron
 updated answer on 24 Nov 2022
1 answer
55 views

Hi ,

We have a validation related requirement on the datepicker control. The datepicker control should not allow alphabets or special chars to be keyed in.  It should allow only numerics, backspace and forward slaces keys for example: 10/10/2022. 

The requirement is to validate it as soon as its keyed in instead of when the control lose focus.

Because datepicker control does not have keydown/key press event, I added a jquery script as below and it works fine but we dont want to repeat the script for all the date pickers controls on different screens across the project. Is there any feature of the control it self that can be used everywhere??

 

Thanks,

Chhavi

Eyup
Telerik team
 answered on 21 Oct 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?