Print Page - Datagrid checkbox questions

Title: Datagrid checkbox questions
Post by: siccak on October 15, 2015, 11:30:50 AM

Hello,

I have two questions about using datagrid with checkbox column.

1. check All button

I am using my datagrid with pagination and if I click check all button then only rows on first page are selected. Is there any way how to check rows on all pages?

2. hiding checkbox and getChecked method

Is there any way how to conditionally hide checkbox on row, based on some formula or anything else? I am achieving this by using rowStyler, but it has some drawbacks. getChecked method is returning values from all checkboxes (not respecting hidden or disabled checkboxes) and this will be more complicated if my first question will be answered.

Thank you, Sicco

Title: Re: Datagrid checkbox questions
Post by: jarry on October 15, 2015, 08:09:10 PM

Click the check button on column header, only the current page rows are checked. You can custom this behavior by overriding the 'onCheckAll' and 'onUncheckAll' event handlers.

Code:

$('#tt').datagrid({
    url:'test.php',
    pagination:true,
    idField:'itemid',
    onCheckAll:function(){
        var state = $(this).data('datagrid');
        $.ajax({
            url:'getallrows.php',
            type:'POST',
            dataType:'json',
            success:function(data){
                state.checkedRows = data.rows;
                state.selectedRows = data.rows;
            }
        })
    },
    onUncheckAll:function(){
        var state = $(this).data('datagrid');
        state.checkedRows = [];
        state.selectedRows = [];
    }
});

Title: Re: Datagrid checkbox questions
Post by: siccak on October 23, 2015, 04:38:31 AM

Thank you jarry, it works.

And about my second question, it seems I am out of luck.

Siccak

Title: Re: Datagrid checkbox questions
Post by: jarry on October 24, 2015, 05:36:01 AM

To hide the checkbox conditionally, define the 'styler' or 'rowStyler' function to achieve this functionality. Please refer to the code below.

Code:

<style>
  .dg-nocheck .datagrid-cell-check{
    display: none;
  }
</style>
<th data-options="field:'ck',checkbox:true,
    styler:function(index,row){
      if (row.listprice>40){
        return {class:'dg-nocheck'};        
      }
    }"></th>

Title: Re: Datagrid checkbox questions
Post by: lloyd on October 26, 2015, 09:21:20 AM

I was going to ask the same (1. check All button) question.
I would suggest doing it this way as the pagination function already has all the data. ;)

Code:

        tg.treegrid({
            onCheckAll: function() {
                var allRows = $(this).treegrid('getAllRows');
                var state = $(this).data('datagrid');
                
                state.checkedRows = allRows;
            },
            onUncheckAll: function() {
                var state = $(this).data('datagrid');
                state.checkedRows = [];
            }
        }).treegrid('clientPaging');

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: siccak on October 15, 2015, 11:30:50 AM