jqgrid example

<script type="text/javascript">
  {% if sub_show_hr_flag %}
    jQuery(document).ready(function(){
      var last_selected_row;
      last_selected_row = -99;
      jQuery("#grid").jqGrid({
          url:'{{ json_data_handler }}?year={{ get_param_year }}&month={{ get_param_month }}&project_id={{ get_param_project_id }}',
          datatype: "json",
          mtype: 'GET',
          colNames:['hour_record_pk', 'project_pk', 'WD', 'date', 'sum', 'description', 'WP'],
          colModel:[
                    {name:'hour_record_pk',index:'hour_record_pk', width:25, hidden:true, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
                    {name:'project_pk',index:'project_pk', width:25, hidden:true, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
                    {name:'weekday',index:'weekday', width:40, editable:false, sortable:false},
                    {name:'date_str',index:'date_str', width:90, editable:true, sortable:false, editoptions:{readonly:true}},
                    {name:'sum',index:'sum', width:45, editable: true, sortable:false, editrules:{number:true, minValue:0, maxValue:24, required:true}},
                   //{name:'sum',index:'sum', width:90, editable: true, sortable:false, edittype:"select", editoptions:{required:true,value:"0:0;0.5:0.5;1:1;1.5:1.5;2:2;2.5:2.5;3:3;3.5:3.5;4:4;4.5:4.5;5:5;5.5:5.5;6:6;6.5:6.5;7:7;7.5:7.5;8:8;8.5:8.5;9:9;9.5:9.5;10:10;10.5:10.5;11:11;11.5:11.5;12:12;12.5:12.5;13:13;13.5:13.5;14:14;14.5:14.5;15:15;15.5:15.5;16:16"}},
                    {name:'description',index:'description', width:990, editable:true, sortable:false, editoptions: {required:true, maxlength: 200}},
                    {name:'work_place',index:'work_place', width:50, editable: true, sortable:false, edittype:"select", editoptions:{required:true,value:"{{ work_place_dropdown }}"}},
               ],
          jsonReader : {
              repeatitems:false
          },

          rowNum:{{ row_num }},
          //pager: jQuery('#gridpager'),
          sortname: 'id',
          viewrecords: true,
          cellsubmit: 'remote', //this is new. check if it works!!!
          checkInput: true, //this is new. check if it works!!!
          sortorder: "asc",
          width: 975,
          //autowidth: true,
          height: {{ height }},
          caption:"Hour Record Overview for {{ project.projectclassification.is_internal|yesno:"internal,external" }} project: {{ project }} - in Month: {{ get_param_month }} - in Year: {{ get_param_year }} ",
          reloadAfterEdit: true, //seems to have no effect
          reloadAfterSave: true, //seems to have no effect

         {% ifequal is_active_param 1 %}
            {% ifequal state 0 %}

             onSelectRow: function(row_id){ //if hour records already part of an invoice hide this lines
                 if(row_id != null) {
                    var date_str = jQuery('#grid').getCell(row_id, 'date_str');
                    //var sum = jQuery('#grid').getCell(row_id, 'sum');
                    var description = jQuery('#grid').getCell(row_id, 'description');
                    if(date_str != "Total"){
                        if(row_id !== last_selected_row) {
                            if(row_id == -99){
                                //thats the first click of the user after initial load of the grid
                                jQuery('#grid').jqGrid('saveRow',row_id)
                                   .editRow(row_id, true,true,reload);
                                last_selected_row = row_id;
                            }
                            else{
                                 //after user jumps from one cell to another using the mouse
                                jQuery('#grid').jqGrid('saveRow',last_selected_row,reload);

                                jQuery('#grid').jqGrid('restoreRow',last_selected_row);
                                last_selected_row = row_id;

                            }
                        } else {
                                //if the user clicks in another cell save the last edited cell - does not work yet

                                //jQuery('#grid').jqGrid('saveRow',last_selected_row,reload);
                                //jQuery('#grid').jqGrid('editRow',row_id, true,false,reload);
                                jQuery('#grid').jqGrid('saveRow',row_id)
                                   .editRow(row_id, true,true,reload);
                                last_selected_row=row_id;
                        }
                    }
                  }
                 else{
                      alert("row id == null");
                      }
                },
               editurl:"{% url set_hour_record_json_set %}",
             {% endifequal %}
          {% endifequal %}

          afterInsertRow:function (rowid, aData){
                    var currentTime = new Date();
                    var month = currentTime.getMonth() + 1;
                    if(month < 10){
                        month = "0" + month;
                    }
                    var day = currentTime.getDate();
                    if(day < 10){
                        day = "0" + day;
                    }
                    var year = currentTime.getFullYear();
                    var actual_date_str = year + "-" + month + "-" + day;

                    var cont = jQuery('#grid').getCell(rowid, 'weekday');
                    var date_str = jQuery('#grid').getCell(rowid, 'date_str');

                    if(cont == "Sa" || cont == "Su"){
                        jQuery('#grid').setCell(rowid,"description",'',{background:'#DCDCDC', 'border-color':'#808080'})
                        jQuery('#grid').setCell(rowid,"date_str",'',{background:'#DCDCDC', 'border-color':'#808080'})
                        jQuery('#grid').setCell(rowid,"sum",'',{background:'#DCDCDC', 'border-color':'#808080'})
                        jQuery('#grid').setCell(rowid,"weekday",'',{background:'#DCDCDC', 'border-color':'#808080'})
                        jQuery('#grid').setCell(rowid,"work_place",'',{background:'#DCDCDC', 'border-color':'#808080'})
                    }
                    if(cont == "Fr"){
                        jQuery('#grid').setCell(rowid,"description",'',{'border-bottom-color':'#808080'})
                        jQuery('#grid').setCell(rowid,"date_str",'',{'border-bottom-color':'#808080'})
                        jQuery('#grid').setCell(rowid,"sum",'',{'border-bottom-color':'#808080'})
                        jQuery('#grid').setCell(rowid,"weekday",'',{'border-bottom-color':'#808080'})
                        jQuery('#grid').setCell(rowid,"work_place",'',{'border-bottom-color':'#808080'})
                    }
                    if(date_str == "Total"){
                        jQuery('#grid').setCell(rowid,"date_str",'',{background:'#DCDCDC', 'color':'#000000', 'font-weight':'bold', 'vertical-align':'middle'})
                        jQuery('#grid').setCell(rowid,"sum",'',{background:'#DCDCDC', 'color':'#00BFFF', 'font-weight':'bold', 'vertical-align':'middle' })
                        jQuery('#grid').setCell(rowid,"description",'',{background:'#DCDCDC', 'color':'#000000', 'font-weight':'bold', 'vertical-align':'middle' })
                        jQuery('#grid').setCell(rowid,"weekday",'',{background:'#DCDCDC', 'color':'#000000', 'font-weight':'bold', 'vertical-align':'middle' })
                        jQuery('#grid').setCell(rowid,"work_place",'',{background:'#DCDCDC', 'color':'#000000', 'font-weight':'bold', 'vertical-align':'middle' })
                    }
                    if(date_str == actual_date_str){
                        jQuery('#grid').setCell(rowid,"date_str",'',{'color':'#FF3300', 'vertical-align':'middle'})
                        jQuery('#grid').setCell(rowid,"sum",'',{'color':'#FF3300', 'vertical-align':'middle' })
                        jQuery('#grid').setCell(rowid,"description",'',{'color':'#FF3300', 'vertical-align':'middle' })
                        jQuery('#grid').setCell(rowid,"weekday",'',{'color':'#FF3300', 'vertical-align':'middle' })
                        jQuery('#grid').setCell(rowid,"work_place",'',{'color':'#FF3300', 'vertical-align':'middle' })
                    }
                    jQuery('#grid').setCell(rowid,"date_str",'',{'text-align':'center', 'vertical-align':'middle'})
                    jQuery('#grid').setCell(rowid,"sum",'',{'text-align':'center', 'vertical-align':'middle'})
                    jQuery('#grid').setCell(rowid,"weekday",'',{'text-align':'center', 'vertical-align':'middle'})
                    jQuery('#grid').setCell(rowid,"work_place",'',{'text-align':'center', 'vertical-align':'middle'})
                    jQuery('#grid').setCell(rowid,"description",'',{'text-align':'left', 'vertical-align':'middle'})
                },
        beforeSaveCell : function(rowid,celname,value,iRow,iCol){
                    alert('heyyyy');
                    return "new value";

            },
        beforeSubmitCell : function(rowid,celname,value,iRow,iCol){
                    alert('heyyyy2');
                    return "new value";

            },
        beforeEditCell : function(rowid,celname,value,iRow,iCol){
                    alert('heyyyy3');
                    return "new value";

            },

     }).navGrid('#gridpager');
    });

    function reload() {
        $("#grid").trigger("reloadGrid");
        }
    {% endif %}
</script>