Load all the data first not while scrolling horizontally in jQWidget jQX grid

[Sibeesh VenuParticipant]

I am using JQWidget JQX grid. In the grid I have one horizontal scroll, now I need to d some task whenever user scroll horizontally. Is there any way we can do this? I have tried so many things like we do normal scrolls https://api.jquery.com/scrollleft/ , still no luck. In the grid the horizontal data is populated whenever user scrolls horizontally dynamically even if I have assigned the full source. The rows gets appended to the div ‘contenttablejqxgrid’ only when user scrolls.

Now is there any property to make sure the grid loads all the data in the page instead creating while scrolling? Thanks in advance.

[DimitarParticipant]

Hello Sibeesh Venu,

This is the built-in behaviour of jqxGrid and it cannot be altered, unfortunately. If you wish, please share what you ultimately want to achieve and we will think of a way to assist you.

Best Regards,
Dimitar

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

[Sibeesh VenuParticipant]

Hi Dimitar,
Thanks for your reply. Everything is dynamic in my Grid, like columns, rows. So what we do is, looping through each columns and rows and assign colour codes to some cell values. Since I am creating the column header dynamically I am not able to use the existing colour coding techniques in your site. Since there will be only few cell when grid loads, I can only loop through those cell, hence the colour coding is not get applied to the all cell values. Please assist me to do this. Thanks in advance.

[DimitarParticipant]

Hi Sibeesh Venu,

It is not recommended to apply CSS changes directly to jqxGrid inner HTML elements dynamically, because once the grid is scrolled or a cell value is changed, all CSS changes will be lost. The way we suggest is using cellsrenderer. This callback can also be defined for your dynamically added columns.

Best Regards,
Dimitar

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

[Sibeesh VenuParticipant]

Hi Dimitar,
Thanks much for your reply. Yes I do agree that this is not a recommended way, but I had no other option this. As I said my columns are dynamic, I am unable to call the cellsrender function as we have in that given example.

columns: [
                  { text: 'First Name', dataField: 'firstname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Last Name', dataField: 'lastname', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 100 },
                  { text: 'Product', dataField: 'productname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 180 },
                  { text: 'Quantity', dataField: 'quantity', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 80 },
                  { text: 'Unit Price', dataField: 'price', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 90},
                  { text: 'Total', dataField: 'total', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 90}
                ]

So is there anyway we can apply the colour coding after the grid loads? If yes, please show me how can we do that? Thanks in advance.

[DimitarParticipant]

Hi Sibeesh Venu,

Could you, please, share how you actually add your dynamic columns and we will try to come up with a solution.

Best Regards,
Dimitar

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

[Salim HamzaParticipant]

Hi,

I had a similar issue on a 70+ columns grid. I needed to apply background colors to specific column headers, but the only reference was with eq() which changed when I scrolled horizontally.

The workaround I used was to set the grid width to something verybig like 1000% so it rendered all the grid on load.
Every eq() should be available.

$("#jqxgrid").jqxGrid(
                {
                    width: '1000%',
                    height: '97%',
                    columnsresize: true,
                    rendered:function(){
                        renderColors(); <--- $("#columntablejqxgrid").children("div:eq(73)").css("background-color", "#33FF33");
                    }, ...

Outside the grid setup I called
$("#jqxgrid").jqxGrid('width', '100%'); to set the grid to a normal width.

[Sibeesh VenuParticipant]

Hi Dimitar,
Thanks for the reply. That’s simple. Actually I have an HTML table as data source, so I am looping through all the headers and assign the values to a variable called dataColumns and datafields and at last I will just parse that variable and assign it to the grid. So In this case I am unable to use the normal colour coding techniques. Any help is appreciated.

[Sibeesh VenuParticipant]

Hi Salim Hamza,
Thanks much for the reply. I will give a try as you suggested. But in my case I can not predict the number of columns, it can be any value.

[DimitarParticipant]

Hi Sibeesh Venu,

Here is an example that shows how to achieve your requirements. The recommended colouring way – cellsrenderer – is used.

<!DOCTYPE html>
<html lang="en">
<head>
    <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/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="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata)
            {
                if (parseFloat(rowdata.Points) < 30)
                {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                } else
                {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #00ff00;">' + value + '</span>';
                }
            };

            // select rows.
            var rows = $("#initialTable tbody tr");
            // select columns.
            var columns = $("#initialTable thead th");
            var data = [];
            var dataFieldsArray = [];
            var columnsArray = [];
            for (var i = 0; i < rows.length; i++)
            {
                var row = rows[i];
                var datarow = {};
                for (var j = 0; j < columns.length; j++)
                {
                    // get column's title.
                    var columnName = $.trim($(columns[j]).text());
                    // select cell.
                    var cell = $(row).find('td:eq(' + j + ')');
                    datarow[columnName] = $.trim(cell.text());
                    if (i === 0)
                    {
                        dataFieldsArray.push({ name: columnName });
                        columnsArray.push({ name: columnName, dataField: columnName, cellsrenderer: cellsrenderer });
                    }
                }
                data[data.length] = datarow;
            }

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: dataFieldsArray,
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                columns: columnsArray
            });
        });
    </script>
</head>
<body class='default'>
    <p style="font-family: Verdana;">
        Initial table:</p>
    <table id="initialTable" style="width: 300px;">
        <thead>
            <tr>
                <th>
                    Firstname
                </th>
                <th>
                    Lastname
                </th>
                <th>
                    Points
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Eve
                </td>
                <td>
                    Jackson
                </td>
                <td>
                    94
                </td>
            </tr>
            <tr>
                <td>
                    Clara
                </td>
                <td>
                    Oswald
                </td>
                <td>
                    17
                </td>
            </tr>
            <tr>
                <td>
                    Benedict
                </td>
                <td>
                    Mason
                </td>
                <td>
                    33
                </td>
            </tr>
        </tbody>
    </table>
    <br />
    <p style="font-family: Verdana;">
        Resultant grid:</p>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

[Sibeesh VenuParticipant]

Hi Dimitar,
Thank you so much for the reply. I will try as you suggested.

[Sibeesh VenuParticipant]

Hi Dimitar,
I have tried the same as you suggested, but we have done so many things as the continuation of the colour coding method we had implemented. Now I am not in a situation to do any big changes since app is already moved to production. I believe you can understand my situation. Is there any other way something tricky like Salim Hamza suggested? I just need to make sure that all the columns are rendered instead of few columns when there is horizontal scroll. If yes please share me that, billion thanks in advance.

[DimitarParticipant]

Hi Sibeesh Venu,

If you set the grid property enablecolumnsvirtualization to false, all columns will be rendered at initialization (but not their cells’ content). Unfortunately, this is all we can offer on the matter.

Best Regards,
Dimitar

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

[Sibeesh VenuParticipant]

Hi Dimitar,
Thank you so much for the reply. In fact that is all I wanted to do. setting enablecolumnsvirtualization to false did the trick. Thanks much for your help.

[Salim HamzaParticipant]

Hi Dimitar,

Thanks for the info, I replaced my workaround by your solution to make my code cleaner.

You’re doing a great job!
-Salim

[Author]

Posts