Datagrid in a Window

[stephenl]

Hello

I have the following function, which is called from a main datagrid to display a list of possible items

Code:

function addItems(){
	var row = $('#dg').datagrid('getSelected');
	if (row){
		$('#win').window({
			width:500,
			height:200,
			title:'Item Selection',
			modal:true
		});
		$('#dgn').datagrid({
			singleSelect:false,
			url:'get_items.php?item='+row.item,
			columns:[[
				{field:'item',title:'Item',width:150},		
				{field:'description',title:'Description',width:150},				
			        {field:'ck',title:'Select',checkbox:true},
			]]
		});				
	}		
}

I have the following problems / questions

How do i prevent the checkbox from being displayed as a title field... title:'Select' doesn't seem to work

How do I prevent the top row "titles" scrolling with the returned data ?

Is it possible to add a toolbar to a datagrid within a window ?

I would like to show a running count of items selected in either the toolbar or Window Title bar ?

Any guidance would be appreciated

Thank you

[jega]

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 ;-)

[jega]

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>

[stephenl]

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

[jega]

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>