Print Page - custom datagrid header [solved]

Title: custom datagrid header [solved]
Post by: Opan Mustopah on May 24, 2015, 08:53:31 PM

hello again.

i have a simple question, but may be a bit difficult for to do that.

if it possible to make datagrid header format like this ?:
___________________________________
   | column band |
header 1 |---------------------------------- |
   | col 1 | col 2 | col 3 |
   |---------------------------------- |
   |sub col 1 | sub col 2 | sub col 3|
-----------------------------------------------

i already try to make datagrid achieve just like that, but the result not as expected.

here my code:

Code:

list_data.datagrid({
      // url: "#{sc_load_data_audit_trials_path(:prm => params[:prm])}",
      method: "get",
      fit: true,
      title: "Audit Trails",
      idField: "id",
      toolbar: "#tb_list_data",
      resizeHanlde: "right",
      striped: true,
      rownumbers: true,
      frozenColumns: [
        [{field: 'field_name', title: "Field Name / State", width: 150, sortable: false, halign: 'left', align: 'center', rowspan: 2}],
        []
      ],
      columns: [
        [
          [{title: 'test 1', colspan: 3, halign: 'center'}],
          [
            {field: 'test1', title: 'test1', colspan: 1},
            {field: 'test2', title: 'test1', colspan: 1},
            {field: 'test3', title: 'test1', colspan: 1}
          ]
        ],
        [
          {field: 'test1', title: 'test1'},
          {field: 'test2', title: 'test1'},
          {field: 'test3', title: 'test1'}
        ]
      ]
    });

thanks in advance

Title: Re: custom datagrid header
Post by: jarry on May 25, 2015, 12:18:39 AM

Please try this:

Code:

$('#dg').datagrid({
    frozenColumns: [
        [{field: 'field_name', title: "Field Name / State", width: 150, sortable: false, halign: 'left', align: 'center'}]
    ],
    columns: [
        [
            {title: 'column band', colspan: 3, halign: 'center'}
        ],
        [
            {title: 'col 1', colspan: 1},
            {title: 'col 2', colspan: 1},
            {title: 'col 3', colspan: 1}
        ],
        [
            {field: 'test1', title: 'sub col 1'},
            {field: 'test2', title: 'sub col 2'},
            {field: 'test3', title: 'sub col 3'}
        ]
    ]

})

Title: Re: custom datagrid header
Post by: Opan Mustopah on May 25, 2015, 12:35:32 AM

thanks stworthy for your fast response.
one more question, can i make that header column colorize? specially for those sub column header ?
thanks in advance

Title: Re: custom datagrid header
Post by: jarry on May 25, 2015, 12:56:27 AM

Please refer to http://www.jeasyui.com/forum/index.php?topic=3854.0

Title: Re: custom datagrid header
Post by: Opan Mustopah on May 25, 2015, 12:59:12 AM

thanks again stworthy for your fast response, i'll try it asap.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Opan Mustopah on May 24, 2015, 08:53:31 PM