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
Calender in string type column


I want to open datepicker calender on click of string datatype column. I am using row editing. 

I have set editor type to datepicker for string datatype column but it's not working. 

Parents Reply Children
  • 17550
    Offline posted in reply to Kashinath Raut

    Hello Kasinath,

    I am glad that you managed to create the custom editor provider.

    By design we provide startEditTriggers option which specifies how end-users are able to start edit mode. Possible values are: "click", "dbclick", "F2", "enter" and their combinations separated by comma array. The keyboard triggers have effect only if the grid cells can receive focus or Selection is enabled. 

    In regards to when the calendar will be closed this depends on your custom implementation and how you are handling the events of the you custom editor provider.

    Having validator for your custom editor provider can be achieved by creating one when creating the editor provider. This can happen in the definition for validation public method. There you could set the text for the error message via the errorMessage option of the igValidator. In order to bind the validator with your editor you should set its selector option to the id of the editor`s element.

        // validate the editor
        validator: function () {
    		if (!$("#customValidator").data("igValidator")) {
    				fields: [{
    					notificationOptions: {
    						direction: "right",
    						showIcon: "true",
    						messages: {
    							error: "This field is required!"
    					required: true,
    					selector: "#customEditor",
    					valueRange: [2],
    					onblur: true,
    					errorMessage: "Should contain only numbers",
    					custom: function (value, fieldOptions) {
    						var myRegEx = /^[0-9]+$/;
    						var isValid = myRegEx.test(value);
    						return isValid;
            return $("#customValidator").data("igValidator");

    Please keep in mind that the element used for your validator should be wrapped in a container. For example, in my sample I am using <input> element for the custom editor provided and I have wrapped it in a div element to act as a container.

    $.ig.MyEditorProviderNumber = $.ig.EditorProviderNumber || $.ig.EditorProvider.extend({
        // initialize the editor
        createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {
            element = element || $('<div id="editorContainer"><input id="customEditor"  /></div>');
            // call parent createEditor
            this._super(callbacks, key, editorOptions, tabIndex, format, element);
            element.find("#customEditor").on("keydown", $.proxy(this.keyDown, this));
            element.find("#customEditor").on("change", $.proxy(this.change, this));
            this.editor = {};
            this.editor.element = element;
                return element;

    Attached you will find my sample for your reference. For the "Age" column I am checking whether only digits are entered and I am setting a custom error message if there are anything else entered and the user tries to exit edit mode.

    Please test it on your side and let me knw if you have any additional questions afterwards.