Listing Pages with Grid

Setting Up Data Listing Pages with Grid

To list data in Control Panel pages, AbanteCart utilise jqGrid (by Tony Tomov, www.trirand.com/blog). This approach is unified and applied on all pages that use data listing. There is a standard interface to jqGrid that is set up as child controller. Any new page building data listing needs to include jqGrid controller and child and build data and settings. Settings are pass to controller directly and data loaded by jqGrid controller via remote ajax call to response controller.

Main idea for this concept is to prepare the format and settings for the fata and load actual data based on set format and settings. Main page controller is responsible for building data format and settings and remote AJAX controller will prepare and provide the data to be listed in the grid. Grid controller that is a common “blackbox” element shared by everybody, will display the data in a format requested.

Bellow is the description of the settings and data provided to grid controller: There are 2 parts to grid: main page controller and ajax (response) controller

Main Page controller
This controller includes grid as a child and prepare all the settings for the grid to give it a desired state. Settings include, list of fields, actions, search values, and edit/view restrictions.

All settings are set into one array that will be passed to child listing_grid controller.

Here is the process based on the example how to include grid to the main controller:

First you need to provide main settings for grid to operate. These include table name (table_id), URL, edit action URL, Default sort column, actions allowed for each row.

$grid_settings = array(
   		 'table_id' => 'lang_definition_grid',
   		 'url' => $this->html->getSecureURL('listing_grid/language_definitions'),
   		 'editurl' => $this->html->getSecureURL('listing_grid/language_definitions/update'),
        	'update_field' => $this->html->getSecureURL('listing_grid/language_definitions/update_field'),
   		 'sortname' => 'module',
        		'actions' => array(
            		'edit' => array(
                		'text' => $this->language->get('text_edit'),
   			 'href' => $this->html->getSecureURL('localisation/language_definitions/update', '&language_definition_id=%ID%')
            		),
            		'delete' => array(
                		'text' => $this->language->get('button_delete'),
            		),
            		'save' => array(
                		'text' => $this->language->get('button_save'),
            		),
        	),
   	 );

You need to specify column names and settings per each column.
You can set name, index, width, sorttype, align, and more. By default, if you do not set any width, it will be automatic (recommended). If you set the width, you need to set width for every column.
For more settings options for jqGrid, you can refer to www.trirand.com/blog

//Set column names and order
$grid_settings['colNames'] = array(
            			$this->language->get('column_module'),
			$this->language->get('column_key'),
			$this->language->get('column_translation'),
		);
//Set column definition 
		$grid_settings['colModel'] = array(
			array(
				'name' => 'module',
				'index' => 'module',
                			'align' => 'center',
				'sorttype' => 'string',
			),
           			 array(
				'name' => 'language_key',
				'index' => 'language_key',
				'align' => 'center',
				'sorttype' => 'string',
			),
			array(
				'name' => 'language_value',
				'index' => 'language_value',
                			'align' => 'center',
				'sorttype' => 'string',
               				 'sortable' => false,
			),
);
		//Load grid child controller and get result 
      	  	$grid = $this->dispatch('common/listing_grid', array( $grid_settings ) );
		$this->view->assign('listing_grid', $grid->dispatchGetOutput());

Additional parameters and settings:
You can specify the master search form that will show above the grid and can perform specific searches and update the list result

$form = new AForm();
    	$form->setForm(array(
   	 	'form_name' => 'lang_definition_grid_search',
    	));

    	$listing_data['search_form']['id'] = 'lang_definition_grid_search';
    	$listing_data['search_form']['form_open'] = $form->getFieldHtml(array(
   	 	'type' => 'form',
   	 	'name' => 'lang_definition_grid_search',
   	 	'action' => '',
    	));
    	$listing_data['search_form']['submit'] = $form->getFieldHtml(array(
   	 	'type' => 'button',
   	 	'name' => 'submit',
   	 	'text' => $this->language->get('button_go'),
   	 	'style' => 'button',
    	));

    	$listing_data['search_form']['fields']['language_key'] = $this->language->get('entry_language_key') . $form->getFieldHtml(array(
   	 	'type' => 'input',
   	 	'name' => 'language_key',
    	));
    	$listing_data['search_form']['fields']['section'] = $this->language->get('entry_section') . $form->getFieldHtml(array(
   	 	'type' => 'selectbox',
   	 	'name' => 'section',
        	'options' => array(
            		'' => $this->language->get('text_select'),
            		1 => $this->language->get('text_admin'),
            		0 => $this->language->get('text_storefront'),
        		),
    	));

Ajax (response) controller

This controller builds data set for the grid to display. Grid does the remote (separate) HTTP(S) call to load the data.

Here is the process based on the example how to build data set and provide it to the gird: …..

Main grid controller: admin\controller\common\listing_grid.php

For more details to data format check jqGrid manuals: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data