Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Javier Onielfa
65
Condition when adding/editing row
posted

Hello,

I have the following situation:

I have a grid with two DateTime columns (startDate and endDate), when adding/editing I would like to disable the Done button if the startDate is after the endDate. Something like (pseudocode):

if (endDate >startDate) doneButton.disable()

Is this possible? What is the preferred way to check condition about several columns. I am writing all my code in C# over MVC.net.

Thanks in advance

Parents
  • 17590
    Offline posted

    Hello Javier,

    Thank you for posting in our community.

    I believe Validation is what will help you achieve your requirement. This is a way to validate your data against certain rules that meet your requirement. Validation is implemented using igValidator control in igGrid. The main purpose of this control is to inform the end user for the passed and failed validation immediately by default. This means that when user blur the editor`s input a feedback message is immediately displayed giving useful information about the state in which editor is in. When using igGrid validator options could be set by Updating behavior`s column settings. 

     A working sample that demonstrates validation could be found at the following link:

    http://www.igniteui.com/grid/basic-editing

    In this sample ID, CustomerID, Order Date and Ship Address columns have validation applied- ID is read only column, Order Date and CustomerID are set to be required and the text in Ship Address should be longer that 4 symbols. This is achieved as following:

    

    .Features(feature =>
            {
                feature.Updating().ColumnSettings(cs => {
                    cs.ColumnSetting().ColumnKey("OrderID").ReadOnly(true);
                    cs.ColumnSetting().ColumnKey("OrderDate").EditorType(ColumnEditorType.DatePicker).Required(true);
                    cs.ColumnSetting().ColumnKey("CustomerID").EditorType(ColumnEditorType.Combo).Required(true).ComboEditorOptions(co => co.DataSource(ViewBag.Customers).ValueKey("ID").TextKey("CompanyName").Mode(ComboMode.DropDown).EnableClearButton(false));
                    cs.ColumnSetting().ColumnKey("ShipAddress").Required(true).TextEditorOptions(o => o.ValidatorOptions(vo => vo.LengthRange(4)));
                    cs.ColumnSetting().ColumnKey("TotalItems").Required(true);
                    cs.ColumnSetting().ColumnKey("TotalPrice").Required(true).EditorType(ColumnEditorType.Currency);
                });
                feature.Sorting();
            })

    When you enter edit mode any try to violate any of the rules set by the validation an error message appears and explains what needs to be done. Unless validation rules are not met Done button is not enabled.

    In your particular scenario a custom validation rule needs to be created and applied. This is achieved by the custom option of the igValidator. It gets/sets a custom function to perform validation with. For example:

    

    //Initialize
    $('.selector').igValidator({
      custom: function(value, fieldOptions){
              return false;
      }
    });
     
    //Get
    var custom = $(".selector").igValidator("option", "custom");
     
    //Set
    var custom = { 
          method: function (value, fieldOptions) {
              return false;
          }, 
          errorMessage: "This field is required."
      };
     
    $(".selector").igValidator("option", "custom", custom);

    In your case a function that compares the two dates should be crated and applied. Also you could customize the error message to show your customers what is preventing them from adding the new row(or updating existing).

    Please let me know if you need any further assistance with this matter.

Reply Children