Krajee

GridView Demo

Thankful to Krajee! BUY A COFFEEor to get more out of us.

Note

This is an advanced usage of the ExpandRowColumn for the kartik\grid\GridView widget. It shows how to initialize selectively few of the rows as EXPANDED. It also uses the AJAX mode of rendering content in this demo (which is set via the detailUrl property). You can check the grid configuration code below the demo as well as click the to view the $gridColumns configuration code. You can configure the appearance and behavior of the widget. View this complete web tip on how to setup your model, controller, and view with GridView Editable columns to manipulate records.

For grid grouping demos click here — For advanced ExpandRowColumn usage demo click here

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Showing 11-20 of 20 books.
Library
* Resize table columns just like a spreadsheet by dragging the column edges.
 
NameColorAuthorBuy Amount ($)Sell Amount ($)Buy + Sell
(BS)
Buy %
(100 * B/BS)
StatusActions
 
 
11
   yellowGabriel García Márquez
195.50360.5054.23Active
12
   greenJane Austen
195.50321.5060.81Active
13
   redJ. D. Salinger
125.50230.5054.45Active
14
   redJohn Steinbeck
155.50259.5059.92Active
15
   blueF. Scott Fitzgerald
300.00509.0058.94Active
16
   purpleJ. R. R. Tolkien
158.50267.5059.25Active
17
   brownWilliam Faulkner
125.50231.5054.21Active
18
To Kill a Mockingbird    orangeHarper Lee79.0098.50177.5055.49Inactive
19
   pinkVirginia Woolf
145.50250.5058.08Active
20
Ulysses   greenJames Joyce69.0098.50167.5058.81Inactive
Total1,177.001,598.502,775.5057.42(amounts in $)
* The page summary displays SUM for first 3 amount columns and AVG for the last.

Configure GridView

 

Table Setting
Panel Setting  

 

           
Panel Content
 


The GridView Configuration

echo GridView::widget([
    'id' => 'kv-grid-demo',
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns, // check this value by clicking GRID COLUMNS SETUP button at top of the page
    'headerContainer' => ['style' => 'top:50px', 'class' => 'kv-table-header'], // offset from top
    'floatHeader' => true, // table header floats when you scroll
    'floatPageSummary' => true, // table page summary floats when you scroll
    'floatFooter' => false, // disable floating of table footer
    'pjax' => false, // pjax is set to always false for this demo
    // parameters from the demo form
    'responsive' => false,
    'bordered' => true,
    'striped' => false,
    'condensed' => true,
    'hover' => true,
    'showPageSummary' => true,
    'panel' => [
        'after' => '<div class="float-right float-end"><button type="button" class="btn btn-primary" onclick="var keys = $("#kv-grid-demo").yiiGridView("getSelectedRows").length; alert(keys > 0 ? "Downloaded " + keys + " selected books to your account." : "No rows selected for download.");"><i class="fas fa-download"></i> Download Selected</button></div><div style="padding-top: 5px;"><em>* The page summary displays SUM for first 3 amount columns and AVG for the last.</em></div><div class="clearfix"></div>',
        'heading' => '<i class="fas fa-book"></i>  Library',
        'type' => 'primary',
        'before' => '<div style="padding-top: 7px;"><em>* Resize table columns just like a spreadsheet by dragging the column edges.</em></div>',
    ],
    // set export properties
    'export' => [
        'fontAwesome' => true
    ],
    'exportConfig' => [
        'html' => [],
        'csv' => [],
        'txt' => [],
        'xls' => [],
        'pdf' => [],
        'json' => [],
    ],
    // set your toolbar
    'toolbar' =>  [
        [
            'content' =>
                Html::button('<i class="fas fa-plus"></i>', [
                    'class' => 'btn btn-success',
                    'title' => Yii::t('kvgrid', 'Add Book'),
                    'onclick' => 'alert("This should launch the book creation form.\n\nDisabled for this demo!");'
                ]) . ' '.
                Html::a('<i class="fas fa-redo"></i>', ['grid-demo'], [
                    'class' => 'btn btn-outline-secondary',
                    'title'=>Yii::t('kvgrid', 'Reset Grid'),
                    'data-pjax' => 0, 
                ]), 
            'options' => ['class' => 'btn-group mr-2 me-2']
        ],
        '{export}',
        '{toggleData}',
    ],
    'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
    'persistResize' => false,
    'toggleDataOptions' => ['minCount' => 10],
    'itemLabelSingle' => 'book',
    'itemLabelPlural' => 'books'
]);

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

 
visitors to Krajee Yii2 Demos since 22-May-2017