title: jqGrid | add-edit-delete buttons not working
body: <p>sorry if my questions are simple , i'm totaly new to jqGrid :)</p>
  
  <p>1- i want to use (add,edit,delete) feature of jqGrid , as you see there are buttons on the footer part of my grid but when i click just a dialog box comes and no fields to enter !! i want it just like <a href="http://www.ok-soft-gmbh.com/jqGrid/MulticolumnEdit.htm" rel="nofollow">this page</a>
  <a href="http://uploadax.com/images/12853732825088553833.png" rel="nofollow">see my screen picture of what happens !</a> </p>
  
  <p>2- what happens when i click on submit button ( after fixing part 1 ) , i want to know how datas post to server!
  no matter what language , i want to not for example they sent as object or sth , to know how to process them !</p>
  
  <p>tnx alot</p>
  
  <p>my source code  :</p>
  
  <pre><code>{% load static %}
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Index Page&lt;/title&gt;
      &lt;!-- external scripts --&gt;
  
      &lt;!-- jQuery &amp; Bootstrap --&gt;
      &lt;script type="text/javascript" src="{% static "js/jquery.js" %}"/&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="{% static "js/jquery.jqGrid.min.js" %}"/&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" media="all" href="{% static "css/bootstrap.min.css?id=1" %}"/&gt;
      &lt;script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"/&gt;&lt;/script&gt;
      &lt;!-- jQuery &amp; Bootstrap --&gt;
  
      &lt;!-- jqGrid --&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui.jqgrid.css" %}" /&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui-lightness/jquery-ui.min.css" %}" /&gt;
      &lt;script type="text/javascript" src="{% static "js/grid.locale-en.js" %}"/&gt;&lt;/script&gt;
      &lt;!-- jqGrid --&gt;
  
      &lt;!-- own implemented scripts --&gt;
      &lt;script type="text/javascript" src="{% static "js/script.js" %}"/&gt;&lt;/script&gt;  
      &lt;!-- own implemented scripts --&gt;
  
      &lt;!-- external scripts--&gt;
  
      &lt;script type="text/javascript"&gt;
      $(function () {
          $("#list").jqGrid({
              url: "http://localhost:8000/getdata",
              datatype: "json",
              mtype: "GET",
              colNames: ["شناسه", "کد","نام", "عنوان" ,"عنوان انگلیسی", "ظرفیت", "ظرفیت اضافه","قیمت روز"],
              colModel: [
                    { name: "id", index:"id", width: 60 , editable:true,editoptions: {readonly: "readonly"}},
              { name: "code", width: 60 , editable:true},
              { name: "name", width: 90 , editable:true},
              { name: "title", width: 90 ,editable:"true", editable:true},
              { name: "english_title", width: 100, align: "left", editable:true },
              { name: "capacity", width: 90, align: "left", editable:true },
              { name: "extra_capacity", width: 90, align: "left", editable:true },
              { name: "today_price", width: 80, align: "left" , editable:true},
              ],
              rowNum:10,
              rowList:[10,20,30],
              pager: '#pager',
              loadonce:true,
              sortname: 'id',
              viewrecords: true,
              sortorder: "desc",
              rownumbers: true,
              rownumWidth: 40,
              gridview: true,
              multiselect: false,
              caption: "اتاق ها",
              onSelectRow: function(ids) {
                  if(ids == null) {
                      ids=0;
                      if(jQuery("#list_d").jqGrid('getGridParam','records') &gt;0 )
                      {
  
                          jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&amp;id="+ids,page:1}).trigger('reloadGrid');
  
                      }
                  } else {
                      jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&amp;id="+ids,page:1}).trigger('reloadGrid');
                  jQuery("#list_d").jqGrid('setCaption',"لیست قیمت اتاق شماره : "+ids)
                  }
              }
       });
      jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,search:false},
       /*   {
                      recreateForm: true,
                      beforeShowForm: function ($form) {
                          $form.find(".FormElement[readonly]")
                              .prop("disabled", true)
                              .addClass("ui-state-disabled")
                              .closest(".DataTD")
                              .prev(".CaptionTD")
                              .prop("disabled", true)
                              .addClass("ui-state-disabled")
                      },
          }, */
       //edit options
         { // Edit option (parameters of editGridRow method)
          recreateForm:true,
          reloadAfterSubmit:true,
          closeOnEscape:true,
          savekey: [true,13],
          closeAfterEdit:true,
          url:'/edit',
          ajaxEditOptions: {
              beforeSend: function(jqXHR) {
                  var csrf_token = getCookie('csrftoken'); 
                  jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
              }
  
          },
              afterSubmit: function () {
               jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
               console.log('changed data type');
               return [true];
           },
          editData: {
              csrfmiddlewaretoken: getCookie('csrftoken')
          }
      },
      //add options
      { 
          recreateForm:true,
          reloadAfterSubmit:true,
          closeOnEscape:true,
          savekey: [true,13],
          closeAfterAdd: true,
          url:'/add',
          ajaxEditOptions: {
              beforeSend: function(jqXHR) {
                  var csrf_token = getCookie('csrftoken'); 
                  jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
              }
          },
              afterSubmit: function () {
               jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
               console.log('changed data type');
               return [true];
           },
          editData: {
              csrfmiddlewaretoken: getCookie('csrftoken')
          }
  
      },
      //delete options
      { 
          recreateForm:true,
          reloadAfterSubmit:true,
          closeOnEscape:true,
          savekey: [true,13],
          url:'/delete',
          ajaxEditOptions: {
              beforeSend: function(jqXHR) {
                  var csrf_token = getCookie('csrftoken'); 
                  jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
              }
          },
          afterSubmit: function () {
               jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
               console.log('changed data type');
               return [true];
           },
          editData: {
              csrfmiddlewaretoken: getCookie('csrftoken')
          }
      }
  
      );
    jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
      jQuery("#list_d").jqGrid({
          height: 100,
      width:345,
          url:'getpricelist?q=1&amp;id=2',
          datatype: "json",
          colNames:['از','تا', 'قیمت'],
          colModel:[
  
      {name:'from',index:'from', width:100},
      {name:'to',index:'to', width:100},
      {name:'price',index:'price', width:80, align:"right"},
  
  
  
          ],
          rowNum:5,
          rowList:[5,10,20],
          pager: '#pager_d',
          sortname: 'item',
          viewrecords: true,
          sortorder: "asc",
          multiselect: false,
          caption:"لیست قیمت"
      }).navGrid('#pager_d',{add:false,edit:false,del:false});
  
          }); 
  
      &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;table id="list"&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
          &lt;div id="pager"&gt;&lt;/div&gt; 
  
          &lt;table id="list_d"&gt;&lt;/table&gt;
          &lt;div id="pager_d"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>views.py  </p>
  
  <pre><code>from django.shortcuts import render
  from django.utils import simplejson
  from django.http import HttpResponse
  from rooms.models import *
  from django.db.models import Q
  from django.core import serializers
  
  
  def index(request):
      return render(request, 'index.html')
  
  def getdata(request):
      data=room_type.objects.all()
      json=[]
  
      for o in data:
          json.append({'id':o.id, 'code':o.code,'name':o.name,'title':o.title, 
                       'english_title':o.english_title, 'capacity':o.capacity,
                       'extra_capacity':o.extra_capacity, 'today_price':o.today_price })
  
      return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )
  
  
  def getpricelist(request):
  
      requested_room_id = request.GET.get('id', '')
  
      room = room_type.objects.get(id = requested_room_id)
      price_list_set = room.price_list_set.all()
  
      json=[]
      for price_list in price_list_set:
          json.append({'from':price_list.from_date, 'to':price_list.to_date, 'price':price_list.price})
  
  
      return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )
  
  def edit(request):
      print "################ediit#################"
      return render(request, 'index.html')
  
  
  def add(request):
      print "################addddddddddd#################"
      return render(request, 'index.html')
  
  
  def delete(request):
      print "################deeeeeeeeeeeeeel#################"
      return render(request, 'index.html')
  </code></pre>