How to fill jqgrid plugin

Quote:

here i have used jqgrid plugin for displayig the data from database. the data which will be filled is come througn ajax call. i have got the data on console. but it does not filled into grid plugin.

here what i have tried is

<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
		<table id="grid-table"></table>

		<div id="grid-pager"></div>
		
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->


<script type="text/javascript">
	
			// var grid_data =[];
			 		$.ajax({
						url: 'getdata.php',
						type: 'POST',
						async: false,
						dataType: 'json',
						cache: 'false',
						success: function(data){
						 grid_data = JSON.stringify(data)
						
						}
					});
			
			var grid_data = grid_data;
			console.log(grid_data);
jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
				
				}
			    })
			jQuery(grid_selector).jqGrid({
					//direction: "rtl",
			
					//subgrid options
					//subGrid : true,
					//subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }],
					//datatype: "xml",
					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"
					},
					
					data: grid_data,
					
					datatype: "json",
					height: 250,
					colNames:[' ', 'ID','Title','Date', 'Status'],
					//colNames:[' ', 'ID','Name'],
					colModel:[
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								//delbutton: false,//disable delete button
								
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
								//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						},
						{name:'id',index:'id', width:60, sorttype:"int", editable: true},
						{name:'name',index:'name',width:90, editable:true, sorttype:"date",unformat: pickDate},
						{name:'date',index:'date', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'status',index:'status', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
					], 
			
					viewrecords : true,
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,
					altRows: true,
					//toppager: true,
					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,
			
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
					editurl: "./dummy.php",//nothing is saved
					caption: "jqGrid with inline editing"
			
					//,autowidth: true,
			
			
				});