Print Page - datagrid + editor

Hi all,

I have a datagrid with 2 columns: "Type" and "Description".

I need to modify the editor of the column "Description" depending on the value of the column "Type".
If "Type" == 2 then the editor of "Description" is null.
If "Type" != 2 then the editor of "Description" is "textbox".

I have the following example:
http://195.144.40.170/jeasyui/AAA7/

... and the following two problems:

1) If I double click on the first line the editor of the column "Description" is not itilialized.
   The reason is that the "onChange" event is not started.
   But how to solve this ?

2) Double click in the second line and change the value of the column "Type" to "1"
   Double click in the third line and change the value of the column "Type" to "1"

   Now the second and the third line are both in edit mode.
   How to avoid this ?

Thanks a lot
Miche

Here is the possible ways to solve your problems.

1. Listen to the 'onBeforeEdit' event to initialize the editors.

2. Use the 'saveRow' and 'editRow' methods instead.

Code:

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
   <script type="text/javascript">

      var data = {
         "total": 3, "rows": [
            { "ID": "1", "Type": "1", "Description": "AAA" },
            { "ID": "2", "Type": "2", "Description": "BBB" },
            { "ID": "3", "Type": "3", "Description": "CCC" }
         ]
      }

      $(function () {
         $('#dg').edatagrid({
            onBeforeEdit: function (index, row) {
               var Description = $(this).edatagrid('getColumnOption', 'Description');
               if (row.Type == '2') {
                  Description.editor = null;
               } else {
                  Description.editor = {
                     type: 'textbox'
                  }
               }
            },
            onBeginEdit: function (index, row) {
               var Type = $(this).edatagrid('getEditor', { index: index, field: 'Type' });
               var Description = $(this).edatagrid('getColumnOption', 'Description');

               $(Type.target).combobox({
                  value: row.Type,
                  onChange: function (value) {
                     if (value == '2') {
                        Description.editor = null;
                     } else {
                        Description.editor = {
                           type: 'textbox'
                        }
                     }

                     setTimeout(function () {
                        $('#dg').edatagrid('saveRow', index).edatagrid('editRow', index);
                     }, 0);
                  }
               })
            },
            filterBtnIconCls: 'icon-filter',
            singleSelect: true,
            toolbar: '#tb',
            idField: 'ID',
            data: data,
            columns: [[
               {
                  field: 'Type', title: 'Type', width: 100,
                  editor: {
                     type: 'combobox',
                     options: {
                        editable: false,
                        required: true,
                        valueField: 'value',
                        textField: 'value',
                        data: [
                           { value: '1' },
                           { value: '2' },
                           { value: '3' }
                        ]
                     },
                  }
               },

               { field: 'Description', title: 'Description', width: 200 }
            ]]
         });
      });
   </script>

   <div id="tb" style="height:auto">
      <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
         onclick="javascript:$('#dg').edatagrid('addRow')">Add</a>
      <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" plain="true"
         onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
   </div>

   <div style="margin-left:45px;margin-right:45px;margin-top:20px" border="false" fit="true">
      <table id="dg" border="true">
      </table>
   </div>
   </body>

</html>
<html>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: rezzonico on September 28, 2021, 02:09:03 AM