Gridview panel with adminlte layout

[devleaks]

Hello Kartik,

I adjusted my Yii advanced app backend to use adminlte. I struggle a bit adjusting your grid view panels to take adminlte's appearance.

Here is what I now have:

and here is "pure" adminlte look:

You are using bootstrap panels, it seems that adminlte is using something they call "box" to wrap around the grid view. They have box-header, box-body, box-footer...

Is it possible to change your class names from panel-XXX to box-XXX through your grid view configuration settings? I found headingOptions and footerOptions to change panel-heading and panel-footer, but I haven't seen any setting to change the main panel class of the enclosing element.

Is it possible to change?

Thank You.

Pierre

[devleaks]

OK, found part of it. You can redefine panelTemplate, panelHeadingTemplate, panelFooterTemplate.
There are still a few panel classes here and there in div (you are forcing addCssClass with panel-heading and panel-footer). Can I get rid of those? Thanks. P.

[kartik-v]

Easiest way is to set panel property to false and then edit the layout or use your own markup. For example for Admin LTE theme you can do this.

<div class="box">
    <div class="box-header with-border">
          <h3 class="box-title">Bordered Table</h3>
    </div><!-- /.box-header -->
    <div class="box-body">
        <?= \kartik\grid\GridView::widget([
            'dataProvider' => $dp,
            'columns' => $cols,
            'panel' => false,
        ]) ?>
    </div><!-- /.box-body -->
    <div class="box-footer clearfix">
        <!-- other markup -->
    </div><!-- /.box-footer-->
</div>

You need to add the tags for export and toolbar to your GridView::layout property...

[kartik-v]

However what you are doing is also on the right path... I will try to enhance the panel features to see if I can allow configurable classes.

[kartik-v]

Resolved via update to release v3.0.8 (still not tagged and in dev-master).

You can override all panel classes and note the new panelPrefix property that you can set. It defaults to panel panel-. For AdminLTE box change it to box box-.

[bencyn]

@kartik-v Hi how to you override the panel classes. An example would be great. Thanks

[michaelgrafwebdev]

@kartik-v Hi how to you override the panel classes. An example would be great. Thanks

http://demos.krajee.com/grid

echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'panel' => [
              'headingOptions' => ['class'=>'box-header with-border'],
  ],
]);