Click here to Skip to main content
11,639,765 members (61,227 online)
Click here to Skip to main content

Advanced JQX Grid With All Functionality

, 21 Oct 2014 CPOL 13.7K 259 23
Rate this:
Please Sign up or sign in to vote.
Advanced JQX Grid With All Functionality

Editorial Note

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

Introduction

If you are new to the term JQX Grid , Please read here http://www.codeproject.com/Tips/828806/Working-With-JQX-Grid-With-Filtering-And-Sorting . If you need to bind the datasource dynamically , please read here http://www.codeproject.com/Tips/830309/Convert-CellSet-to-HTML-table-And-From-HTML-to-Jso .For the past days I am working on JQX Grid. Now I am going to share that Grid with all the functionality.

Background

In my previous article, one member asked for some functionality. So I thought of sharing those info. Please be noted that i have not implemented all the functionalities. I have selected some important features which we may use in our programming life.

Using the code

As we discussed in the previous articles, We need a web application with all the contents of JQX Widgets (

http://www.codeproject.com/Tips/828806/Working-With-JQX-Grid-With-Filtering-And-Sorting)

What Is JQX Grid ?

jqxGrid is powerful datagrid widget built entirely with open web standards. It offers rich functionality, easy to use APIs and works across devices and browsers. jqxGrid delivers advanced data visualization features and built-in support for client and server-side paging, editing, sorting and filtering.

What we need ?

Simple HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>   
</head>
<body>    
</body>
</html>

Include the extra UI elements

<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
        <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
                <br /><br />
                <input type="button" value="Export to XML" id='xmlExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to CSV" id='csvExport' />
                <br /><br />
                <input type="button" value="Export to TSV" id='tsvExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to HTML" id='htmlExport' />
                <br /><br />
                <input type="button" value="Export to JSON" id='jsonExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Print" id='print' />
            </div>
        </div>
    </div>
</body>

Include Links

    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>  
    <script src="jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>   
    <script src="jqwidgets/jqxgrid.edit.js" type="text/javascript"></script>
    <script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>
    <script src="jqwidgets/jqxgrid.columnsreorder.js" type="text/javascript"></script>
    <script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>
    <script src="jqwidgets/jqxdata.export.js" type="text/javascript"></script>

What we add new?

<script src="jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>  

This script is for adding the functionality of Paging Smile | :) . You can add the functionality to the grid as pageable: true

And if you want different stylish paging you can set like this

pagermode: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'simple'</span>,
<script src="jqwidgets/jqxgrid.edit.js" type="text/javascript"></script>

This script is for adding the functionality of Editing Smile | :) . You can add the functionality to the grid as editable: true

 <script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>
 <script src="jqwidgets/jqxgrid.columnsreorder.js" type="text/javascript"></script>

This scripts are for adding the functionality of Hierarchy columns. If we want to separate the data in column header you can include these scripts .

 <script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>
 <script src="jqwidgets/jqxdata.export.js" type="text/javascript"></script>

When you want to export your grid to any formate, please include this scripts. You can implement the same just like the following

            $("#excelExport").jqxButton({ theme: theme }); //Assign styles to the button 
            $("#xmlExport").jqxButton({ theme: theme });
            $("#csvExport").jqxButton({ theme: theme });
            $("#tsvExport").jqxButton({ theme: theme });
            $("#htmlExport").jqxButton({ theme: theme });
            $("#jsonExport").jqxButton({ theme: theme });
            $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid'); // To export to xlx
            });
            $("#xmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid'); //To export to xml
            });
            $("#csvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid'); // To export to csv
            });
            $("#tsvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid'); // To export to tsv
            });
            $("#htmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid'); // To export to html
            });
            $("#jsonExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid'); // To export to json
            });  

If you want to print your grid

$("#print").jqxButton();

            $("#print").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                var newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Grid</title>\n' +
                    '</head>\n' +
                    '<body>\n' + gridContent + '\n</body>\n</html>';
                document.write(pageContent);
                document.close();
                newWindow.print();
            });

Now we need a data to populate grid right ? As we are familiar with simple header JQX Grid from the previous article, Now we can go for a hierarchy column grid. So let's say we have an XML as follows

<DATA>

    <ROW>
        <ProductID>72</ProductID>
        <SupplierName>Formaggi Fortini s.r.l.</SupplierName>
        <Quantity>24 - 200 g pkgs.</Quantity>
        <Freight>32.3800</Freight>
        <OrderDate>1996-07-04 00:00:00</OrderDate>
        <OrderAddress>59 rue de l-Abbaye</OrderAddress>
        <Price>34.8000</Price>
        <City>Ravenna</City>
        <Address>Viale Dante, 75</Address>
        <ProductName>Mozzarella di Giovanni</ProductName>
    </ROW>

    <ROW>
        <ProductID>42</ProductID>
        <SupplierName>Leka Trading</SupplierName>
        <Quantity>32 - 1 kg pkgs.</Quantity>
        <Freight>32.3800</Freight>
        <OrderDate>1996-07-04 00:00:00</OrderDate>
        <OrderAddress>59 rue de l-Abbaye</OrderAddress>
        <Price>14.0000</Price>
        <City>Singapore</City>
        <Address>471 Serangoon Loop, Suite #402</Address>
        <ProductName>Singaporean Hokkien Fried Mee</ProductName>
    </ROW>

    <ROW>
        ........
    </ROW>

    <ROW>
       ........
    </ROW>

</DATA>

Please find the orderdetailsextended.xml from the spurce .

Implementing JQX GRid with advanced features

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

             // prepare the data
             var source =
            {
                datatype: "xml",
                datafields: [
                     { name: 'SupplierName', type: 'string' },
                     { name: 'Quantity', type: 'number' },
                     { name: 'OrderDate', type: 'date' },
                     { name: 'OrderAddress', type: 'string' },
                     { name: 'Freight', type: 'number' },
                     { name: 'Price', type: 'number' },
                     { name: 'City', type: 'string' },
                     { name: 'ProductName', type: 'string' },
                     { name: 'Address', type: 'string' }
                ],
                url: 'orderdetailsextended.xml',
                root: 'DATA',
                record: 'ROW'
            };
             var dataAdapter = new $.jqx.dataAdapter(source, {
                 loadComplete: function () {
                 }
             });
             // create jqxgrid.
             $("#jqxgrid").jqxGrid(
            {
                width: 900,
                source: dataAdapter,
                filterable: true,
                sortable: true,  
                pageable: true,
                autorowheight: true,
                altrows: true,
                columnsresize: true,
                columns: [
                  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
                  { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },
                  { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
                  { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },
                  { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
                  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },
                  { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
                  { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },
                  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
                ],
                columngroups:
                [
                  { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                  { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                  { text: 'Location', align: 'center', name: 'Location' }
                ]
            });

            $("#excelExport").jqxButton({ theme: theme });
            $("#xmlExport").jqxButton({ theme: theme });
            $("#csvExport").jqxButton({ theme: theme });
            $("#tsvExport").jqxButton({ theme: theme });
            $("#htmlExport").jqxButton({ theme: theme });
            $("#jsonExport").jqxButton({ theme: theme });
            $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
            });
            $("#xmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
            });
            $("#csvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
            });
            $("#tsvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
            });
            $("#htmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
            });
            $("#jsonExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
            });
            $("#print").jqxButton();

            $("#print").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                var newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Grid</title>\n' +
                    '</head>\n' +
                    '<body>\n' + gridContent + '\n</body>\n</html>';
                document.write(pageContent);
                document.close();
                newWindow.print();
            });
         });
    </script>

In the above script you can see a code part as follows

columngroups:
                [
                  { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                  { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                  { text: 'Location', align: 'center', name: 'Location' }
                ]

This is where the column groping is happening. And if you want to add a column under this column you can set as follows

{ text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 }

You can specify this as per your need and your datasource.

Now this is how our page looks like .

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>  
    <script src="generatedata.js" type="text/javascript"></script>

    <script src="jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>   
    <script src="jqwidgets/jqxgrid.edit.js" type="text/javascript"></script>
    <script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>
    <script src="jqwidgets/jqxgrid.columnsreorder.js" type="text/javascript"></script>
    <script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>
    <script src="jqwidgets/jqxdata.export.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {

             // prepare the data
             var source =
            {
                datatype: "xml",
                datafields: [
                     { name: 'SupplierName', type: 'string' },
                     { name: 'Quantity', type: 'number' },
                     { name: 'OrderDate', type: 'date' },
                     { name: 'OrderAddress', type: 'string' },
                     { name: 'Freight', type: 'number' },
                     { name: 'Price', type: 'number' },
                     { name: 'City', type: 'string' },
                     { name: 'ProductName', type: 'string' },
                     { name: 'Address', type: 'string' }
                ],
                url: 'orderdetailsextended.xml',
                root: 'DATA',
                record: 'ROW'
            };
             var dataAdapter = new $.jqx.dataAdapter(source, {
                 loadComplete: function () {
                 }
             });
             // create jqxgrid.
             $("#jqxgrid").jqxGrid(
            {
                width: 900,
                source: dataAdapter,
                filterable: true,
                sortable: true,  
                pageable: true,
                autorowheight: true,
                altrows: true,
                columnsresize: true,                
                columns: [
                  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
                  { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },
                  { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
                  { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },
                  { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
                  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },
                  { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
                  { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },
                  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
                ],
                columngroups:
                [
                  { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                  { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                  { text: 'Location', align: 'center', name: 'Location' }
                ]
            });

            $("#excelExport").jqxButton({ theme: theme });
            $("#xmlExport").jqxButton({ theme: theme });
            $("#csvExport").jqxButton({ theme: theme });
            $("#tsvExport").jqxButton({ theme: theme });
            $("#htmlExport").jqxButton({ theme: theme });
            $("#jsonExport").jqxButton({ theme: theme });
            $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
            });
            $("#xmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
            });
            $("#csvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
            });
            $("#tsvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
            });
            $("#htmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
            });
            $("#jsonExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
            });
            $("#print").jqxButton();

            $("#print").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                var newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Grid</title>\n' +
                    '</head>\n' +
                    '<body>\n' + gridContent + '\n</body>\n</html>';
                document.write(pageContent);
                document.close();
                newWindow.print();
            });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
        <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
                <br /><br />
                <input type="button" value="Export to XML" id='xmlExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to CSV" id='csvExport' />
                <br /><br />
                <input type="button" value="Export to TSV" id='tsvExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to HTML" id='htmlExport' />
                <br /><br />
                <input type="button" value="Export to JSON" id='jsonExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Print" id='print' />
            </div>
        </div>
    </div>
</body>
</html>

Thats all , we have succesfully careted a wonderful JQX Grid

Now you may think why those export buttons are outside . I looks different right ??? Now we can work on it...In JQX Grid there is an option called showtoolbar, by setting this to true we can have a toolbar along with the grid. There we can bind all of these buttons if you want. So shall we start?

 showtoolbar: true,

add that line to your JQX grid implementation . Next we need to append the UI elements to the tool bar right?

rendertoolbar: function (toolbar) {
                                        var me = this;
                                        var container = $("<div ></div>");
                                        var input = $('<div id="excelExport" style="background-color: #555555;float: left; font-weight: bold;line-height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; ">Excel</div><div style="background-color: #555555;float: left; font-weight: bold;line-height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; margin-left: 3px;" id="print" >Print</div></div>');
                                        toolbar.append(container);
                                        container.append(input);
                                    }

Add the above function also Smile | :) Now this is how your JQX Grid Implementation must be ,

 $("#jqxgrid").jqxGrid(
            {
                width: 900,
                source: dataAdapter,
                filterable: true,
                sortable: true,  
                pageable: true,
                autorowheight: true,
                altrows: true,
                columnsresize: true,
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div ></div>");
                    var input = $('<div id="div1" style="background-color: #555555;float: left; font-weight: bold;line-height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; ">Your First Div</div><div style="background-color: #555555;float: left; font-weight: bold;line-height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; margin-left: 3px;" id="Div2" >Your Second Div</div></div>');
                    toolbar.append(container);
                    container.append(input);
                },
                columns: [
                  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
                  { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },
                  { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
                  { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },
                  { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
                  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },
                  { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
                  { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },
                  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
                ],
                columngroups:
                [
                  { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                  { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                  { text: 'Location', align: 'center', name: 'Location' }
                ]
            });

Now your output looks like the following

What if you want to share this Grid with your friends ? for that we have a jquery share pluggin. http://www.jqueryscript.net/social-media/Minimal-jQuery-Plugin-For-Social-Share-Buttons-Sharer.html Include the following files from the downloded rar from the above link.

  1. jquery.sharer.css
  2. jquery.sharer.js
  3. sharer.png
 <link href="styles/jquery.sharer.css" rel="stylesheet" type="text/css" />
 <script src="scripts/jquery.sharer.js" type="text/javascript"></script>
$(".social-buttons").sharer();

Add a div where you can see the share buttons.

 <div class="social-buttons" style="position: relative;z-index: 1000;"></div>

Well thats all you have done everything. Now we can see the page as

To set the page size add the following line to your grid settings

pagesize: 50,

To set the custom pagesize options add the following line to your grid settings

pagesizeoptions: ['5','10','15','20','30','40','50'],

To allow resize the columns add the following line to your grid settings

 columnsresize: true,

To allow column re ordering options add the following line to your grid settings

 columnsreorder: true,

Make sure that you added jqxgrid.columnsreorder.js js file .

To allow Excel like filter add the following line to your grid settings

filtermode: 'excel',

Then you will get a filtering option as follows.

To enable the tooltip add the following line to your grid settings

 enabletooltips: true,

To apply themes add the following line to your grid settings

theme: 'metro',

Please be noted that you must include the stylesheet accordingly, In this case you have to include the follwing

 <link href="~/jqwidgets/styles/jqx.metro.css" rel="stylesheet" />

You can find so many CSS in jqwidgets/styles folder.

To enable auto height add the following line to your grid settings

autoheight: true,

To show the default filter icon always add the following line to your grid settings

autoshowfiltericon: false,

Happy Coding Smile | :)

History

First Version : 20-Oct-2014

Second Version : 23-Oct-2014

License

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

Share

About the Author


You may also be interested in...

Comments and Discussions

 
GeneralGood one Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)17-Nov-14 3:09
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)17-Nov-14 3:09 
GeneralRe: Good one Pin
Sibeesh KV17-Nov-14 4:29
professionalSibeesh KV17-Nov-14 4:29 
QuestionNice Article Pin
Murali Muthusamy9-Nov-14 18:45
memberMurali Muthusamy9-Nov-14 18:45 
AnswerRe: Nice Article Pin
Sibeesh KV9-Nov-14 19:12
professionalSibeesh KV9-Nov-14 19:12 
GeneralNice Job Pin
Annamalai099-Nov-14 18:12
memberAnnamalai099-Nov-14 18:12 
GeneralRe: Nice Job Pin
Sibeesh KV9-Nov-14 18:24
professionalSibeesh KV9-Nov-14 18:24 
GeneralMy vote of 5 Pin
Mahsa Hassankashi9-Nov-14 2:16
memberMahsa Hassankashi9-Nov-14 2:16 
GeneralRe: My vote of 5 Pin
Sibeesh KV9-Nov-14 5:27
professionalSibeesh KV9-Nov-14 5:27 
Questiongood Pin
Member 111581727-Nov-14 18:00
memberMember 111581727-Nov-14 18:00 
AnswerRe: good Pin
Sibeesh KV7-Nov-14 18:02
professionalSibeesh KV7-Nov-14 18:02 
GeneralMy vote of 5 Pin
Naga Raj7-Nov-14 6:02
memberNaga Raj7-Nov-14 6:02 
GeneralRe: My vote of 5 Pin
Sibeesh KV7-Nov-14 6:06
professionalSibeesh KV7-Nov-14 6:06 
QuestionGood job Pin
VigneshNagaraju7-Nov-14 1:01
memberVigneshNagaraju7-Nov-14 1:01 
AnswerRe: Good job Pin
Sibeesh KV7-Nov-14 1:40
professionalSibeesh KV7-Nov-14 1:40 
QuestionGood One Pin
Gopi Krishna Palem6-Nov-14 22:08
memberGopi Krishna Palem6-Nov-14 22:08 
AnswerRe: Good One Pin
Sibeesh KV6-Nov-14 22:15
professionalSibeesh KV6-Nov-14 22:15 
GeneralRegards Pin
Renjitha P B28-Oct-14 4:13
professionalRenjitha P B28-Oct-14 4:13 
GeneralRe: Regards Pin
Sibeesh KV28-Oct-14 4:18
professionalSibeesh KV28-Oct-14 4:18 
QuestionMy vote of 5 Pin
Member 1117423926-Oct-14 23:37
memberMember 1117423926-Oct-14 23:37 
AnswerRe: My vote of 5 Pin
Sibeesh KV26-Oct-14 23:40
professionalSibeesh KV26-Oct-14 23:40 
QuestionNice Pin
manivinof523-Oct-14 21:06
membermanivinof523-Oct-14 21:06 
AnswerRe: Nice Pin
Sibeesh KV23-Oct-14 21:07
professionalSibeesh KV23-Oct-14 21:07 
QuestionWould you like to... Pin
Nelek22-Oct-14 23:28
memberNelek22-Oct-14 23:28 
AnswerRe: Would you like to... Pin
Sibeesh KV22-Oct-14 23:35
professionalSibeesh KV22-Oct-14 23:35 
GeneralRe: Would you like to... Pin
Nelek24-Oct-14 0:46
memberNelek24-Oct-14 0:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150731.1 | Last Updated 21 Oct 2014
Article Copyright 2014 by Sibeesh KV
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid