Problem resulting from cell rendering

[pramilkprinceParticipant]

When cell render method is used in Jqxgrid , jqx cell formatting,sorting of numbers and cellalign is not working. This bug is also visible official Jqx example

$(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 < 100; 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"
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer },
                  

<blockquote>{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsrenderer: cellsrenderer, cellsformat: 'c2' },</blockquote>

                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>

described in page

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsrendering.htm

[Peter StoevKeymaster]

Hi pramilkprince,

I would like to let you know that this is not a bug. “cellsrenderer” overrides the built-in rendering. This means that you should manually render the cell’s html content. This is the general idea of “cellsrenderer”. It should be used smartly and only when it is necessary.

Best Regards,
Peter Stoev

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

[pramilkprinceParticipant]

I need cellrendering method and also number sorting in that cell. Have any solution please share with me

[Peter StoevKeymaster]

Hi pramilkprince,

If you need sorting, then I would suggest you to see the demos which implement sorting and use the same approach. You will need to include jqxgrid.sort.js and set the Grid’s sortable property to true.

Best Regards,
Peter Stoev

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

[pramilkprinceParticipant]

For your knowledge , I also specify statement in your example

{ text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsrenderer: cellsrenderer, cellsformat: ‘c2’ }

Have you noticed any use cellsformat: ‘c2’ in the above statement

[pramilkprinceParticipant]

I have implemented sorting as described in your demo. But sorting of numbers is not working when using cell rendering

[Peter StoevKeymaster]

Hi pramilkprince,

It seems that you don’t read my posts. “cellsrenderer” overrides the built-in rendering of Grid cells. “cellsrenderer” should be used when you want to display custom content in your cells. Here’s a working demo with custom rendering function and sorting: http://jsfiddle.net/jqwidgets/233fakap/. Both work pretty good.

Best Regards,
Peter Stoev

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

[pramilkprinceParticipant]

Have you inspect how 10 and 5 arranged when sorting is done in ascending order

[Peter StoevKeymaster]

Hi pramilkprince,

The sample I sent you is tested and works fine. I would suggest you to look at it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hemen.punjani@gmail.comParticipant]

Hi Peter,

Following is the scenario where cell rendering is working but sorting is not working as expected, Please let me know in case any workaround or I’m missing some configuration.

e.g. In JQXGrid : coulmn – TypicalID#(number) (Cell render will make it as hyperlink TypicalID)
cellrender is working fine. but when we do sorting its doing sorting on the base of hyperlink text(string) but it should do with the TypicalID# (integer number).

Regards,
hemen

[Peter StoevKeymaster]

Hi Hemen,

Cell rendering overrides the built-in rendering. sorting is always by the data cell value, not by the text or html displayed in the cell.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts