Recent Posts

Hello,
I have a problem when cancelling an edit in datagrid, I have bootstrap 5.
It displays an error `No method named "destroy"`.
I know the error is caused by trying to use the method '$(_5b3).tooltip("destroy");' but it looks like bootstrap "overrides" this method

Is this a known problem?

Code:

Uncaught TypeError: No method named "destroy"
    at HTMLInputElement.<anonymous> (bootstrap.min.js:6:49629)
    at Function.each (jquery.min.js:2:2573)
    at w.fn.init.each (jquery.min.js:2:1240)
    at w.fn.init.jQueryInterface [as tooltip] (bootstrap.min.js:6:49527)
    at _5b2 (jquery.easyui.min.js:7827:9)
    at HTMLInputElement.<anonymous> (jquery.easyui.min.js:8041:1)
    at Function.each (jquery.min.js:2:2573)
    at w.fn.init.each (jquery.min.js:2:1240)
    at Object.destroy (jquery.easyui.min.js:8040:11)
    at $.fn.validatebox (jquery.easyui.min.js:8019:38)

Hi.

Happy New Year.

Just say it. Your question is fundamental javascript and is off topic in this forum. You can find javascript programming on thousands of other sites.

Everyone in this forum looks for Q and A about easyui for jquery/vue/angular/react. ;-)

Solved

var name = $('#name').val();

Hello

I have the following

Code:

function doSearch(){
	$('#dg').datagrid('load',{
		name: $('#name').val(),
	});
}

Which works well ie passed the parameters to server.

How would I save the parameter value to a var ??

Thank you

Hi.

Have played around with the autoicon.js to have more of them, pointing to different folders

Want to put autoicon.js in this folder websitefolder/easyui/js

icon folders is site/easyui/themes/iconsite and site/easyui/themes/iconstandard

Want 2 auto files auto-iconsite.js and auto-iconstandard.js

The best solution would be if there could be only 1 autoicon.js file, looking in one or more folders

Thanks jarry


Explanation to other users.

Use the url in this thread to the theme builder.

Create your style in the Setting tab. For use in your project, select tab CSS and copy the style code.

• Under easyui/themes, create a new folder and name it what describe your theme "mytheme"
• Copy all files from default theme to this new folder
• Open easyui.css file and overwrite everything with the created CSS

Link to this new theme
<link rel="stylesheet" type="text/css" href="easyui/themes/mytheme/easyui.css">


Go to theme builder LESS tab and copy everything, and save it in a text file (Important)

When you need to edit in the theme, open theme builder, goto LESS tab, overwrite with your theme LESS code and push the little reload button on the LESS tab, and you are back.


Regards Jesper - Denmark

Or like this you can build it dynamic

Regards Jesper - Denmark


<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">
   <table id="dgn">
   </table>
</div>


<script>

   $( document ).ready(function(){
      addItems()
   });

   function addItems() {
      $('#win').window({
         width:500,
         height:200,
         title:'Item Selection',
         modal:true
      });
      $('#dgn').datagrid({
         fit: true,
         singleSelect: true,
         data: [
            {item:'MyItem 11', description:'MyDescription 11'},
            {item:'MyItem 21', description:'MyDescription 21'}
         ],
         columns:[[
            {field:'ck',title:'Select',checkbox:true},
            {field:'item',title:'Item',width:150},      
            {field:'description',title:'Description',width:150}
         ]],
         toolbar: [{
            iconCls: 'icon-add',
            plain: true,
            text: 'Add',
            handler: function(){alert('add')}
         },{
            iconCls: 'icon-edit',
            plain: true,
            text: 'Edit',
            handler: function(){
               var row = $('#dgn').datagrid('getSelected')
               if (row) {
                  alert('Edit item '+row.item)
               }
            }
         },{
            iconCls: 'icon-remove',
            plain: true,
            text: 'Remove',
            handler: function(){alert('remove')}
         }]
         
      });            
   }
   
</script>

Thank you Jega, your replies were very helpful, just what I needed to resolve my questions !

Datagrid in window with toolbar

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">
   <table id="dgn" class="easyui-datagrid" data-options="
            fit: true,
            singleSelect:false,
            idField:'ID',
            striped:true,
            toolbar:'#dgToolbar'">
      <thead>
         <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'item',width:'150px'">Item</th>
            <th data-options="field:'description',width:'150px'">Description</th>
         </tr>
      </thead>
   </table>
   <div id="dgToolbar" style="padding:10px 10px 10px 10px">
      <a id="createButton" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="newData()">Add</a>
      <a id="editButton" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editData()">Edit</a>
      <a id="deleteButton" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="deleteData()">Delete</a>
   </div>
</div>

Hi

<th data-options="field:'ck',checkbox:true"></th>
Set false or remove, but if you need it, it also must be in title, as it is to select all

Prevent top row to scroll:
$('#dgn').datagrid({fit:true})

Toolbar:
There is a lot of samples with toolbar in the datagrid demo

Count selected rows:
var rows = $('#dgn').datagrid({'getSelections')
console.log(rows.length)

Write it in title
$('#win').window('setTitle')

Demo page and documentation is your friend ;-)