Datagrid (and Treegrid) work better on a mobile device when the row height is big enough to give a good landing zone for touch. Is there are way to set a minimum row height for rows in a datagrid?

The suggestion works well for bringing up the Context Menu on a long touch on iOS. The problem is that iOS also uses the long touch to trigger a copy-n-paste feature. If it is not disabled, the conflict between the two features make this alternative approach impractical.

To disable the copy-n-paste feature, make sure to add the following properties on the appropriate elements in your CSS.

-webkit-touch-callout: none !important; /* disable targets <a>, <img> */
-webkit-user-select: none !important; /* disable text selection */

I was able to get around this problem by renaming the easy UI Resizable component to Resizable2. Of course, I also had to re-factor the dependencies for the new name. I'm not necessarily recommending this approach, but it has been working successfully in my project. The jQuery plug-ins use their resizable, and easy UI its resizable (albeit renamed) plug-in.

However, I agree with stworthy, unless you have no choice, you are better off picking one library or the other.

Is there an update available that removes this dependency?

A simple solution for a simple problem. Thanks.

When using easy-ui combobox on a select inside a modal dialog, the z-index is not set high enough, causing the dropdown to appear behind the modal dialog. The modal dialog is not easy-ui.

Is there a way to set the z-index by using the onShowPanel option?

   $('#mySelect').combobox({
      onShowPanel: function(){
                           .... something here?
      },
       data:myOptions,
       valueField:'optionValue',
       textField:'optionLabel'
   });

I saw a similar question regarding Message Alert Window, but I'm not sure if the same approach would work for combo/combobox.

Forgot to mention that your suggestion worked great. Thanks for the help!

I am using minimal markup in my HTML to define a treegrid.

    <div id="treePanelContent">
       <table id="myTree"></table>
    </div>

I initialize the treegrid with javascript, here's a snippet that shows columns definitions without editors.

$('#myTree').treegrid({
   ...,
   idField:'id',
   treeField:'name',
   frozenColumns:[[
                   {title:'Id',field:'id',width:100,
                     formatter:function(value){
                   return '<span style="color:red">'+value+'</span>';
                   },
                    editor: 'text'
               }
   ]],
   columns:[[
      {field:'description',title:'Name',width:250,rowspan:2},
      {field:'type',title:'Type',width:75,rowspan:2},
      {field:'startDate',title:'Start Date',width:75,rowspan:2},
      {field:'endDate',title:'End Date',width:75,rowspan:2},
   ]],
   ...,
});

The "description" column is special because editing is dependent on the node type in the tree. The node type can be defined as "text", which would use {editor : {type: 'text'}}, or "select", which would use {editor: {type: 'combox', options: { ...}}. The node type is defined in a context menu which allows the user to select which type of node to add to the tree.

How can I set the editor dynamically after the treegrid has been initialized?

[editor:'text'"]

Maybe I missed something, but I couldn't see where you have defined an editor for the fields you want to edit.

beginEdit starts the editor for the treegrid, but if no editor is defined, nothing happens.

It can be done in html:

<th data-options="field:'name',width:180,editor:'text'">Task Name</th>

It can be done when declaring columns for the treegrid:

      ...,
      columns:[[
         {field:'description',title:'Name',width:250,rowspan:2,editor:'text'},
         ...
      ]],
      ...

I'm pretty sure there are other ways to do it as well. There are several types of editors, or you can write your own.