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,

There are following steps to needed for dynamic columns.

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

 '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 : " 'controllername', 'action' => 'actioname.json')); ?>",
            dataType : 'json',
            striped : true,
			qtype : jQuery('#itemdetails_id').val(),
            colModel : ,
            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 : '  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.

  • 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