ExpandRowColumn in Modal doesn't work

[friek108]

I can't get the expandRowColumn to work for grid inside a modal - it works outside of a modal no problems. Basic code is below to replicate the issue:

<?php
use kartik\grid\GridView;
?><div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-local="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h3 class="modal-title" id="myModalLabel">My Modal</h3>
  </div>
  <div class="modal-body">  

    <?php
    echo GridView::widget([
      'id'=>rand(),
      'dataProvider' => $dataProvider,
      'summary'=>'',     
      'formatter'=>[
          'class' => 'yii\i18n\Formatter',
          'nullDisplay'=>'-'
      ],
      'export'=>false,            
      'resizableColumns'=>false,
      'hover'=>true,      
      'striped'=>false,
      'bordered'=>false,      
      'rowOptions' => ['class' => 'pointer-cursor'],
      'tableOptions'=>['class'=>'align-middle'],      
      'columns' => [
        [
          'class'=>'kartik\grid\ExpandRowColumn',
          'enableRowClick'=>true,
          'width'=>'20px',
          'value'=>function ($model, $key, $index, $column) {
              return GridView::ROW_COLLAPSED;
          },
          'detail'=>function ($model, $key, $index, $column) {
              return 'hello world';//Yii::$app->controller->renderPartial('_expand-row-details', ['model'=>$model]);
          },
          'detailAnimationDuration'=>100,
          'expandIcon'=>'<span class="fa fa-angle-right"></span>',
          'collapseIcon'=>'<span class="fa fa-angle-down"></span>',
          //'headerOptions'=>['class'=>'kartik-sheet-style']          
        ],        
        'filter',                  
        'value',
        [          
          'attribute' => 'Clear',
          'hAlign'=>'center',
          'width'=>'80px;',
          'format'=>'raw',
          'value'=>function($model){
            return '<a href="#" data-placement="top" data-tooltip="tooltip" title="" class="grid-delete-btn" data-original-title="Clear Filter"><span class="fa fa-times"></span></a>';
          }
        ]              
      ]
    ]);
    ?>   
  </div>
  <div class="modal-footer">
    <a class="btn btn-default" href="#" data-dismiss="modal">Cancel</a>
    <a href="#" class="btn btn-success">Save</a>    
  </div>
</div>
    </div>
</div> 
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#myModal">Open Modal</a>

[friek108]

Looking at kv-grid-expand.js, the var $rows is selecting only visible td elements using this line:

$rows = $grid.find("td:visible .kv-expand-row:not(.kv-state-disabled)"),

Being in a modal, this of course isn't visible when this script is run and so the td elements don't get selected

[kartik-v]

This will need some thought on the design for such cases... will get back on this when I have some time.

[kartik-v]

@friek108 you can check now with the fix.