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 flexigrid, 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,

• Part 1 – Simple Example of Flexi Grid with PHP
• Part 4 – How To Add Dynamic Column in Flexi Grid

There are following steps to needed for dynamic columns.

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

<!--?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 flexigrid.

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">  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:

function actionName() {
  $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);
  }

I hope, Its help you to add dynamic column into flexigrid table.