display dynamic data in JQgrid in Codeigniter

Question

I am working on a CodeIgniter project. In the project I am using a JQgrid table. I want to display data using JQgrid. I get the data from a database, but I am not able to display the data in JQgrid, but I can display the data in a TextArea.

Model file

public function getmodeldata()
{
    $query=$this->db->get('model');
    $data = json_encode($query->result());
    return $data;
}

Controller file

public function model()
{
  $data['brand']=$this->Admin_model->getbranddata();
  $data['getmodel']=$this->Admin_model->getmodeldata();
  $this->load->view('layouts/header');
  $this->load->view('Admin/model',$data);
  $this->load->view('layouts/footer');
}

View file

<textarea id="data"><?php echo $getmodel?></textarea>

<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="assets/js/jquery.jqGrid.min.js"></script>
<script src="assets/js/grid.locale-en.js"></script>
<script type="text/javascript">
    var grid_data = jQuery('#data').val();

    var subgrid_data = [];
    jQuery(function($) {
        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";


        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
    })

        $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
            if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
                //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                setTimeout(function() {
                    $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
                }, 20);
            }
        })

        jQuery(grid_selector).jqGrid({
            subGrid : false,
            subGridOptions : {
                plusicon : "ace-icon fa fa-plus center bigger-110 blue",
                minusicon  : "ace-icon fa fa-minus center bigger-110 blue",
                openicon : "ace-icon fa fa-chevron-right center orange"
            },
            subGridRowExpanded: function (subgridDivId, rowId) {
                var subgridTableId = subgridDivId + "_t";
                $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
                $("#" + subgridTableId).jqGrid({
                    datatype: 'local',
                    data: subgrid_data,
                    colNames: ['No','Item Name','Qty'],
                    colModel: [
                        { name: 'id', width: 50 },
                        { name: 'name', width: 150 },
                        { name: 'qty', width: 50 }
                    ]
                });
            },
            data: grid_data,
            datatype: "json",
            height: 250,
            colNames:['Action', 'ID','Name', 'Created Date'],
            colModel:[
                {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
                    formatter:'actions', 
                    formatoptions:{ 
                        keys:true,
                        delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
                    }
                },
                {name:'id',index:'id', width:60, sorttype:"int", editable: false},
                {name:'model_name',index:'model_name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
                {name:'created_at',index:'created_at', width:150, sortable:false,editable: false} 
            ], 

            viewrecords : true,
            rowNum:10,
            rowList:[10,20,30],
            pager : pager_selector,
            altRows: true,      
            multiselect: true,
            multiboxonly: true,

            loadComplete : function() {
                var table = this;
                setTimeout(function(){
                    styleCheckbox(table);

                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            },

            editurl: "./dummy.php",
            caption: "jqGrid with inline editing"

        });
        $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size


</script>

Answer 1

If your data comes as json string like you do, you will need to replace

data: grid_data,
datatype: "json",

with

datastr: grid_data,
datatype: "jsonstring",