EasyUI Forum

I have a DataGrid with a Datebox field and want to use masked input with the textbox part of the datebox.
I have read the previous example posted below, with a solution posted by stworthy, but cannot work out how to do the same thing within a DataGrid.
-------------------------
Previous Example:

      http://www.jeasyui.com/forum/index.php?topic=532.0 (http://www.jeasyui.com/forum/index.php?topic=532.0)
      
      How to combine datebox with masked input like this:
      http://digitalbush.com/projects/masked-input-plugin/ (http://digitalbush.com/projects/masked-input-plugin/)
      
      User code:
         $('#mydate').datebox({  required:true }).mask("99/99/9999",{placeholder:" "});
      
      Solution from stworthy:
         $('#mydate').datebox({  required:true }).datebox('textbox').mask("99/99/9999",{placeholder:" "});
--------------------------
My Code:

   <table id="tt" class="easyui-datagrid" title="Programme">
   </table>
      
   <script type="text/javascript">
      
      $('#tt').datagrid({
      url:'get_programme.php',
      singleSelect:true,
      method:'get',
      onClickCell: onClickCell,
      selectOnCheck:true,
      checkOnSelect:true,
      columns:[[
      {field:'ID',title:'ID',width:20},
      {field:'eventDate',title:'Date',width:100,editor:'datebox',resizable:true},
      {field:'eventTitle',title:'Event Title',width:300,editor:'text',resizable:true},
      {field:'eventDetail',title:'Event Details',width:500,editor:'textarea',resizable:true},
      {field:'check',checkbox:true}
      ]]
      });
      
   </script>

Can you help me please?
Thanks

When begin editing a row, you need to get the datebox editor and apply 'mask' on it.

Thanks for the prompt help stworthy, but I still have a problem.
I am actually using Cell Editing, and have therefore copied the cellediting example code to use in my application. This code works fine, until I add the masked input code.
Based on your reply to my problem, I have now added two lines of code to the cellediting example code as follows:

$.extend($.fn.datagrid.methods, {
   editCell: function(jq,param){
      return jq.each(function(){
         var opts = $(this).datagrid('options');
         var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
         for(var n=0; n<fields.length; n++){
            var col = $(this).datagrid('getColumnOption', fields[n]);
            col.editor1 = col.editor;
            if (fields[n] != param.field){
               col.editor = null;
            }
         }
         $(this).datagrid('beginEdit', param.index);
         for(var n=0; n<fields.length; n++){
            var col = $(this).datagrid('getColumnOption', fields[n]);
            col.editor = col.editor1;                  
         }               
         var ed = $(this).datagrid('getEditor', {index:param.index, field:'eventDate'});
         $(ed.target).datebox('textbox').mask("99-99-9999",{placeholder:" "});
      });
   }
});

var editIndex = undefined;
function endEditing(){
   if (editIndex == undefined){return true}
   if ($('#tt').datagrid('validateRow', editIndex)){
      $('#tt').datagrid('endEdit', editIndex);
      editIndex = undefined;
      return true;
   } else {
      return false;
   }
}
function onClickCell(index, field){
   if (endEditing()){
      $('#tt').datagrid('selectRow', index)
            .datagrid('editCell', {index:index,field:field});
      editIndex = index;
   }
}

When I now run the app, the mask is correctly applied to the datebox fields. However, when I click into one of the other edditable text fields, that field correctly goes into cell edit mode, but when I then click any other field, the previous field stays in cell edit mode. This then happens repeatably for any fields clicked, so that I end up with many fields all stuck in cell edit mode at the same time. When one field in any row is stuck in cell edit mode, none of the other fields in that same row will respond to a mouse click - the whole row becomes locked.
Note - The datebox fields behave correctly when edited. They do not get stuck in cell edit mode and do not lock the row, it's only the other text fields that get locked when clicked.

What have I done wrong please?
Thanks