jQuery Grid Plugin - jqGrid

var result = [];

$(document).ready(function () {

   

    $("#AddNewCommon_BandsDialog").dialog({

        width: 500,

        modal: true,

        autoOpen: false,

        buttons: {

            "Save": function () {

              AddNewBands();

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    LoadData();

});

function LoadData() {

    var grid = $("#tblgrid");

    grid.jqGrid({

        url: '../Demo/GetBands',

        loadonce: true,

        datatype: 'json',

        mtype: 'GET',

        postData: {},

        width: 400,

//        width: 750,

        colNames: ['BandID', 'BandName',''],

        colModel: [

                    { name: 'BandID', align: "center", index: 'ID', width: 200, sortable: false , frozen: true },

                    { name: 'BandName', align: "center", index: 'Name', width: 200 ,frozen: false,editable: true, edittype: 'text', editoptions: { maxlength: 3, onKeypress: 'javascript:return ValidDecimal(this, event)'} },

                    { name: 'act', index: 'act', width: 200 ,frozen: false, sortable: false,formatter: ActionFormatter },

          ],

        jsonReader: {

            repeatitems: false

        },

        editurl: '#',

        ignoreCase: true,

        height: '100%',

        rownumbers: true,

        rowNum: 5,

        rowList: [5, 10, 20, 50],

        viewrecords: true,

        sortorder: "desc",

        forceFit: false,

        pgbuttons: true,

        pager: '#dvBands',

        caption: "Bands Detail",

        recordtext: "View Band {0} To {1} Of {2}",

        emptyrecords: "No Record Found",

        shrinkToFit: false

    }).jqGrid('navGrid', '#dvBands',

    {

        search: false, edit: false, add: true, del: true, view: false,

        refresh: false,

        alertcap: "Bands Error",

        alerttext: "<ul style='color:#FF3300'><li>Please select Bands.</li></ul>",

        searchtext: "Search",

        searchtitle: "Search Detail(s)",

        addtitle: "Add Detail",

        addtext: "Add",

        addfunc: AddBands,

//        edittext: "Update",

//        edittitle: "Update Selected Detail",

        /*editfunc: UpdateNew,*/

        viewtext: 'View',

        viewtitle: 'View Selected Bands',

        /*viewfunc: ViewNew,*/

        deltext: 'Delete',

        deltitle: 'Delete Selected Bands',

        delfunc: DeleteBands,

        position: "left"

    },

      {}, // default settings for edit

   {}, // default settings for add

   {}, // delete

   {closeOnEscape: true, multipleSearch: false,

         closeAfterSearch: true }, // search options

   {}

    );

    jQuery("#tblgrid").jqGrid('setFrozenColumns'); 

   

}

function ActionFormatter(cellvalue, options, rowObject) {

    var ret;

     //       var ddd = rowObject.IsSubmissionSubmitted == true ? 1 : 0;

    ret = '<input id = "btnedit' + options.rowId + '" style="height:22px;width:20px;" value="E"COLOR: maroon">');" />';

    ret = ret + "<input id='btnsave" + options.rowId + "' style='height:22px;width:20px;display:none;' type='button' value='S' onclick="javascript:saveBands('" + options.rowId + "');" />";

    ret = ret + "<input id='btncancel" + options.rowId + "' style='height:22px;width:20px;display:none;' type='button' value='C' onclick="cancelcall('" + options.rowId + "');" />";

    return ret;

}

function editcall(cl, drp) {

    jQuery('#tblgrid').editRow(cl);

    $("#btnedit" + cl).css("display", "none");

    $("#btnsave" + cl).css("display", "block");

    $("#btncancel" + cl).css("display", "block");

}

function cancelcall(cl) {

    jQuery('#tblgrid').restoreRow(cl);

    $("#btnedit" + cl).css("display", "block");

    $("#btnsave" + cl).css("display", "none");

    $("#btncancel" + cl).css("display", "none");

   

}

function saveBands(index) {

    jQuery("#tblgrid").jqGrid('saveRow', index);

    var row = $("#tblgrid").jqGrid('getRowData', index);

    var BandIDContent = row.BandID;

    var BandNameContent = row.BandName;

    $.post('../Demo/UpdateBands',

                     { BandID: BandIDContent, BandName: BandNameContent },

                     function (data) {

                         if (data == "True") {

                             LoadData();

                         }

                     });

                     $("#btnedit" + index).css("display", "block");

                     $("#btnsave" + index).css("display", "none");

                     $("#btncancel" + index).css("display", "none");

}

function DeleteBands() {

    debugger;

    var row_id = jQuery("#tblgrid").jqGrid('getGridParam', 'selrow');

    $.post('../Demo/DeleteBands',

                     {BandID:row_id},

                     function (data) {

                         if (data == "True") {

                             LoadData();

                         }

                     });

}

function AddBands() {

    $("#AddNewCommon_BandsDialog").dialog({ title: "Add New Common_Bands" });

    $("#AddNewCommon_BandsDialog").dialog("open");

    $("#AddNewAreaDialog input").css("border-color", "silver");

}

function AddNewBands() {

    var BandName = $("#txtCommon_Bands_BandName").val();

    $("#AddNewCommon_BandsDialog").dialog("close");

    $.post('../Demo/AddBands',

                     { BandName: BandName },

                     function (data) {

                         if (data == "True") {

                             LoadData();

                         }

                     });

}

function ValidDecimal(objTextbox, event) {

    //Allows 0 to 9 and only one .(46)

    var keyCode = (event.which) ? event.which : (window.event) ? window.event.keyCode : -1;

    if (keyCode >= 48 && keyCode <= 57 || keyCode == 46) {

        if (keyCode == 46) {

            if (objTextbox.value.indexOf(".") == -1)

                return true;

            else

                return false;

        }

        else

            return true;

    }

    if (keyCode == 8 || keyCode == -1) {

        return true;

    }

    else {

        return false;

    }

}