Yii2 kartik-v tabsX after filtering return same tab

user_7202135 0
Viewed 137

I am using Yii2 kartik-v tabsX widget. After klick some of tabs and reloding page it gives me back the same tab and everything works fine. But when i am filtering some of gridView fields, filter works correct but page renders with active first tab. Is it possible to get back to same tab after gridView filter used?

kartik-v yii2 php
2 Answers

So I found solution, maybe this will be useful for someone.

First of all you must provide TabsX item id in options

echo TabsX::widget([
    'enableStickyTabs' => true,
    'items' => [
        [
            'label' => 'label',
            'encode' => false,
            'content' => $this->render('_view_data', [
                 'model' => $model, 
                 'model_response' => $models_response
             ]),
            'options' =>[
                'id' => 'request',
            ],
        ],

After you done that you need to add 'filterUrl' in gridview

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'filterUrl' => ['your_base_url_after_filter','id' => $model->id, '#' => 'request'],

And thats it. If anyone have more questions, please wright below.

user_72021350

While using filterUrl & assign id for Tabx item remain the active tab, it creates a undesired UI transition.

For example: you have 3 tabs and the 2nd one is active, after refreshing, 1st tab will be active and shortly after the 2nd tab is active. It's short but it's noticeable.

Another option to add another url parameter for tracking active tab position and add it url & active property of TabX.

echo TabsX::widget([
// 'enableStickyTabs' => true,
'items' => [
    [
        'label' => 'label',
        'encode' => false,
        'content' => $this->render('_view_data', [
             'model' => $model, 
             'model_response' => $models_response
         ]),
        'url' => Url::to(['view', 'id' => $model->id, 'tabIndex' => 2]),
        'active' => $this->context->request->get('tabIndex') == 2,
    ],

The side effect is now the page will reload on every tab-changes event which is annoyed if:

  • your view have all the necessary data for all tabs
  • gridview filter parameters will be reset
user_151387770
Related