How To Add Dynamic Column in Flexi Grid

In this tutorial i will describe how to add dynamic column in flexi grid normally we are working flexi grid with fixed column but some times we need to add dynamic column with flexi grid, that times we need to modify logic as per requirement.For this we need to get column value in array and convert to json object.

Also Checkout other tutorials of flexi grid,

There are following steps to needed for dynamic columns.

Step 1: We will get dynamic column and assign into array.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$fields = array('test' => 'Test', 'test2' => 'Test2');
        $columns = array();
        foreach($fields as $name => $display){
            $columns[] = array(
                'display' => $display,
                'name' => $name,
                'width' => 143,
                'sortable' =>  true,
                'align' => 'left'
            );
        }

    ?>

Step 2: Now we will set above array to the flexi grid.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function dependencyListingGrid() {
        var dependencyListingGrid = null,
        dependencyListingGrid = jQuery("#listing-grid").flexigrid({
            url : "<?php echo mvc_public_url(array('controller' => 'controllername', 'action' => 'actioname.json')); ?>",
            dataType : 'json',
            striped : true,
            qtype : jQuery('#itemdetails_id').val(),
            colModel : <?php echo json_encode($columns); ?>,
            showToggleBtn : false,
            rpOptions: [5,10, 15, 20, 30, 50], //allowed per-page values
            procmsg: 'Processing, Please wait ...',
            pagestat: 'Displaying {from} to {to} of {total} records',
            onSuccess:function(){
                //getChangesforTeam();
            },
            datacol: {             
            
            },  
            sortname : "test",
            sortorder : "asc",
            usepager : true,
            title : '<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/wp_home_page/images/table.png">&nbsp; Item Environment depenedncy',
            useRp : true,
            rp : 10,
            showTableToggleBtn : true,
            width : 'auto',
            height : 'auto',
            onSuccess:function(){
            },
        });
        }

The main concern in this tutorial, the fields key will be same as resulted data based on controller action, otherwise the flexi grid would be not show.

Step 3: Now we will bind grid with controller action:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function actioname() {
        $ext = isset($this->params['ext']) ? $this->params['ext'] : null;
        $post = isset($_POST) ? $_POST: array();
        //$projects = $this->User->getProjectInfo();
        $this->params['id'] = isset($this->params['qtype']) ? $this->params['qtype'] : 0;
        $data = $this->Item->getResult(array(
                    'IID' => isset($this->params['id']) ? $this->params['id'] : 0,
                    'page' => isset($post['page']) ? intval($post['page']) : 1,
                    'rp' => isset($post['rp']) ? intval($post['rp']) : 5,
                    'sortname' => isset($post['sortname']) ? trim($post['sortname']) : '',
                    'sortorder' => isset($post['sortorder']) ? trim($post['sortorder']) : 'ASC'
                    ));
                    
                    $response = array(
            'page' => $data['page'],
            'total' => $data['total'],
            'rows' => array()
                    );



                    $i = 0;
                    foreach($data['records'] as $record){
                    
                        $response['rows'][] = array(
                    'id'=> $record['IDID'],
                    'cell' => array(
                            'id' => $record['IDID'],
                            'fixed1' => array(
                                    'id' => $record['IDID'],
                                    'value' => $record['fixed1']
                        ),
                            'fixed12' =>$record['fixed12']
                            
                        )
                        
                        );
                        //dynamic column
                        if(!empty($record['custom']))
                        foreach($record['custom'] as $key => $val)
                        $response['rows'][$i]['cell'][$key] = $val;
                        $i++;
                    }
                    
                    $this->render_view('json/_default', array(
                'layout' => 'json',
                'locals' => array(
                        'response' => $response
                    )
                    ));
                    //return;
                    exit(0);
        }

  • kalaithendral

    Hi Parvez,

    Thanks for your great post,its helped me more,and reduced my working time on this particular task

    Thank you so much parvez

    Thanks & Regards,
    Kalaithendral