In the context of a gridview, I have implemented a CSS-based inline graph. Initially, everything functions as expected until a filter is applied and the gridview undergoes an update. At that point, the CSS styling ceases to apply within the grid. Has anyone encountered this issue before and found a solution? To be honest, delving into CSS troubleshooting is not my forte.
This is the element prior to the AJAX update:
This is after the AJAX update:
.stat-block .stat-graph {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D7D7D7;
border-radius: 3px;
margin-right: 10px;
padding: 10px 10px 8px;
text-align: center;
width: auto;
}
Upon initial generation of the grid, it seems that the CSS generates a canvas tag like so:
<canvas style="display: inline-block; width: 29px; height: 20px; vertical-align: top;" width="29" height="20"></canvas>
However, following the AJAX update and refresh of the gridview, that canvas tag no longer appears.
I attempted to place the graph data inside the canvas tag with no success.
Below is the gridview code snippet:
this->widget('zii.widgets.grid.CGridView', array(
'id' => 'cartuse-grid',
'dataProvider' => $model->search(),
'filter' => $model,
'afterAjaxUpdate' => 'reinstallDatePicker',
'columns' => array(
array(
'id' => 'autoId',
'class' => 'CCheckBoxColumn',
'selectableRows' => '50',
),
// 'id',
array(
'name'=>'client',
'type'=>'raw',
'value'=>'client($data->client)',
'htmlOptions' => array(
'align'=>'center',
//'width'=>'35%'
)
Here is the client function utilized:
function client($client) {
...
return '<div class="stat-block" id="graph">
<ul>
<li class="stat-graph inlinebar" id="activitate-lunara">
'.$data.'
</li>
<li class="stat-count">
<span>'.$data['0'].'
</span>
</li>
<li class="stat-percent">
<span class="text-info stat-percent">'.$target.'</span>
</li>
</ul>
</div>';
}
Edit 1: Following the recommendation from answer 1, I attempted to use the removeClass() and addClass() functions in order to refresh the CSS post-AJAX update. Unfortunately, this did not yield any changes. The canvas tag continues to remain absent.
Another approach was to utilize replaceWith() to directly insert the canvas tag, but this caused issues with filtering functionality.
Here's the reinstallDatePicker function:
<?php Yii::app()->clientScript->registerScript('re-install-date-picker', "
function reinstallDatePicker(id, data) {
$('#datepicker_min').datepicker({ dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeYear: true,
changeMonth: true,
});
$('#datepicker_max').datepicker({ dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeYear: true,
changeMonth: true,
});
$( \"#activitate-lunara\" ).removeClass( \"stat-graph inlinebar\" );
$( \"#graph\" ).removeClass( \"stat-block\" );
$( \"#graph\" ).addClass( \"stat-block\" );
$( \"#activitate-lunara\" ).addClass( \"stat-graph inlinebar\" );
}"); ?>
Edit 2:
Prior to this, I had not been utilizing renderPartial for column content, instead relying on a function to return the desired content. After exhausting various options, I transitioned to renderpartial. By employing renderpartial along with registering scripts/CSS in the partial view and using removeClass/addClass methods, I was able to resolve the issue successfully.