$(function(){ 
    var taskid = 1, grid = $('<Table>', {id: 'Table_'+taskid}), pager =$('<div>', {id: 'Pager_'+taskid});
    $("#tabs-"+taskid,"#tabs").append(grid).append(pager);
 
    var urldata = "jqgrid?query="+encodeURIComponent($.ajax({url:url, async:false,type:"POST", dataType:"text", data:{pageName:pagename, TASK_ID:"%"}}).responseText);
    var scriptid = 0, dialogedit = $('<div>', {id: 'dialog-edit_'+taskid});
    var newrow = function (){
        dialogedit.dialog( "open" );
    };   
    var editrow = function (aTable,id){
        dialogedit.dialog( "open" );
    };
    var delrow = function (aTable,id){
        dialogedit.dialog( "open" );
    };
    grid.jqGrid({
        url: urldata,
        datatype: 'xml',
        mtype: 'POST',
        colNames: ['TASK_ID','TASK_NAME','ROLE_ID'],
        colModel: [
            {name:'TASK_ID', index:'TASK_ID', align:"right",  width:"4%",editable:true, searchoptions:{sopt:['eq','ne','ge']}},
            {name:'TASK_NAME', index:'TASK_NAME', width:"20%",editable:true, searchoptions:{sopt:['eq','ne']}},
            {name:'ROLE_ID', index:'ROLE_ID', align:"right", width:"4%",editable:true, searchoptions:{sopt:['eq','ne','ge']}}
        ],
        autowidth: true,
        rownumbers: true,
        loadui: 'block' ,
        height: '550',
        rowNum: 20,
        rowList: [10,20,50,100],
        sortname: 'TASK_ID',
        sortorder: 'asc',
        viewrecords: true,
        caption: 'Grid',
        search: true,
        pager: pager,
        loadError: function(xhr,st,err){
            alert("Error :" + st + "\n" + xhr.responseText);
        },
        beforeSelectRow: function (rowid){
            $("#Table_manb").removeClass('ui-state-disabled');
            $("#Table_delb").removeClass('ui-state-disabled');
            $("#Table_editb").removeClass('ui-state-disabled');
            return true; //allow selection or unselection
        }
    });
    grid.jqGrid('navGrid', "#Pager_1", {edit:false, add:false, del:false, search:true, refresh:false, excel:true, refreshstate:"current", 
        beforeRefresh: function(){
            grid.setGridParam({url : getquery()}).trigger('reloadGrid');
        }},
        {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true, showQuery:true, recreateFilter:true,
            "tmplNames": ["Users"], //set the names of the template
            "tmplFilters": [defaulttemplate] //set the template contents
        } //search options
    )
        .navSeparatorAdd(pager,{sepclass : "ui-separator",sepcontent: '',position:'first'})
        .navButtonAdd(pager, {caption:"", title:"Refresh", buttonicon:'ui-icon-refresh', id:'Table_refreshb', position:'first', onClickButton:function(){grid.trigger('reloadGrid');}})
        .navButtonAdd(pager, {caption:"", title:"Delete", buttonicon:'ui-icon-trash', id:'Table_delb', position:'first', onClickButton:function(){delrow(grid, grid.jqGrid('getGridParam', 'selrow'));}})
        .navButtonAdd(pager, {caption:"", title:"Edit", buttonicon:'ui-icon-pencil', id:'Table_editb', position:'first',onClickButton:function(){editrow(grid, grid.jqGrid('getGridParam', 'selrow'));}})
        .navButtonAdd(pager, {caption:"", title:"Add", buttonicon:'ui-icon-plus', position:'first', id:'Table_addb', onClickButton:function(){dialogedit.dialog("open");}})
        .navSeparatorAdd(pager, {sepclass:"ui-separator", sepcontent:'',position:'last'})
        .navButtonAdd(pager, {caption:"", title:"Report", buttonicon:'ui-icon-print', id:'Table_printb', position:'last', onClickButton:function(){printrow(grid, grid.jqGrid('getGridParam', 'selrow'));}})
        .navButtonAdd(pager, {caption:"", title:"Setting", buttonicon:'ui-icon-gear', id:'Table_settingsb', position:'last', onClickButton:function (){grid.jqGrid('columnChooser');}});

    grid.jqGrid('gridResize', {minWidth:450, minHeight:150});

    $("#Table_delb").addClass('ui-state-disabled');
    $("#Table_editb").addClass('ui-state-disabled');
    $("#Table_printb").addClass('ui-state-disabled');
});