Print Page - Datagrid with checkbox

Title: Datagrid with checkbox
Post by: anugrast on October 13, 2016, 08:28:17 PM

Hai...

I want to make datagrid with checkbox facilities. Here are some of my questions.

Can I add onchange action on the checkbox to make some checkbox disabled which have some condition

This is my JS

Code:

$('#dgIEIRSmhs').datagrid({
	url:'_modul/mod_irs/aksi_irs.php?act=listJADKULKRS',method:'post',striped:true,loadMsg:'Loading',showHeader:true,rownumbers:true,rownumberWidth:40,remoteSort:false,multiSort:true,	singleSelect:true, ctrlSelect:true, checkOnSelect:false, selectOnCheck:false,
	columns:[[
		{field:'hari',title:'Hari',width:60,align:'center',formatter:formatNamaHari,sortable:true},
		{field:'jamkul',title:'J a m',width:85,align:'center',sortable:true},
		{field:'kodemk',title:'Kode MK',width:85,align:'center',sortable:true},
		{field:'namamk',title:'Nama Mata Kuliah',width:190,align:'left',sortable:true},
		{field:'semester',title:'SMT',width:40,align:'center'},
		{field:'sks',title:'SKS',width:40,align:'center'},
		{field:'nama_kelas',title:'Kelas',width:40,align:'center'},
		{field:'namados',title:'Dosen',width:190,align:'left',sortable:true},
		{field:'ruang',title:'Ruang',width:70,align:'center',sortable:true},
		{field:'ambil',title:'Ambil',width:60,align:'center',
			formatter: function (value) {
			 if (value == 1) {
					return '<input type="checkbox" checked>';
			 }
			 else {
					return '<input type="checkbox" >';
			 }
			}
		}
	]],
	rowStyler: function(index,row){
		if(row.ambil==1) {
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});

Please help me...

Title: Re: Datagrid with checkbox
Post by: stworthy on October 14, 2016, 12:29:59 AM

The datagrid has a built-in checkbox column. The code below shows how to hide some checkbox elements when the list price is less than 30.

Code:

<style>
    .r1 .datagrid-cell-check input{
        display: none;
    }
</style>
<script>
$(function(){
    $('#dg').datagrid({
        rowStyler: function(index,row){
            if (row.listprice<30){
                return {
                    class: 'r1'
                }
            }
        },
        onCheck: function(index,row){
            //...
        },
        onUncheck: function(index,row){
            //...
        }
    });
})
</script>

Title: Re: Datagrid with checkbox
Post by: anugrast on October 14, 2016, 06:34:09 PM

Thanks sworty...

I've tried... This is my code...

Code:

$('#dgIEIRSmhs').datagrid({
	url:'_modul/mod_irs/aksi_irs.php?act=listJADKULKRS',method:'post',striped:true,loadMsg:'Loading',showHeader:true,rownumbers:true,rownumberWidth:40,remoteSort:false,multiSort:true,	singleSelect:true, ctrlSelect:true, checkOnSelect:false, selectOnCheck:false,
	columns:[[
		{field:'hari',title:'Hari',width:60,align:'center',formatter:formatNamaHari,sortable:true},
		{field:'jamkul',title:'J a m',width:85,align:'center',sortable:true},
		{field:'kodemk',title:'Kode MK',width:85,align:'center',sortable:true},
		{field:'namamk',title:'Nama Mata Kuliah',width:190,align:'left',sortable:true},
		{field:'semester',title:'SMT',width:40,align:'center'},
		{field:'sks',title:'SKS',width:40,align:'center'},
		{field:'nama_kelas',title:'Kelas',width:40,align:'center'},
		{field:'namados',title:'Dosen',width:190,align:'left',sortable:true},
		{field:'ruang',title:'Ruang',width:70,align:'center',sortable:true},
		{field:'ambil',checkbox:true,width:50}
	]],
	rowStyler: function(index,row){
		if(row.ambil) {
			return 'background-color:#6293BB;color:#fff;';
		}
	},
	onLoadSuccess: function(data){
		for(var i=0; i<data.rows.length; i++){
			if(data.rows[i]['ambil']) {
				$(this).datagrid('checkRow', i);
			}
		}
	},	
	onCheck: function(index,row){
		row.ambil=1;
		//alert(row.ambil);
	},
	onUncheck: function(index,row){
		row.ambil=0;
		//alert(row.ambil);
	}			
});

When I check th checkbox, my row background color didn't change... How to fix it?

Thx

Title: Re: Datagrid with checkbox
Post by: stworthy on October 15, 2016, 02:05:24 AM

Please call 'refreshRow' method when changing the row value.

Code:

onCheck: function(index,row){
    row.ambil = 1;
    $(this).datagrid('refreshRow', index);
},
onUncheck: function(index,row){
    row.ambil = 0;
    $(this).datagrid('refreshRow', index);
}

Title: Re: Datagrid with checkbox
Post by: anugrast on October 15, 2016, 06:23:10 PM

Thanks for your help... It works.... :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: anugrast on October 13, 2016, 08:28:17 PM