0

I'm working on the CSS of a table which is generated via JQGrid in the server-side using C#. I tried to override the layout definitions (e.g width) in the client side (of course after the server-side table is generated in the code) but got nothing. the only thing that worked is creating a whole new jqgrid object, which obviously nullifies all server-side definitions, so it's no use.

Is there a way to somehow regenerate a JavaScript copy of the object in the client-side, and then apply changes to it?

Your kind assistance is most welcome.

edit: here is to code used to generate the table with C#:

        this.projectGrid = new JQGrid
        {
            Columns = new List<JQGridColumn>()
            {
                new JQGridColumn { Visible=true,
                                   Editable=false,
                                 //  Width=70,
                                   DataField="compliance_colour",
                                   HeaderText="Comp.",
                                   Searchable=false,
                                    Formatter = new CustomFormatter
                                                             {
                                                              FormatFunction = "formatCmpImage"

                                                             }


                },
                new JQGridColumn{ DataField="ProjectID",
                                  PrimaryKey=true,
                                  Visible=true,
                                  Editable=false,
                                  HeaderText="ID",
                                //  Width=50,
                                  Searchable=false
                },
                new JQGridColumn{ DataField="OpsRegion",
                                  Visible=true,
                                  Editable=false,
                                  HeaderText="Ops Region",
                               //   Width=180,
                                  Searchable=false

                },
                  new JQGridColumn{DataField="customer",
                                 Visible=true,
                                 Editable=false,
                                 HeaderText="Customer Name",
                               //  Width=180,
                                 Searchable=false

                },
                  new JQGridColumn{ DataField="projectName",
                                  Visible=true,
                                  Editable=false,
                                  HeaderText="Project Name",
                                //  Width=300,
                                  Searchable=false,
                                  Formatter = new CustomFormatter
                                                             {
                                                              FormatFunction = "formatLink",

                                                             }


                },

                new JQGridColumn{DataField="projectManager",
                                 Visible=true,
                                 Editable=false,
                                 HeaderText="Project Manager",
                              //   Width=110,
                                    Searchable=false
                },
                new JQGridColumn{DataField="status",
                                 Visible=true,
                                 Editable=false,
                                 HeaderText="Status",
                              //   Width=70,
                                 Searchable=false

                },
                new JQGridColumn {DataField="type",
                                  Visible=true,
                                  Editable=false,
                                  HeaderText="Type",
                             //     Width=70,
                                  Searchable=false

                },
                new JQGridColumn {DataField="favorite",
                                  Visible=true,
                                  Editable=false,
                                  HeaderText="Favorite",
                              //    Width=60,
                                  Searchable=false,
                                  Formatter = new CustomFormatter
                                                                {
                                                                    FormatFunction = "formatFvImage",
                                                                    UnFormatFunction = "unformatCell"
                                                                }

                },
                 new JQGridColumn {DataField="compliance_reason",
                                  Visible=false      
                },
                 new JQGridColumn {DataField="lastUpdate",
                                  Visible=true,
                                  Editable=false,
                               //   Width=60,
                                  HeaderText="Last Update",
                                  Searchable=false,
                                  Formatter = new CustomFormatter
                                                                {
                                                                    FormatFunction = "formatReportLink",
                                                                    UnFormatFunction = "unformatCell"
                                                                }

                },
            },
           Width = Unit.Pixel(1400),
            ShrinkToFit=true,
            Height = Unit.Pixel(520),

        };
Matanya
  • 6,233
  • 9
  • 47
  • 80
  • Do you use *free* open source [jqGrid](http://stackoverflow.com/tags/jqgrid/info) from [trirand.com](http://www.trirand.com/blog/?page_id=6) or some *commercial* product based on jqGrid like jqSuite from [trirand.net](http://www.trirand.net/licensing.aspx)? In the last case you should use another tag of the question like [jqgrid-asp.net](http://stackoverflow.com/tags/jqgrid-asp.net/info). – Oleg Jun 25 '12 at 09:42

1 Answers1

0

If you need to change width of grid you can use setGridWidth method. To overwrite many other jqGrid options you can use setGridParam instead. You can use the methods after the grid is created. In general you should use jqGrid methods if someone exist for exact the option (like setCaption, setGridHeight, setColProp, ...). If you find no special jqGrid method to change the options you should probably use setGridParam method.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks for your answer. However, I obviously tried this b4 posting my question. IMHO, The problem lies in the fact that the table is generated on the server-side, and thus a JS copy of this table obj must be first obtained, b4 trying to manipulate any params – Matanya Jun 25 '12 at 09:57
  • @Matanya: You don't describe *how* (in which way) you "generate" the table (??? the grid or you use `tableToGrid`?). You should post more details. How you tried to change the options of jqGrid? Do you did it *after* the grid is created (see my answer)? If your JavaScript code will be called *before* the grid are created you can change *default* options of jqGrid on the page (`$.extend($.jgrid.defaults, {...});`). See [here](http://stackoverflow.com/a/2678731/315935) for example. – Oleg Jun 25 '12 at 10:13
  • @Matanya: The code which you posted in the **edit** part of the question shows that you use *commercial* product like jqSuite from [trirand.net](http://www.trirand.net/licensing.aspx) instead of [jqGrid](http://stackoverflow.com/tags/jqgrid/info). I can only repeat the suggestion from my last comment. You can find an example of such approach in UPDATED part of [the answer](http://stackoverflow.com/a/10980350/315935) (the answer is not accepted, but I tested the code which I posted before and it works). Depend on where you included `...` on the ASPX page you can reduce the code. – Oleg Jun 25 '12 at 12:21