Telerik Forums
UI for ASP.NET MVC Forum
4 answers
2.7K+ views

Hi Team,

I am using the Kendo DateTimePicker and validator to validate the dates. Please find the below code. The issue I am having is that I see the "error message" for all the fields even thought rules returns true for those field. For example, I see the error message for the fields that have return value "false" which is fine. However, after running the validator, once I click on each field, I see the error message for that field. Even though these field have return value "true" from the function I have attached. I do not understand why I see the error message for all the fields. 

1) What I want is I have two conditions in the function (if, else if). If these conditions get true, I want to display the error message. Otherwise, no error message needs to display because those dates are valid.

2) Is there a way to clear/reset the error message if there is any for a specific date field.

I really appreciate your help team. Please get back to me as soon as you can, I am waiting for your relpy.

function executeMaxMinValidationOnEachDate(datesArray) {

    //$("#validateEditableFields").kendoValidator({
    var minDate = 0;
    var maxDate = 2;
    var validator = $("#validateEditableFields").kendoValidator({
        rules: {
            datepicker: function (input) {
                var currDate = kendo.parseDate(input.val()).getTime();
                if (maxDate === 10) {
                    if (input.is("[data-role=datetimepicker]") && currDate < datesArray[minDate]) {
                        return false;
                    }
                }
                else if (input.is("[data-role=datetimepicker]") &&
                    (currDate < datesArray[minDate] || currDate > datesArray[maxDate])) {
                    minDate++;
                    currentDate++;
                    maxDate++;
                    return false;
                    //return input.data("kendoDateTimePicker").value();
                } else {
                    minDate++;
                    currentDate++;
                    maxDate++;
                    return true;
                }
            }
        },
        messages: {
            datepicker: "Please enter valid date!$$$$"
        }
    }).data("kendoValidator");
    validator.validate();
}


Mayurbhai
Top achievements
Rank 1
Veteran
 answered on 01 Apr 2021
5 answers
1.2K+ views

The Boostrap grid system gives wrong result in a Window.
The grid seems to have only 9 columns.

My View :

@(Html.Kendo().Window()
    .Name("window")
    .Title("My window")
    .Width(400)
    .Content(@<text>
    <div class="row">
      <div class="col-md-3">
        First col
      </div>
      <div class="col-md-3">
        Second col
      </div>
      <div class="col-md-3">
        Third col
      </div>
      <div class="col-md-3">
        Fourth col
      </div>
    </div>
    </text>)
)

The result is shown in the png file.

Any suggestions will be very appreciated.

Neli
Telerik team
 answered on 31 Mar 2021
3 answers
579 views

 @(Html.Kendo().TreeView()
                .Name("treeviewDetails")
                .Items(treeview =>
                {
                    treeview.Add().Text("Information")
                        .Expanded(true)
                        .Items(root =>
                        {
                            root.Add().Text("Priority" + ": " + InOnwHours);
                            root.Add().Text("Due Date" + ": " + "Today");
                            root.Add().Text("Return emails" + ": " + "example@gmail.com");
                        });

}     

 

How i can format the part of text in  root.Add().Text text ?  i need show the text after ":"  in different color, style and size. (for example example@gmail.com  in red) see attached image.

 

Thank you for help.

Dimitar
Telerik team
 answered on 31 Mar 2021
3 answers
425 views
In my Grid, using a custom PopUp editor, when adding a new record, if the user Presses Cancel, the PopUp closes appropriately but there is a blank record left at the top of my grid.  How do I prevent this from happening? I imagine I have to refresh the dataSource, but from where?  
Anton Mironov
Telerik team
 answered on 30 Mar 2021
1 answer
381 views

Is there a way to have only icons in the commands of the tree list like there is for Grid?

I manage to do this for Edit, Delete and CreateChild. But I can not do this for Update and Cancel buttons

Mihaela
Telerik team
 answered on 30 Mar 2021
7 answers
2.5K+ views

Hi Team,

 

I am using the Telerik DateTimePicker ASP.NET MVC, and I noticed that after clicking onto the calendar, once I navigate to "Time" tab of the calendar, "Hour" and "Minutes" are not aligned properly. The higher "Minute" I select does not align in the center. For example, if I select "minute" 10, then it would stay in the center of the minute column. However, if I select 58 minute, then it would not be in center of the minute column. 

Please find the attached screenshot to review the issue I am having, and please get back to me as soon as you can.

I am looking forward to hearing back from you.

 

Best,

Mayur Maisuria

Mayurbhai
Top achievements
Rank 1
Veteran
 answered on 30 Mar 2021
1 answer
305 views

Hi Team,

I am using the DateTimePicker and below is the code. 

@(Html.Kendo()
                        .DateTimePicker()
                        .ComponentType("modern")
                        .Name("dpLTSummaryCompletionDate")
                        .HtmlAttributes(new { style = "width: 185px;"} )
                        .Events(e => e.Change("dpLTSummaryCompletionDate_change"))
                        .Value(Model.CompletionDtTm)
                        .Format("MM/dd/yyyy h:mm:ss tt")
                        .ParseFormats(new string[] { "MM/dd/yyyy h:mm:ss tt" })
                        .DateInput(true)
                        .Max(Model.TakenDtTm.AddYears(1))
                        .Min(Model.OnsiteDtTm))

 

//In the Jquery file

$(document).on('keydown keyup', '#dpLTSummaryCompletionDate ', function () {

    let dateTimePicker = $("#dpLTSummaryCompletionDate").data("kendoDateTimePicker");
    let dateInput = dateTimePicker._dateInput;

    let input = dateInput.value().getTime();
    let min = dateTimePicker.min().getTime();
    let max = dateTimePicker.max().getTime();

    if (input < min || input > max) {
        dateInput.value(null);
    }
});

I have the "keydown keyup" event in the .js file. It seems like the ".getTime()" value for the first time I enter the date by keyboard into the date field is not the same as I get it from the second time and onwards. 

For example, I have set up the Min and Max date, and I want to allow a user to enter any date between and including Min and Max dates. However, right now for the first time I enter the date, it allows only Min but not Max since ".getTime()" values for the Max date and user input (assuming user enters the max date) are not the same. As a result, the below condition gets true and date field gets null/empty. 

NOTE - It allows me to enter the max date from the second time and onwards, but not the first time because ".getTime()" values are the different for the "Max()" date and the date I enter even though I enter the same Max date. 

if (input < min || input > max) {
        dateInput.value(null);
    }

Please help me out on this since I am having issue and could not resolve.

 

Best,

Mickey

Georgi Denchev
Telerik team
 answered on 29 Mar 2021
1 answer
546 views

Below is my MultiSelect for a List<long> property of my model. In DataSource Read I am giving a js Function name "userIdFilter"

@(Html.Kendo().MultiSelectFor(m => m.PositionIds)
          .Filter("Contains")
          .Name("PositionIds")
          .Placeholder("Select Position")
          .ValuePrimitive(true)
          .DataTextField("Name")
          .DataValueField("Id")
          .DataSource(d => d.Read(read =>
          {
              read.Action("GetAllPositions","PositionCodeAjax").Data("userIdFilter");
          }).ServerFiltering(true))
          .HtmlAttributes(new { style = "width:95%;" })

this is userIdfilter method in a script tag

<script>
    function userIdFilter() {

          console.log($("#Id").val());

          setTimeout(() => console.log($("#Id").val()), 100);

        return { userId: $("#Id").val() };
    }
</script>

This is the numeric text box that has id="Id". I have applied display:none to its parent element

@(Html.Kendo().NumericTextBoxFor(m => m.Id).Enable(false))

All these snippets lie in a PopupEditView.cshtml which is called when editing/creating and element from the grid in my index.cshtml file

Now When I call Test it with edit command Edit pop up appears and userIdFilter is called. and value "0" is printed. after 100ms value "1182" is printed. Also my actionMethod recieves value 0.

But when I call userIdFilter() from console it logs value 1182 (the correct value) also object { userId: 1182 } is also logged and after 100ms value 1182 is printed.

Also if I happen to inspect the multiselect in the popup before the request with wrong value for dataSource is sent, Kendo makes a second request with correct value and it works as it should

I just cannot understand this strange behaviour and what is going wrong. Need help


Aleksandar
Telerik team
 answered on 29 Mar 2021
1 answer
207 views

Hi Team,

I am using the below attached code for the date field. 

                      @(Html.Kendo()
                        .DateTimePicker()
                        .ComponentType("modern")
                        .Name("dpLTSummaryCompletionDate")
                        .HtmlAttributes(new { style = "width: 185px;"} )
                        .Events(e => e.Change("dpLTSummaryCompletionDate_change"))
                        .Value(Model.CompletionDtTm)
                        .Format("MM/dd/yyyy h:mm:ss tt")
                        .ParseFormats(new string[] { "MM/dd/yyyy h:mm:ss tt" })
                        .DateInput(true)
                        .Max(Model.TakenDtTm.AddDays(365))
                        .Min(Model.OnsiteDtTm))

Since I am using the "DateInput()", I can change the date (Month, Day, Year, etc) from the keyboard (by pressing the arrow key). What I want to do is if I am changing the date and if the date gets prior to MIN date or later to Max date, then I want to display the "placeholder" instead of "date being automatically reset" to either MIN or MAX. For example, let's assume the MIN date is set to "12/12/2012 12:12:12 PM" and as soon as I have the date "12/12/2012 12:12:11 PM" in the date field which is less to MIN date by 1 second (assuming I am changing the date by arrow key), I want to display the placeholder. 

I am not sure how to trigger an event for the keyboard input to the date field (by changing a date by an arrow key)

Please reach out to me as soon as you can since I am working on essential project. 

Tsvetomir
Telerik team
 answered on 29 Mar 2021
2 answers
496 views

I have a grid with Edit mode Popup code like below, this popup is good to add a new record. 

Is there a way I can have 'View Only' Command instead of 'Edit'  to show all data fields of a row in the popup?

I need it is because I need pull out more fields which are not in grid row.

 

 .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ItemEdit").Window(w => w.Title("Edit Item").Width(800)))

Thanks.

Anton Mironov
Telerik team
 answered on 29 Mar 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?