Question

我正在使用syncfusion网格来显示请假记录。有字段 - 出勤日期，修改时间，修改时间，主题，记录正规化的原因。我指定了数据类型，e-editType =＆＃34; datepicker＆＃34;对于出勤日期，它在记录编辑和显示时正常工作。但是，为了及时修改和修改时间，我已经指定了e-editType =＆＃34; timepicker＆＃34;并且它不会在记录编辑时渲染时间戳。我正在使用angularjs.Here是我的代码，

regularization.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网格对列具有以下默认editType。

下拉
的DatePicker
的DateTimePicker
数字
字符串

您可以使用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
中的对照

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

使用syncfusion网格在对话框中编辑记录时不显示时间戳

1 个答案: