jQWidgets Forums

This topic contains 7 replies, has 2 voices, and was last updated by vinaysingh.ji 10 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Row number column Posts

September 17, 2014 at 7:53 am Row number column #59615

Participant

I have read about the technique of implementing the row number column in grid using cellsrenderer function. But after sorting, the values in the row number column is not changing according to the row index.

Is is possible to call cellsrenderer function while sorting so that the values can be updated based on the row index?

September 17, 2014 at 8:02 am Row number column #59616

Peter Stoev

Keymaster

Hi vinaysingh.ji,

There is a new demo – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/numbercolumn.htm?arctic with such column and you can’t sort it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

September 17, 2014 at 9:58 am Row number column #59624

vinaysingh.ji

Participant

Dear Peter,

Thanks for the quick reply. I have duplicated the demo at my end, but the ‘#’ column is not showing any value. Do I need to include some js file or the issue might be something else?

September 17, 2014 at 10:04 am Row number column #59625

Peter Stoev

Keymaster

Hi vinaysingh.ji,

If it’s not showing a value then you don’t use the current version. As you see, the demo is marked with “New” which means that it demonstrates something which is not available for earlier versions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

September 17, 2014 at 10:51 am Row number column #59628

vinaysingh.ji

Participant

Dear Peter,

You pointed the exact problem. Now its working fine as per the demo. But still there is a problem. The first row is starting from 0, can we change it to start from 1?

September 18, 2014 at 4:22 am Row number column #59670

vinaysingh.ji

Participant

Dear Peter,

You pointed the exact problem. Now its working fine as per the demo. But still there is a problem. The first row is starting from 0, can we change it to start from 1?

September 18, 2014 at 5:44 am Row number column #59676

Peter Stoev

Keymaster

Hi vinaysingh.ji

You can find the solution below in the “cellsrenderer”:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Row Number Column in jqxGrid.</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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();

            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];

            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];

            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];

            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];

            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);

                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;

                data[i] = row;
            }

            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
       
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  {
                      text: '#', sortable: false, filterable: false, editable: false,
                      groupable: false, draggable: false, resizable: false,
                      datafield: '', columntype: 'number', width: 50,
                      cellsrenderer: function (row, column, value) {
                          return "<div style='margin:4px;'>" + (value + 1) + "</div>";
                      }
                  },
                  { text: 'Name', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 18, 2014 at 7:08 am Row number column #59682

vinaysingh.ji

Participant

Thanks Peter. The solution is working as per my requirement. Thanks a lot.

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.