Wednesday, December 31, 2014

JQuery-Plugin, JQGrid

JQ Grid is excellent alternative of the ASP.NET GridVIew.
http://www.trirand.net/demo/aspnet/webforms/jqgrid/

title = "My Software Assets";
        var grid = $("#softwaregrid");
        $("#softwaregrid").jqGrid(
                {
                    prmNames: { search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" },
                    postData: { searchString: '', searchField: '', searchOper: '', hiearchy: JSON.stringify(locselection) },
                    datatype: function (postdata) {
                        if (locselection != "MyAssets")
                        {
                            GetSelections();
                        }
                        //alert(JSON.stringify(locselection));
                        $('#softwaregrid').setGridParam({ postData: { hiearchy: JSON.stringify(locselection)} });
                        mtype: "GET", $.ajax({ url: L_Menu_BaseUrl + "/_layouts/XXX/Pages/SwassetService.aspx/GetReports1SoftwareData",
                            type: "POST",
                            async: false,
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify(postdata),
                            dataType: "json",
                            success: function (data, st) {

                                if (st == "success")
                                {
                                    var grid = jQuery("#softwaregrid")[0];
                                    grid.addJSONData(JSON.parse(data.d));
                                }
                            },
                            error: function () { alert("Error with AJAX callback"); }
                        });
                    },
                    jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", userdata: "userdata", repeatitems: true },                
                    colNames: ['Select', 'ID', 'Title', 'Description', 'Category', 'Terminal', 'Region', 'Supplier'],                 
                    colModel: [
                    { name: 'Select', index: 'id', search: false, hidden: true },
                    { name: 'ID', index: 'id', search: false, hidden: true },
                                                                                { name: 'Title',width: '140px',index: 'a.SoftwareTitle', searchoptions: { sopt: ['cn'] }, hidden: false },
                   
                                                                                {name: 'Description', width: '290px', index: 'a.Description', search: false },
                                                                                {name: 'Category', width: '80px', index: 'b.Name', searchoptions: { sopt: ['cn']} },
                                                                                { name: 'Terminal', width: '215px', index: 'a.Terminal', search: false },
                                                                                { name: 'Region', width: '50px', index: 'a.Region', search: false },
                                                                                { name: 'Supplier', width: '115px', index: 'e.Name', search: false },
                                                                                //{ name: 'Delete', width: '50px', index: 'Delete', search: false }//Naveed SW
                                                                                ],

                    rowNum: 5,
                    rowList: [5, 10, 30,50,100],//Naveed SW
                    //width: '800px',
                    height: '300px',
                    //scrollOffset: 0,                          
                    autowidth: true,
                                multiselect: true,
                    //autoheight:true,
                    shrinkToFit: false,
                    forceFit: true,
                    pager: jQuery("#softwarePager"),
                    sortname: "a.ID",
                    sortorder: "asc",
                                onSelectRow: function (id, status) {
                               
                                                if (!status)
                                                {
                                                                if ($("#jqg_softwaregrid_" + id)[0].checked)                       //Naveed SW   
                                                                {
                                                                                $("#softwaregrid").jqGrid('setSelection', id,false);
                                                                }
                                                }
                                },                            
                                del : {
                                                                caption: "ff",
                                                                msg: "Delete  record(s)?",
                                                                bSubmit: "Delete",
                                                                bCancel: "Cancel"
                                                },                                            
                    ondblClickRow: function (rowid) {
                        var win = window.open("createasset.aspx?assetid=" + rowid, '_blank');
                        win.focus();
                    },
                    viewrecords: true, caption: title
                }).jqGrid('navGrid', "#softwarePager", { edit: false, add: false, del: true, search: true, refresh: true, closeAfterSearch: true, searchtext: "Filter", refreshtext: "Refresh",deltext:"Delete" , deltitle: "Delete selected row(s)"},{},{},
                                                {
              url: '#',
              onclickSubmit: function (postdata) {
                                                                DeleteSoftwares();
                                                                return {};
             },
                                                 reloadAfterSubmit:true,
                                                 beforeShowForm: function(form)
                                                                {
                                                                  $("#delmodsoftwaregrid")[0].style.left="581px"
                                                                  $("#delmodsoftwaregrid")[0].style.top="220px"
                                                                }
                                                }
                //            ).hideCol('cb');//Naveed SW
                                );
                                $('#softwaregrid').trigger( 'reloadGrid');
    }
function DeleteSoftwares()
{
var swselection = [];
$(".cbox:checkbox:checked").each(function () {/
        swselection.push(this.name.substr(this.name.lastIndexOf("_")+1, this.name.length-1));
    })
var url=location.protocol + "//" + location.host + L_Menu_BaseUrl;

$.ajax(
                {
                    type: "POST",
                    url:L_Menu_BaseUrl + "/_layouts/XXX/Pages/SwassetService.aspx/DeleteSoftwares",
                    data: "{'softwares' : '" + JSON.stringify(swselection)+ "','url' : '" + url + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    cache: false,
                    success: function (msg) {

}
}
);
}

No comments: