Click here to Skip to main content
15,887,477 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
XML
<link rel="Stylesheet" type="text/css" media="screen" href="Themes/redmond/jquery-ui.css" />
     <link rel="Stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
      <link rel="stylesheet" href="css/jdpicker.css" type="text/css"/>
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="js/jquery.json-2.4.js"></script>
     <script type="text/javascript" src="js/grid.locale-en.js"></script>
     <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
     <script type="text/javascript" src="js/jquery.jqGrid.src.js"></script>

    <%-- <script type="text/javascript" src="js/jquery.summaryjqGrid.min.js"></script>--%>

        <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
       <script type="text/javascript" src="js/jquery.jdpicker.js"></script>


 <script type="text/javascript">
            $(document).ready(function () {

                $("#go").click(function () {
                    $("#gridId").GridUnload();
                    gridload();
                });
            });
            function gridload() {
                $.ajax({
                    url: 'Uploading111.aspx/MyMethod?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val(),
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    type: 'POST',
                    success: function (ReportDataNew, textStatus, XMLHttpRequest) {
                        //debugger;
                        gridData = JSON.parse(ReportDataNew.d);
                        //console.log(gridData);
                        //alert(gridData.length);
                        $("#gridId").jqGrid({
                            data: gridData,
                            datatype: "local",
                            height: '100%',
                            hidegrid:true,    
                            rowNum: 20,
                            colNames: ['UserName','WWID', 'DepName', 'MailId', 'CostCenter', 'Batch','Groups','MonthlyQuota', 'Authcode', 'Extension','Mobile', 'Landline','CampusCode','Generic','Mac'],
                            colModel: [
                                { name: 'UserName', index: 'UserName', key: true, width: '200', editable: true,sortable: true, align: 'center' },
                                { name: 'WWID', index: 'WWID', width: '250' , editable: true, sortable: true,sorttype:'int', align: 'center' },
                                { name: 'DepName', index: 'depName', width:'200',  editable: true, sortable: true,sorttype:'text', align: 'center' },
                                { name: 'MailId', index: 'MailId', width:'400', editable: true, sortable: true,sorttype:'text', align: 'center' },
                                { name: 'CostCenter', index: 'Costcenter', width:'200',  editable: true, sortable: true,sorttype:'int', align: 'center' },
                                { name: 'Batch', index: 'Batch', width:'200',  editable: true, sortable: true,sorttype:'text', align: 'center' },
                                { name: 'Groups', index: 'Groups', width:'200',  editable: true, sortable: true,sorttype:'text', align: 'center' },
                                { name: 'MonthlyQuota', index: 'MonthlyQuota', width:'250',  editable: true,sortable: true,sorttype:'text', align: 'center' },
                                { name: 'Authcode', index: 'Authcode', width:'200', editable: true, sortable: true,sorttype:'int', align: 'center' },
                                { name: 'Extension', index: 'Extension', width:'200', editable: true, sortable: true,sorttype:'int', align: 'center' },
                                { name: 'Mobile', index: 'Mobile', width:'300',  editable: true, sortable: true,sorttype:'int', align: 'center' },
                                { name: 'Landline', index: 'Landline', width:'300',  editable: true, sortable: true,sorttype:'int', align: 'center' },
                                { name: 'Businessunit', index: 'Businessunit', width:'300',  editable: true,sortable: true,sorttype:'text', align: 'center' },    
                                { name: 'Generic', index: 'generic', width:'200', editable: true, sortable: true,sorttype:'text', align: 'center' },
                                { name: 'Mac', index: 'mac', width:'200',  editable: true, sortable: true,sorttype:'int', align: 'center' },
                            ],
                            pager: '#gridpager',
                            viewrecords: true,
                            toppager: true,
                            loadtext: 'Loading...',
             });
                          jQuery("#gridId").jqGrid('navGrid', '#gridpager',
            { edit: true, add: true, del: true, search: true, excel: true, exceltext: 'Excel', cloneToTop: true },
            { url: "Uploading.ashx", closeAfterEdit: true,afterSubmitCell: function () { $('#gridId').trigger('reloadGrid');}},
            { url: "Uploading.ashx", closeAfterAdd: true },
            { url: "Uploading.ashx", closeAfterDel: true },
            { closeAfterSearch: true, closeOnEscape: true, multipleSearch: false });
//                        $('#gridId').jqGrid('navGrid', '#gridpager',
//                        { edit: true, add: true, del: true,search:false, view: false, searchtext: "Search", cloneToTop: true },
//                        { url: "editupdel.ashx", closeAfterEdit: true, afterSubmitCell: function () { $('#gridId').trigger('reloadGrid');}},
//                         { url: "editupdel.ashx", closeAfterAdd: true}, 
//                         { url: "editupdel.ashx", closeAfterdel: true},
//                          { caption: "Search", closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, overlay: false })

                        
            

            $("#gridId").jqGrid('navButtonAdd', '#gridpager', { caption: "Columns", title: "Reorder Columns",  onClickButton: function () { $("#gridId").jqGrid('columnChooser',{shrinkToFit:false,autowidth: true}); } });
        
            $("#gridId").jqGrid('gridResize', { minWidth: 250, maxWidth: 1800, minHeight: 80, maxHeight: 1350 });

                        jQuery("#gridId").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "eq" });
                         jQuery("#gridId").jqGrid('navButtonAdd', '#gridpager', { caption: "Filter", title: "Toggle Searching Toolbar", buttonicon: 'ui-icon-pin-s', onClickButton: function () { $("#gridId")[0].toggleToolbar(); } });
                         jQuery("#gridId")[0].toggleToolbar();
                    },
                    error: function (xhr, ajaxOptions, thrownError) { alert('statusCode=Error: ' + xhr.status + '&status=Description :' + thrownError); }
                });
            }
Posted
Comments
virusstorm 14-Aug-13 14:40pm    
Without explaining what you are trying to accomplish, no one will be able to help you.
Roopa 10064853 16-Aug-13 0:26am    
sir i want all add,edit,delete and search function to work

1 solution

href="Themes/flick/jquery-ui.css" /> this theme works for all options and also see that all js and css are there

XML
<link rel="Stylesheet" type="text/css" media="screen" href="Themes/flick/jquery-ui.css" />
    <link rel="Stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
     <link rel="stylesheet" href="css/jdpicker.css" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.json-2.4.js"></script>
    <script type="text/javascript" src="js/grid.locale-en.js"></script>
    <script type="text/javascript" src="js/jquery.jqGrid.src.js"></script>
      <script type="text/javascript" src="js/jquery-jqgrid.fmatter.js"></script>

       <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
      <script type="text/javascript" src="js/jquery.jdpicker.js"></script>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900