CODEWITHSUNDEEP
cssgridviewyiistyles
hamedkh
hamedkh

Reputation: 1029

changing yii grid view style from one place in a project

I have a problem with GridView in my project. I'm developing a Yii application and using standard zii grid view in different views of my project. my problem is to find a way to change their CSS styles from one place in my project.I realy dont want to change it view by view. is there any suggestion to do this?

Upvotes: 3

Views: 7401

Answers (4)

Robert Went
Robert Went

Reputation: 3072

I just wanted to add a snippet which stops it loading all together. Added to the components array in main config. This is available since 1.1.3

//stop zii loading css
    'widgetFactory'=>array(
        'widgets'=>array(
            'CGridView'=>array(
                'cssFile' => FALSE,
                ),
            ),
        ),

Or load a specific stylesheet

//stop zii loading css and load a specific stylesheet
    'widgetFactory'=>array(
        'widgets'=>array(
            'CGridView'=>array(
                'cssFile' => Yii::app()->request->baseUrl.'/css/gridview.css',
                ),
            ),
        ),

Upvotes: 1

Alexander Yakutskiy
Alexander Yakutskiy

Reputation: 315

For global settings you can edit the application configuration file main.php like this:

return array(
…
'components'=>array(
   'widgetFactory'=>array(
     'widgets'=>array(
      'CGridView'=>array(
             'cssFile' => Yii::app()->request->baseUrl.'/css/gridview.css',,
        ),

See Customizing Widgets Globally section in the guide.

Upvotes: 12

hamedkh
hamedkh

Reputation: 1029

after searching alot about this issue I couldn't find any good and standard solution for that. so I've used an unusual and maybe not standard way to solve that and put it here for someone who may face my problem too.
the idea is that when you use zii yii grid view,by default, during the runtime it send a request to get its appropriate CSS files so in controller I do not let it to get it's original files by using this code : 

Yii::app()->clientScript->scriptMap = array(
            'pager.css' => false,
            'styles.css' => false,
        );

the point is that this code prevent all rquests to all styles.css file which you may have in the project. so be carefull about that.
the next thing I did was to change the request to sytles.css and pager.css files. I defined two custom css files named gridStyle.css and pager.css and use them instead of these two original files. so by the following code I used some mapping for that :

 Yii::app()->clientScript->scriptMap = array(
            'pager.css' => Yii::app()->theme->baseUrl . '/css/pager.css',
            'styles.css' => Yii::app()->theme->baseUrl . '/css/gridStyle.css',
        );

by this code I said that if there is a request to styles.css and pager.css files replace them with my custom files.As I said maybe it's not a well solution but it was the only solution for me.

Upvotes: 0

Brett Gregson
Brett Gregson

Reputation: 5913

To change it per view (I know you said you don't want to, but here it is anyway for anyone who may be searching) is to change the cssFile property of the CGridView instance like so:

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'user-grid',
    'dataProvider' => $model->search(),
    'filter' => $model,
    'ajaxUpdate' => false,
    'cssFile' => Yii::app()->request->baseUrl.'/css/gridview.css',
     ...

I the above example we are using a CSS file called gridview.css instead of the default CSS file.

To change it globally (across all instances of CGridView) you can either overwrite the CSS attributes of the gridview manually in one of your CSS files (keep in mind the load order of the files, you may need to use !important)

OR

You can simply edit the framework asset for the gridview which is located at:

framework/zii/widgets/assets/gridview/styles.css

Upvotes: 0

Related Questions