EasyUI Forum
June 15, 2024, 10:00:51 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Data grid column cannot be made editable  (Read 6862 times)
diptendu
Newbie
*
Posts: 2


View Profile Email
« on: August 05, 2015, 10:41:41 PM »

Hello,

I am trying to make a datagrid column editable using a combobox.
However, the column is not becoming editable. The code is given below.

Thanks.

============================================================
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>The Analytic Platform - Home Page</title>
   <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="themes/icon.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
   
   
</head>
<body>
   
     <script>
      var dataTypeArray = [ {typeValue:'1',typeName:'INTEGER'},
                            {typeValue:'2',typeName:'STRING'},
                            {typeValue:'3',typeName:'NUMERIC'},
                            {typeValue:'4',typeName:'DATE'}
                          ];
    </script>
   
   <table class="easyui-datagrid" title="Excel File Column Information">
      <thead>
         <tr>
            <th data-options="field:'a'">Column Number</th>
            <th data-options="field:'b'">Column Name</th>
            <th data-options="field:'c',
                     editor:{
                                     type:'combobox',
                                     options:{
                                            valueField:'typeValue',
                                            textField:'typeName',
                                            data:dataTypeArray,
                                            required:true,
                                            editable:false
                                        }
                  }">Data Type</th>
            <th data-options="field:'d'">Variable Type</th>
            <th data-options="field:'e'">No. of Rows</th>
         </tr>
      </thead>
      <tbody>
               <tr>
                     <td>1</td><td>Col1</td><td>STRING</td><td>TODO</td><td>15</td>
               </tr>
           </tbody>
       </table>
   
</body>
</html>
Logged
jarry
Administrator
Hero Member
*****
Posts: 2265


View Profile Email
« Reply #1 on: August 06, 2015, 03:29:39 AM »

Please call 'beginEdit' method to edit a row.
Logged
diptendu
Newbie
*
Posts: 2


View Profile Email
« Reply #2 on: August 06, 2015, 05:48:22 AM »

Hello,

I have added modified the page by adding a data-options for the 'onClickRow' event but still
not able to edit the row.

<table class="easyui-datagrid" data-options="onClickRow: function(indexRow){beginEdit(indexRow)}" "title="Excel File Column Information">
      <thead>
                  ......
Logged
jarry
Administrator
Hero Member
*****
Posts: 2265


View Profile Email
« Reply #3 on: August 06, 2015, 06:00:01 AM »

You used a wrong call. Please try this:
Code:
onClickRow: function(index, row){
$(this).datagrid('beginEdit', index);
}
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!