使用同步融合网格在对话框中编辑记录时不显示时间选择器

Question

我正在使用 syncfusion 网格来显示休假记录。有字段 - 出勤日期，修改时间，修改时间，主题，记录正规化的原因。我已经为出勤日期指定了数据类型 e-editType="datepicker"，它在记录编辑和显示时工作正常。但是，对于修改时间和修改时间，我指定了 e-editType="timepicker" 并且它不会在记录编辑时呈现时间选择器。我正在使用 angularjs。这是我的代码，

正则化.html

<div ng-controller="regularization_controller">
    <div>
        <h2>Regularisation Details

    </div>
    <div>

        <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-columns="columns" e-allowpaging="true" e-editsettings-enablerowhover="true" e-editsettings-allowadding="true" e-editsettings-allowediting="true" e-editsettings-rowposition="bottom"
         e-editsettings-allowdeleting="true" e-editsettings-allowresizing="true" e-editsettings-showconfirmdialog="false" e-editsettings-editmode="mode"


         e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" e-locale="es-ES">

            <div e-columns>
                <div e-column e-field="sr" e-headertext="Sr.No." e-width="60px" e-isprimarykey="true" e-textalign="left"></div>
                <div e-column e-field="attendance_date" e-width="160px" e-editType="datepicker" e-headertext="Attendance Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}"></div>

                <div e-column e-field="modified_in_time" e-width="150px" e-editType="datetimepicker" e-format="{0:dd-MMM-yyyy hh:mm tt}" e-headertext="Modified In Time" e-textalign="center"></div>
                <div e-column e-field="modified_out_time" e-width="150px" e-editType="datetimepicker" e-format="{0:dd-MMM-yyyy hh:mm tt}" e-headertext="Modified Out Time" e-textalign="center"></div>



                <div e-column e-field="subject" e-width="120px" e-headertext="Subject" textalign="left"></div>

                <div e-column e-field="reason" e-width="120px" e-headertext="Reason" textalign="left"></div>

                <div e-column e-field="status" e-headertext="Status" e-width="100px"  e-edittype="dropdownedit" e-datasource="regularize_status" e-textalign="center"></div>
            </div>
        </div>
    </div>

</div>

regularization_controller.js

app.controller('regularization_controller', function ($scope,$modal) {


 $scope.data = [{ "sr": "1", "attendance_date": "25-Feb-2015", "modified_in_time": "25-Feb-2015 09:00 AM", "modified_out_time": "25-Feb-2015 09:00 PM", "subject": "xyz", "reason": "abc", "status": "Applied" }, { "sr": "2", "attendance_date": "26-Feb-2015", "modified_in_time": "25-Feb-2015 09:00 AM", "modified_out_time": "25-Feb-2015 09:00 AM", "subject": "xyz", "reason": "abc", "status": "Applied" }];


 $scope.mode = ej.Grid.EditMode.Dialog;

    $scope.tools = [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel];

    $scope.regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

});

我哪里错了？有什么解决办法。请帮忙。 谢谢。

Answer 1

Syncfusion Grid 的列具有以下默认 editType。

• 下拉菜单
• 日期选择器
• 日期时间选择器
• 数字
• 字符串

您可以使用dialogtemplate 功能来包含自定义控件。

演示： http://js.syncfusion.com/demos/web/#!/azure/grid/Editing/Dialogonlocaldata

[更新]

<div id="Grid" ej-grid
       e-datasource="data" 
       e-editsettings-editmode="dialogtemplate" 
       e-editsettings-dialogeditortemplateid="#template"
       e-actioncomplete="onComplete">
    <div e-columns>
        <div e-column e-field="Hours"></div>
     </div e-columns>
</div>

模板

<script type="text/x-jsrender" id="template">
    <table>
       <tr>
          <td>
           <input type="text" name="Hours" value:{{:Hours}}/>   
          </td>
       </tr>
     </table>
</script>

事件[JS]

<script>
   function onComplete(args){
      if(args.requestType == "beginedit"||args.requestType == "add"){
          $("#GridHours").ejTimepicker({ value: args.data["Hours"] });
      }
   }
</script>

@注意： 使用对话框模板时，edittype 属性不会对设置编辑器控件产生任何影响，用户需自行负责在模板中提供它们并将它们呈现为控制在actioncomplete event

有关如何使用对话框模板，请参阅上面的演示。