Freezing column in jqgrid is not working

Question

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Freeze.aspx.cs" Inherits="Freeze" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <link href="Styles/ui.jqgrid.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/Lib/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="Scripts/Lib/jquery.jqGrid.min.js" type="text/javascript"></script>

    <script src="Scripts/Lib/jquery.jqGrid.src.js" type="text/javascript"></script>

    <script src="Scripts/Lib/grid.custom.js" type="text/javascript"></script>

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

            var lastsel2;
            $("#sample").jqGrid({
                datatype: "local",
                height: 250,
                scroll: false,
                shrinkToFit: false,
                colNames: ['ID Number', 'Name', 'Stock', 'department', 'Notes', 'Service', 'Delivery', 'Result', 'Feedback', 'Total', 'Data', 'Views', 'Rows', 'Columns', 'Table'],
                colModel: [
           { name: 'id', index: 'id', width: 90, sorttype: "int", editable: true, frozen: true },
           { name: 'name', index: 'name', width: 150, editable: true,frozen: true, editoptions: { size: "20", maxlength: "30"} },
           { name: 'stock', index: 'stock', width: 60, editable: true,frozen: true, edittype: "select", editoptions: { value: "aw:Yes;bk:No"} },
           { name: 'dep', index: 'dep', width: 90, editable: true,frozen: true, edittype: "select", editoptions: { value: "a:km;b:bc;c:we;i:gg"} },
           { name: 'note', index: 'note', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10"} },
           { name: 'Service', index: 'Service', width: 90, sorttype: "int", editable: true },
           { name: 'Delivery', index: 'Delivery', width: 90, sorttype: "int", editable: true },
           { name: 'Result', index: 'Result', width: 90, sorttype: "int", editable: true },
           { name: 'Feedback', index: 'Feedback', width: 90, sorttype: "int", editable: true },
           { name: 'Total', index: 'Total', width: 90, sorttype: "int", editable: true },
           { name: 'Data', index: 'Data', width: 90, sorttype: "int", editable: true },
           { name: 'Views', index: 'Views', width: 90, sorttype: "int", editable: true },
           { name: 'Rows', index: 'Rows', width: 90, sorttype: "int", editable: true},
           { name: 'Columns', index: 'Columns', width: 90, sorttype: "int", editable: true },
           { name: 'Table', index: 'Table', width: 90, sorttype: "int", editable: true }
       ],


                caption: "sample table"
            });
            var mydata2 = [
        { id: "12345", name: "Desktop Computer", note: "note", stock: "Yes", dep: "km", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
        { id: "23456", name: "Laptop", note: "Long text ", stock: "Yes", dep: "bc", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
        { id: "34567", name: "LCD Monitor", note: "note3", stock: "Yes", dep: "we", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
        { id: "45678", name: "Speakers", note: "note", stock: "No", dep: "gg", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
        { id: "56789", name: "Laser Printer", note: "note2", stock: "Yes", dep: "km", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
        { id: "67890", name: "Play Station", note: "note3", stock: "No", dep: "gg", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
        { id: "76543", name: "Mobile Telephone", note: "note", stock: "Yes", dep: "we", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
        { id: "87654", name: "Server", note: "note2", stock: "Yes", dep: "bc", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" },
        { id: "98765", name: "Matrix Printer", note: "note3", stock: "No", dep: "km", Service: "abc", Delivery: "ccv", Result: "bbc", Feedback: "yes", Total: "100", Data: "rre", Views: "dgx", Rows: "5", Columns: "8", Table: "13" }
        ];

            for (var i = 0; i < mydata2.length; i++) {

                jQuery("#sample").jqGrid('addRowData', mydata2[i].id, mydata2[i]);
            }
        });

        $("#sample").jqGrid('setFrozenColumns');
        $("#sample").trigger('reloadGrid', [{ current: true}]);
       </script>

</head>
<body>
    <form id="form1" runat="server">
    <table id="sample">
    </table>
    </form>
</body>
</html>

This is my code. I am using jquery version4.4.0 But still the column is not getting frozen. Kindly help me out in this issue. I have tried debugging the code too. The method "setFrozencolumns" is getting called but eventhough the columns are not frozen

tpeczek · Accepted Answer · 2012-08-22T09:47:16.430

1

To use setFrozenColumns you need to mark which columns should be frozen by setting frozen:true in colModel. Please read more here:

Frozen Columns - Setup and limitations

UPDATE

The setFrozenColumns method is available in jqGrid since version 4.3.0. You should also make sure that you have checked the Custom module in Base section on download page (or referenced grid.custom.js file if you are working with uncompressed distribution).

edited Aug 22 '12 at 09:47

answered Aug 22 '12 at 07:46

tpeczek

23,867
3
74
77

I have tried that too.. but it is giving me a "Method not found error" – Aug 22 '12 at 09:26
I have pasted the edited code also.. kindly check that and help me out – Aug 22 '12 at 09:27
@Xavier I have updated answer with some details on where the method is available. – tpeczek Aug 22 '12 at 09:48
I have downloaded v 4.4.0 and added the following script files in my code. The error got resolved but the column is not frozen yet.. plz help me out – Aug 22 '12 at 10:40
@Xavier You might try calling `$("#sample").trigger('reloadGrid', [{current:true}]);` after call to setFrozenColumns, but if you haven't break any of the limitations described in the link I've gave you (and you have verified that you are using correct version of jqGrid) than everything should work just fine (at least there is nothing more that can be diagnosed from what you have described). – tpeczek Aug 22 '12 at 10:44
I have tried that too.. but still it is not working. I have debugged too the method is getting called too.. but i dont know what is wrong..:-( Anyhow thanks for your information – Aug 22 '12 at 11:07
Kindly answer this question [link]http://stackoverflow.com/questions/12190680/how-to-validate-the-subgrid-rows-in-jquery – Aug 30 '12 at 09:16

score 1 · Answer 2 · answered Aug 24 '12 at 07:01

tried this way and it is working fine now..

$("#sample").jqGrid("destroyFrozenColumns")
            .jqGrid("setColProp", "id", { frozen: true })
            .jqGrid("setFrozenColumns")
            .trigger("reloadGrid", [{ current: true}]);

Freezing column in jqgrid is not working

2 Answers2