We have Grid on form which has 11 columns, the column is of type selection box,t

The idea on the given post seems to be handy for your case. forum.appian.com/.../

Are you sure you have a date picker? Grids dont allow datepicker.

yes sathya we are using date picker field in grid, basically we have requirement to create dynamic task. so we are using date picker field to take start date and due date for the task.

I am interested to find out how you are getting a date picker in a grid. Can you please explain.

Hi sathya we are using following javascript for getting date picker in grid,

dateOnGrid = {
          // verifyDate:
          //
          // @params: element - Form Element -
          //
          // @description: verifies that its next sibling is a link (assumes the
          // picker link)
          //
          verifyDate : function(element) {
                    try {
                              if (element.nextSibling.tagName.toLowerCase() == 'a') {
                                        return true;
                              } else {
                                        return false;
                              }
                    } catch (e) {
                              return false;
                    }
          },
          // attachDate:
          //
          // @params: gridId - formID of grid; gridFieldId - formID of column in grid
          // to attach data box to
          //
          // @description: rewrites cloneable column with data box; also rewrites all
          // existing cells in table if they don't have a box
          //
          attachDate : function(gridId, gridFieldId) {
                    // debugger;
                    // update the cloneable column
                    try {
                              var namespace = window.FormDesigner.runtimeNamespace;
                              var gridDom = window.Build.util.getComponentContainer(gridId,
                                                  namespace);
                              var cloneableTR = $('tr.cloneable', gridDom)[0];
                              var cloneDivs = $('div', cloneableTR);
                              var selectedIdField = $('input[@id*={0}]'.supplant(gridFieldId),
                                                  cloneDivs)[0];
                              dateOnGrid.formatInputField(selectedIdField);
                              // make sure visible "date" fields are updated
                              var textConfig = document.getElementsByName(gridFieldId);
                              var textConfigLen = document.getElementsByName(gridFieldId).length;
                              var i = 0;
                              for (i = 0; i < textConfigLen; i++) {
                                        if (!dateOnGrid.verifyDate(textConfig[i])) {
                                                  dateOnGrid.formatInputField(textConfig[i]);
                                        }
                              }
                    } catch (e) {
                              // alert(e.message);
                    }
          },
          // formatInputField:
          //
          // @params: selectedIdField - ID of column on the grid -
          //
          // @description: attaches a date picker to all fields in the specified
          // column on a grid (should only be used for text fields)
          // also attaches a picker to the cloneable row which is copied everytime you
          // click add an item
          //
          formatInputField : function(selectedIdField) {
                    var image = document.createElement('img');
                    image.setAttribute('alt', 'Select Date');
                    image.setAttribute('src', '/suite/components/toolbar/img/calendar.gif');
                    var functionString = "onclick='dateOnGrid.datePopup();return false;'";
                    var code = "<a href='javascript:void(0)' " + functionString + " >"
                                        + image.outerHTML + "</a>";
                    var newElement = document.createElement('a');
                    // css change only looks good with more than one column - can remove to
                    // change text box size
                    $(selectedIdField).css("width", "30%");
                    // end css update
                    selectedIdField.parentNode.insertBefore(newElement,
                                        selectedIdField.nextSibling);
                    selectedIdField.nextSibling.outerHTML = code;
          },
          // datePopup:
          //
          // @params: none
          //
          // @description: brings up the calendar popup for a date object, tied to a
          // specific cell
          //
          datePopup : function() {
                    // debugger;
                    var target = event.srcElement.parentNode.parentNode
                                        .getElementsByTagName('INPUT')[0];
                    window.asiFormDatePicker = new MDatetime('asiFormDatePicker');
                    asiFormDatePicker.target = target;
                    asiFormDatePicker.display(target.value, event);
                    return false;
          },
          // validateDate:
          //
          // @params: fieldId
          //
          // @description: validate of a field for grid
          //
          validateDate : function(fieldId) {
                    var fieldValues = window.FormAPI.getValue(fieldId).id;
                    var asDateValues = Date.Util.parseValue(fieldValues, 'date');
                    var isStandardValid = Date.Util.validate(asDateValues, 'date');
                    return isStandardValid;
          }
};

ajinkyab, congrats for this really useful JS!!