Comparing dates in two columns within a row in Kendo UI Grid

I have a specific situation with my kendo UI Grid, where I am working with two columns - StartDate and EndDate. During inline editing, it is essential for me to ensure that the StartDate is not greater than the EndDate. I have implemented custom validation logic for the StartDate Field, but I am encountering an issue where the variable StartDate is being assigned a null value.

model: {
                id: "BusinessAreaDivisionMappingId",
                fields: {
                    BusinessAreaDivisionMappingId: { type: "number", editable: false, nullable: false },

                    StartDate: {
                        from: "BusinessAreaDivisionMappingEntity.StartDate", type: "date",
                        validation:
                            {
                                required: true,
                                dateComparisonValidation: function (input) {
                                    debugger;
                                    if (input && (input.attr("name") == "StartDate"|| input.attr("name") == "EndDate")) {
                                        input.attr("data-dateComparisonValidation-msg", "Start Date cannot be more than End Date");
                                        var startDate = input.closest(".k-edit-form-container").find("[name='StartDate']").data("kendoDatePicker");
                                        var endDate = input.closest(".k-edit-form-container").find("[name='EndDate']").data("kendoDatePicker");
                                        if (Date(startDate) > Date(endDate)) {
                                            return false;
                                        }
                                    }
                                    return true;
                                }
                            }
                    },
                    EndDate: { from: "BusinessAreaDivisionMappingEntity.EndDate", type: "date" }
                }
            }

Answer №1

UPDATE

An example that is fully functional can be found at this link:


In terms of user experience, it is preferable not to allow invalid values to be selected rather than having to reselect valid ones after being notified of their invalidity.

If you agree with this approach, consider adding a custom editor for columns containing dates:

var dateEditor = function (container, options) {
var input = $('<input />');

input.appendTo(container)
  .kendoDatePicker({
    format: "dd.MM.yyyy"
  });
var datePicker = input.data("kendoDatePicker");
  switch (options.field) {
    case "startDate":
      if (options.model.finishDate) {
        datePicker.max(options.model.finishDate);
      }
      break;

    case "finishDate":
      if (options.model.startDate) {
        datePicker.min(options.model.startDate);
      }
      break;
  }
};

Learn more about custom editors here.

If you encounter difficulties in implementing custom editors for inline editing, refer to this article for guidance:

Kendo Grid using inline editing and custom editor dropdown control

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Angular: Looping through an Array of Objects

How can I extract and display values from a JSON object in a loop without using the keyValue pipe? Specifically, I am trying to access the "student2" data and display the name associated with it. Any suggestions on how to achieve this? Thank you for any h ...

GeoJson with timestamp and marked directional indicator

I am looking to create an animation of a boat traveling along a specific route. Currently, I am able to display the route as a line and the boat as a circle using TimestampedGeoJson: # circle with following line features = [ { 'type': ...

Using React PropTypes with Auth0

How can Auth0 be integrated with React PropTypes? index.js import App from '../components/App'; import WelcomeRoute from './Welcome'; import SettingsRoute from './Settings'; import CampaignRoute from './Campaign'; ...

Center the span in CSS by setting its position to absolute

I am trying to create a span element positioned as absolute inside a div. The div has top and left values set. When the user inputs text, the span expands with the given text towards the right to contain it. However, I would like it to grow symmetrically o ...

Utilizing JFlex for efficient brace matching

Currently, I am in the process of developing an IntelliJ plugin. One of the key features that I am working on is a brace matcher. After completing the JetBrains plugin tutorial, I was able to get the brace matcher functioning using this regular expression ...

Issue: The 'loopback' module is not found in the NodeJS environment

I can't seem to solve the issue I'm experiencing. Error: Module 'loopback' not found These are the dependencies listed in my package.json file: "loopback": "^3.19.0", "loopback-boot": "^2.6.5", "loopback-component-explorer": "^6.0. ...

What is the best way to automatically clear an input field after a specified delay?

On my landing page, I have a single input field where users can enter their email address. Upon successful entry... success: function(result){ console.log(result.status); if(result.status == true) { $('input').attr("style", "color:green" ...

Using Router.back in Next.js triggers a complete page refresh

I am working on a page called pages/conversations/[id].tsx, and here is the code: import Router, { useRouter } from 'next/router' export default function ConversationPage() { const router = useRouter() ... return ( <View ...

JavaScript does not function properly when interacting with the result of a POST request made through $.ajax

Question: After including jQuery files and functions in index.php, do I also need to include them in select.php? To clarify my issue, here is the problem I am facing: Initially, I am trying to send data to select.php using jQuery's $.ajax. The data ...

Creating an onchange event in CodeIgniter for dynamically generated select boxes within a view script

As a beginner with codeigniter, I am seeking some assistance. Within my controller, I retrieve data for both options and suboptions, then load the respective view using the code below. The view essentially generates a table consisting of select boxes passe ...

Bootstrap: Navbar links do not receive active class in the scroll on time

I am utilizing Bootstrap 4. After implementing a smooth scroll feature, I had to adjust it by 80px due to my fixed navbar at the top. $('#navbar').find('a').click(function (event) { event.preventDefault(); var $anchor ...

Solving an object in ui-router state using ui-sref

Dealing with a large JSON object in an Angular controller and wanting to pass it to the controller of a template that will be displayed in a ui-view. I am aware that parameters can be passed to states using ui-sref, but I do not want this object to be visi ...

React App folders are not being properly installed through NPX

Encountering an error message while attempting to use npx create-react-app Husna@LAPTOP-LPCC954R MINGW64 ~/Desktop/React GitHib Project (master) $ npx create-react-app github2020 Creating a new React app in C:\Users\Husna\Desktop\Reac ...

Creating a unique 'full height' feature for the Material UI Dialog modal component

I'm encountering an issue with the fullScreen property on the Material UI Dialog component, which is being used as a modal. Following the documentation's recommendation, my code looks like this: import useMediaQuery from '@material-ui/core/u ...

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

Issue with Angular2: The [routerLinkActive] directive does not update when using _router.navigate

My app includes several routerLinks that I have styled using [routerLinkActive]="['active']". Everything works perfectly when I click on one of the routerLinks to navigate. However, when I try to navigate using: this._router.navigate( [ thisUrl ...

What are the best ways to utilize the Node.js Express compress middleware efficiently?

Rather than relying on widespread availability of white-space-collapse: discard; in CSS, I am seeking to use middleware to trim all whitespace between HTML tags and condense any other whitespace to a single space. Despite being open to a simplistic approac ...

I am looking to extract a specific value from my JSON file

I need to extract specific values from a JSON file. For example, if the JSON file contains id, name, and lastname, I am interested in extracting the id value. fs.readFile("user.json", function (err, data) { if (err) throw err; console.log(data. ...

Retrieving values with Jquery on a function's onClick event

Here is a small script that retrieves values from a select element <script> jQuery(document).ready(function() { var selectedValue = jQuery("#tr_val").val(); }); </script> When you click on this div and execute the open_win function, I need t ...

Exploring Facebook Graph API response with Angular 2 Mapping

I am using HTTP calls to access the Graph API in order to retrieve posts from a Facebook page. Here is the code snippet that fetches an array of posts: let url = 'https://graph.facebook.com/15087023444/posts?fields=likes.limit(0).summary(true),comme ...