jQuery Grid Plugin - jqGridForum

13/01/2012
06:47

slykiwi

Australia

Member

Members

Forum Posts: 10

Member Since:
15/09/2011

Offline

1

Hi....someone, please!!

I am trying to freeze my first grid column but with no luck. I have version 4.3, and I have frozen:true in my dynamic column model. What I cent seem to be able to do is call the method correctly. WHERE and HOW in my code below do I place the call to setFrozenColumns???

    $.ajax({

        type: "GET",
        url: "xxxxxxxxxxx",
       dataType: "json",

        success: function(result){

           var colD = result.pfcTills,
           colM = result.colModelList;

           $("#dataGrid").jqGrid({

               datatype: 'local',
               data: colD.gridData,
               gridview: true,
               colModel :colM,
               height: "100%",
               width: 1000,
               shrinkToFit: false,
               caption:"MONTHLY SUMMARY",
               sortable: true,
               rowNum: 100,
                loadComplete: function(data){ }
               }
            });
        }
    });
});
</script>

Does anyone know the answer please?

Thanks.

13/01/2012
10:41

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Hello,

I preffer you to click on the documentation menu

Kind Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

14/01/2012
12:25

mafirstlove

New Member

Members

Forum Posts: 2

Member Since:
14/01/2012

Offline

3

@slykiwi you cab refer this example to freeze first column

jQuery("#UsersGrid").jqGrid({
                url: 'jqGridHandler.ashx',
                datatype: 'json',
                height: 250,
                colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID'],
                colModel: [
                        { name: 'UserID', index: 'UserID', width: 100, sortable: true, frozen: true },
                        { name: 'UserName', width: 100, sortable: true },
                        { name: 'FirstName', width: 100, sortable: true },
                        { name: 'MiddleName', width: 100, sortable: true },
                        { name: 'LastName', width: 100, sortable: true },
                        { name: 'EmailID', width: 150, sortable: true }
                    ],
                rowNum: 100,
                rowList: [200, 400, 600],
                pager: '#UsersGridPager',
                sortname: 'UserID',
                viewrecords: true,
                shrinkToFit: false,
                width: 300,
                sortorder: 'asc',

                caption: 'JSON Example'
            });

            jQuery("#UsersGrid").jqGrid('navGrid', '#UsersGridPager');

            jQuery("#UsersGrid").jqGrid('setFrozenColumns');

16/01/2012
00:06

slykiwi

Australia

Member

Members

Forum Posts: 10

Member Since:
15/09/2011

Offline

4

Tony,

I had already looked at the documentation and know what I am meant to do i.e:

jQuery("#dataGrid").jqGrid('setFrozenColumns');

&

frozen:true

but I can't seem to get it to work, HENCE I posted on here. It is where in my code that the line calling the method setFrozenColumns should be that is my question. I have tried it in multiple places but cant get it to work, so need to know where it SHOULD go. When I know this, if it still does not work, then I can look at other possibilities.

"mafirstlove"........ thanks for your help. Would you expect that jQuery("#dataGrid").jqGrid('setFrozenColumns'); would go at the very end of my code after the last set of brackets like in yours? The way my grid is constructed it different from yours?

Thanks.

16/01/2012
00:12

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

5

Probably you will find the answers on your question in the answer and in this one.

Best regards
Oleg

16/01/2012
00:46

slykiwi

Australia

Member

Members

Forum Posts: 10

Member Since:
15/09/2011

Offline

6

Hey Oleg,

Thanks for the prompt reply. I have read the links you sent me, and assume that my datatype of local is the issue. I also should say that unlike the demo, not even my header is fixed (I should also say that I do not change any of the heights or CSS).

Any chance you coul dguide me through this a bit more please? I inserted the following bwtween the brackets of my loadComplete:


 var $this = $(this), newCapture = "", filters, rules, rule, op, i, iOp,
        postData = $this.jqGrid("getGridParam", "postData"),
        isFiltering = $this.jqGrid("getGridParam", "search");

    if (isFiltering === true && typeof postData.filters !== "undefined") {
        filters = $.parseJSON(postData.filters);
        newCapture = "Filter: [";
        rules = filters.rules;
        for (i = 0; i < rules.length; i++) {
            rule = rules[i];
            op = rule.op;  // the code name of the operation
            iOp = $.inArray(op, arOps);
            if (iOp >= 0 && typeof $.jgrid.search.odata[iOp] !== "undefined") {
                op = $.jgrid.search.odata[iOp];
            }
            newCapture += rule.field + " " + op + " '" + rule.data + "'";
            if (i + 1 !== rules.length) {
                newCapture += ", ";
            }
        }
        newCapture += "]";
    }
    $this.jqGrid("setCaption", newCapture);
    fixPositionsOfFrozenDivs.call(this);

Where exactly in my code should the following go:

fixPositionsOfFrozenDivs = function () {
                    if (typeof this.grid.fbDiv !== "undefined") {
                        $(this.grid.fbDiv).css($(this.grid.bDiv).position());
                    }
                    if (typeof this.grid.fhDiv !== "undefined") {
                        $(this.grid.fhDiv).css($(this.grid.hDiv).position());
                    }
                },
                arOps = ["eq", "ne", "lt", "le", "gt", "ge", "bw", "bn", "in", "ni", "ew", "en", "cn", "nc"];

I also have this now after the last brackets of my code at the beginning of this post:

$grid = $('#dataGrid');
$grid.jqGrid('setFrozenColumns');
$grid[0].p._complete.call($grid[0]);

Cheers Oleg.

16/01/2012
01:00

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

7

Hello,

many parts of my old code which you posted will be probably not important for you. You should just define the fixPositionsOfFrozenDivs function with the code var fixPositionsOfFrozenDivs = function () { ...}; somewhere before the usage and include call of fixPositionsOfFrozenDivs.call(this); inside of loadComplete function. It's also important to call p._complete after the call of setFrozenColumns.

The most easy way is the copy my demo and modify it by removing some parts to have the simpllest, but working demo. Then you can use the same ideas in your code.

Best regards
Oleg

16/01/2012
01:54

slykiwi

Australia

Member

Members

Forum Posts: 10

Member Since:
15/09/2011

Offline

8

Thanks again Oleg,

This will be my last post before I give up on this thing!

I keep getting the error $grid[0] is undefined.

Here is my final mix of your demol and my code. The grid and data loads no problem:

   $grid = $("#dataGrid"),

   fixPositionsOfFrozenDivs = function () {
       if (typeof this.grid.fbDiv !== "undefined") {
           $(this.grid.fbDiv).css($(this.grid.bDiv).position());
       }
       if (typeof this.grid.fhDiv !== "undefined") {
           $(this.grid.fhDiv).css($(this.grid.hDiv).position());
       }
   };

    $.ajax({

        type: "GET",
        url: "cfc/contacts.cfc?method=pfcTillsMonth&storeID=<cfoutput>#form.storeID#</cfoutput>&year=<cfoutput>#form.year#</cfoutput>",
       dataType: "json",

success: function(result){

var colD = result.pfcTills,
colM = result.colModelList;

           $grid.jqGrid({

               datatype: 'local',
               data: colD.gridData,
               gridview: true,
               colModel :colM,
               height: "100%",
               width: 1000,
               shrinkToFit: false,
               caption:"PFC TILLS MONTHLY SUMMARY",
               sortable: true,
               rowNum: 100,
                loadComplete: function(data){
                   fixPositionsOfFrozenDivs.call(this);
               }

            });

        }

    });

   $grid.jqGrid('setFrozenColumns');
   $grid[0].p._complete.call($grid[0]);
   fixPositionsOfFrozenDivs.call($grid[0]);

});
</script>

You can see from the following dump that frozen is set in the colModel:

{"colModelList":[{"name":"PRDID","sortable":false,"frozen":true,"label":"Item Description","width":200.0,"editable":false,"index":"PRDID","hidden":false},{"name":"Jan","sortable":false,"width":100.0,"editable":false,"label":"January","align":"right"},{"name":"Feb","sortable":false,"width":100.0,"editable":false,"label":"February","align":"right"},{"name":"Mar","sortable":false,"width":100.0,"editable":false,"label":"March","align":"right"},.......

Any last suggestions please mate??

Thanks.

16/01/2012
09:27

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

9

Hello,

There is enought time to give up.

You should call these lines of code

$grid.jqGrid('setFrozenColumns');

within the success ajax function and not outside it.

$.ajax({

....

success : function (...)

{

...

$grid.jqGrid({

...

});

$grid.jqGrid('setFrozenColumns');

} // END SUCCESS

}); // END AJAX

....

If you call it so the grid is not yet constructed, since of the ajax call.

Please read carfully what ajax does.

Another simple way to fix this is to set ajax option

async: false.

without to change your code.

Baest Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

16/01/2012
10:05

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

10

Hello,

I want to add one more probelm in your JSON data additionally to the problem described by Tony. The JSON data which you posted one sees that you set the property frozen:true only for hidden column. So no frozen columns will be created and so $grid[0].p._complete will be null. If you want to make your code working without errors in the situation you should use

if ($.isFunction($grid[0].p._complete)) { $grid[0].p._complete.call($grid[0]); }

In any way if you want to test setFrozenColumns method you should define at least one non-hidden column having frozen:true.

Best regards
Oleg

17/01/2012
00:24

slykiwi

Australia

Member

Members

Forum Posts: 10

Member Since:
15/09/2011

Offline

11

Hey Tony / Oleg....

Ok, Im not yet ready to give up on this. I tried your suggestion Tony and moved the $grid.jqGrid('setFrozenColumns'); within the success ajax function. It still did not work:

   $grid = $("#dataGrid"),

   fixPositionsOfFrozenDivs = function () {
       if (typeof this.grid.fbDiv !== "undefined") {
           $(this.grid.fbDiv).css($(this.grid.bDiv).position());
       }
       if (typeof this.grid.fhDiv !== "undefined") {
           $(this.grid.fhDiv).css($(this.grid.hDiv).position());
       }
   };

    $.ajax({

        type: "GET",
        url: "xxxxxx",
       dataType: "json",

        success: function(result){

var colD = result.pfcTills,
colM = result.colModelList;

           $grid.jqGrid({

               datatype: 'local',
               data: colD.gridData,
               gridview: true,
               colModel :colM,
               height: "100%",
               width: 1000,
               shrinkToFit: false,
               caption:"PFC TILLS MONTHLY SUMMARY",
               sortable: true,
               rowNum: 100,
                loadComplete: function(){

                    fixPositionsOfFrozenDivs.call(this);
               }

            });

          $grid.jqGrid('setFrozenColumns');
          $grid[0].p._complete.call($grid[0]);
          fixPositionsOfFrozenDivs.call($grid[0]);

        }// END SUCCESS

    });// END AJAX

});
</script>

I also (without changing my code) set async: false. This made no difference also.

Oleg, the first entry in my column model list from above is:

{"name":"PRDID","sortable":false,"frozen":true,"label":"Item Description","width":200.0,"editable":false,"index":"PRDID","hidden":false}

Hidden is set to false unless I am missing something? There are no hidden columns. I have since removed any reference to hidden columns anyway.

Thanks again gents!

17/01/2012
01:08

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

12

Hello,

the code which you posted gives not so many information because you don't posted the JSON data which can be used to reproduce your problem. The demo use datatype: 'json' and it do work.

If you post the full code which can be used to reproduce your problem one could find the reason of your problem.

Best regards
Oleg

17/01/2012
01:14

slykiwi

Australia

Member

Members

Forum Posts: 10

Member Since:
15/09/2011

Offline

13

Hi Oleg,

Here is a complete dump of the Coldfusion serialized JSON data after calling my cfc:

The data loads into the grid without any problem. I hope this helps you to help me.

Thanks.

17/01/2012
01:30

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

14

Everything is easy if one can reproduce the problem.

You should remove sortable: true option from the grid to be able to use frozen columns: see the modified demo.

Look at the documentation about the limitations in the current implementation or look the line of jqGrid code.

Best regards
Oleg

17/01/2012
01:37

slykiwi

Australia

Member

Members

Forum Posts: 10

Member Since:
15/09/2011

Offline

15

FIXED! Huge thank you for your time guys.

17/01/2012
14:35

heavyvice

Member

Members

Forum Posts: 3

Member Since:
17/01/2012

Offline

16

Frozen cols is great improvement but...We need use celledit together

There is an alternative way but I don't know how to implement...

Allocate 2 grids NO FROZEN cos, left grid contains 'fixed' cols, right grid contains all editable cols but none frozen cols.

The only problem is capture scroll event from two grids and sync both toprow

But I don't know how to do that.

Heavyvice