I am facing a problem regarding in edit mode or in add mode in an infragistic grid. During these modes, I want that there will be one column which will be a date type. During editing or adding, I want that after clicking in the dropdown of that date column, a datepicker will be displayed from where we can set a date. 

Following is the Code sample:

@{
var ID = Guid.NewGuid().ToString("N");
var typeGridID = String.Format("{0}-Allergies", ID);
var statusGridID = String.Format("{0}-StatusChanges", ID);
}
<script type="text/javascript" src="~/Scripts/allergyallergen.js"></script>
@*<script src="@Url.Content("~/Scripts/infragistics/infragistics.loader.js")"></script>*@

@(Html.Infragistics().Loader()
.SetDefaultPaths()
.Resources("igGrid,igShared,igCombo, igGrid.Paging.Sorting, igGrid.Updating")
.Render()

)@*@Html.HiddenFor(m=>m.TitleDataWhenMinimized == "")*@
<script type="text/javascript">
var products = [];
var categories = [];
$.ig.loader(function () {
initializeCombosDataSource();
$(document).delegate("#@typeGridID", "iggridrendered", function (evt, ui) {
//bindComboSelectionChanged();
});
});

function bindComboSelectionChanged() {
var updating = $("#@typeGridID").data("igGridUpdating");
var editor = updating.editorForKey("ProductID");
if (editor) {
$(document).delegate("#comboProductID", "igcomboselectionchanged", comboSelectionChanged);
}
else {
var colSettings = updating.options.columnSettings;
colSettings[2].editorOptions.selectionChanged = comboSelectionChanged;
}
}
function comboSelectionChanged(evt, ui) {
var items = ui.items || [];
if (items.length === 1) {
var item = items[0];
var editor = $("#@typeGridID").igGridUpdating("editorForKey", "Price");
$(editor).igEditor("value", products[item.index].Price);
}
}

function initializeCombosDataSource() {
var category, product;
for (var i = 0; i < categoriesWithProducts.d.length; i++) {
category = categoriesWithProducts.d[i];
for (var j = 0; j < category.Products.length; j++) {
product = category.Products[j];
products[product.ID] = product;
products[product.ID]["CategoryID"] = category.ID;
}
categories[category.ID] = category;
}
}

function lookupCategory(id) {
return categories[id].Name;
}

function lookupProduct(id) {
return products[id].Name;
}

function calculateCategoryId(row) {
return products[row.ProductID].CategoryID;
}
</script>

@*@Html.Infragistics().Loader().Resources("igCombo").SetDefaultPaths().Render()*@
<div id="@ID">
<form data-form-type="PatientAllergies" id="frmAllergies">
<div class="candhistory-container bannerExtension">
<div class="trHistoryGrid">
<div class="grid-holder edit-ig-grid" style="position: relative;">
@*<div style="position: absolute; left: 1185px; top: 10px;">
<span class="cnd-toggler show" id="containerExpand" />
</div>
<img src="~/Images/elbowNew.gif" class="elbowClass" style="display: none;" />*@
@( Html.Infragistics().Grid<MSA.EDITWebUI.Areas.Patient.Models.Allergies.AllergiesViewModel>(Model.Allergies.AsQueryable())
.ID(typeGridID)
.PrimaryKey("PatientAllergyID")
.RenderCheckboxes(true)
.AutoGenerateColumns(false)

.Columns(column =>
{
//column.For(x => x.AllergyType).Formula("calculateCategoryId").FormatterFunction("lookupCategory").HeaderText("Allergen");
//column.Unbound("CategoryID").Formula("calculateCategoryId").FormatterFunction("lookupCategory").HeaderText("Type");
//column.For(x => x.ProductID).FormatterFunction("lookupProduct").HeaderText("Allergen");

column.For(x => x.AllergyType).FormatterFunction("lookupCategory").HeaderText("Type");
column.For(x => x.Allergen).FormatterFunction("lookupProduct").HeaderText("Allergen");
column.For(x => x.Reaction).DataType("string").HeaderText("Reaction");
column.For(x => x.Severity).DataType("string").HeaderText("Severity");
column.For(x => x.IDDate).Format("dd-MMM-yyyy").HeaderText("ID Date");
column.For(x => x.Comment).DataType("string").HeaderText("Comment");
column.For(x => x.PersonID).DataType("number").Hidden(true);
column.For(x => x.ExternalFileId).DataType("number").Hidden(true);
column.For(x => x.PatientAllergyID).DataType("number").Hidden(true);

})
.Features(features =>
{
//features.Selection().Mode(SelectionMode.Row);
features.Sorting().Type(OpType.Local);

features.Paging()
.PageSize(10)
.ShowPageSizeDropDown(false)
.Type(OpType.Remote);

features.Updating()
.EnableDataDirtyException(false)
.EditMode(GridEditMode.Row)
.StartEditTriggers(GridStartEditTriggers.DblClick)
.DoneLabel("Done")
.AddRowLabel("Add Another Allergy")
.EnableAddRow(true)
.EnableDeleteRow(true)
.ColumnSettings(settings =>
{
settings.ColumnSetting().ColumnKey("AllergyType").Required(true).EditorType(ColumnEditorType.Combo).EditorOptions("id: 'comboCategoryID', dataSource: categories, textKey: 'Name', valueKey: 'ID'");
settings.ColumnSetting().ColumnKey("Allergen").Required(true).EditorType(ColumnEditorType.Combo).EditorOptions("id: 'comboProductID', dataSource: products, parentCombo: 'comboCategoryID', parentComboKey: 'CategoryID', textKey: 'Name', valueKey: 'ID'");

settings.ColumnSetting().ColumnKey("Reaction").EditorType(ColumnEditorType.Text);
settings.ColumnSetting().ColumnKey("Severity").EditorType(ColumnEditorType.Combo).ComboEditorOptions(options =>
{
options.Mode(ComboMode.DropDown);
options.DataSource(Enum.GetNames(typeof(MSA.EDITWeb.Data.Model.Entities.EnumAllergiesSeverity)).Cast<String>().ToList().AsQueryable().OrderBy(x => x.ToString()));
});
//settings.ColumnSetting().ColumnKey("IDDate").EditorType(ColumnEditorType.Text);
//DatePicker null error
settings.ColumnSetting().ColumnKey("IDDate").EditorType(ColumnEditorType.Date);//.EditorOptions("minDate: new Date(1, 1, 1980), minValue: new Date(1, 1, 1980), maxValue: new Date(), required: true");
settings.ColumnSetting().ColumnKey("Comment").EditorType(ColumnEditorType.Text);
});
})
.ClientDataSourceType(ClientDataSourceType.JSON)
.AutoCommit(false)
.AutoGenerateColumns(false)
.LocalSchemaTransform(true)

.DataBind()
.Render()
)
</div>

</div>
<div class="right-button-row">
<button type="button" data-action="content-section-cancel" class="btn btn-inverse">Cancel</button>
<button type="button" data-action="save-allergies" class="btn btn-primary">Save</button>
</div>
<div id="TotalAllergen" style="visibility: hidden;">@Model.TotalAllergens</div>
<div id="DrugAllergen" style="visibility: hidden;">@Model.CalcDrugAllergens</div>
</div>

<link href="~/Content/Styles/Patient.css" rel="stylesheet" />
<style>
#AllergiesID > thead > tr > th > span
{
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal!important;
}

#AllergiesID > tbody > tr > td
{
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal!important;
}
</style>

</form>
</div>

<script type="text/javascript">

$(function () {

var modal = bootstrapModalDialog();
var data = {
DeletedIDs: []
};

$(document).on('iggridupdatingrowadded', '#@typeGridID', function (evt, ui) {
ui.values.PatientAllergyID = 0;
});

$(document).on('iggridupdatingeditcellstarting', '#@typeGridID', function (evt, ui) {
switch (ui.columnKey) {
case "AllergyType":

if (ui.rowAdding == true)
ui.value = '4';
break;

case "Allergen":

if (ui.rowAdding == true)
ui.value = '21';
break;
case "Severity":

if (ui.rowAdding == true)
ui.value = 'Null';
break;
}
});

// dialogue to confirm deletion
$(document).on('iggridupdatingrowdeleting', '#@typeGridID', function (evt, ui) {
var record = ui.owner.grid.findRecordByKey(ui.rowID);
modal.callbackCustomDialogue(
'Delete Allergy',
'Do you want to delete this allergy record?',
['Delete', 'Keep'],
function (value) {
switch (value) {
case 'Delete':
ui.owner.deleteRow(ui.rowID);
data.DeletedIDs.push(ui.rowID);
return;
case 'Keep':
default:
return;
}
}
);

// cancel default propagation
return false;
});

var popAlertThingy = new bootstrapAlert(),
modal = bootstrapModalDialog(),
$section = $('#@ID'),
$deleteBtn = $('#@ID').closest('.content-section-main').find('.section-button[data-title=delete]');

// save Allergies
var saveAllergies = function () {
var form = $('#@ID').find('form[data-form-type=PatientAllergies]'),
typeGrid = ($('#@typeGridID').data() || {}).igGrid,
model = form.toObject();

if (form.valid()) {
if (typeGrid) {
//debugger;
//move changes from UI to data source
typeGrid.commit();
//collect data from data source
data.Allergies = typeGrid.dataSource._data;
//model.Allergies = typeGrid.dataSource._data;
}

$.ajax('@Model.SaveUrl', {
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(data),
success: function (response) {
if (response.Success) {
//$('.render-banner-here').trigger('RefreshBannerContent', ["true"]);
popAlertThingy.showSuccess(response.Message);
//Clear change tracking
//$(document).SetGlobalValues(false);
//TODO: make this easier
$section.find('[data-action="content-section-cancel"]').first().click();
} else {
popAlertThingy.showError(response.Message);
}
}
});
} else {

}
};

// event handlers
$('[data-action="save-allergies"]').click(saveAllergies);
});
</script>