0

I'm having 3 different issues with free-jqGrid. free-jqgrid version is 4.9.2. They are ...

1) left-aligned text in jqgrid pagination because of webpage css override.

2) jqgrid (javascript - formatter & formatoptions) incorrect formatting of Stock Date. (In sql database, I default formatted it to YYYYMMDD).

3) column sorting of the Stock Date (it might go away if Stock Date formatting is resolved.

Server-side database script are...

                using (var dbReader1 = dbCommand.ExecuteReader())
                {
                    //#if (!dbReader1.HasRows) { throw new Exception("Records do not exists"); }
                    if (dbReader1.HasRows)
                    {
                        var rowCount = 0;

                        while (dbReader1.Read())
                        {
                            var row = new JqGridTemplate1.Row { id = (rowCount + 1) };  //id have to start with 1 cuz jqGrid doesn't start with 0 but 1...
                            row.cell.Add(dbReader1["StockNo"].ToString());
                            row.cell.Add(dbReader1["Vin"].ToString());
                            row.cell.Add(dbReader1["Year"].ToString());
                            row.cell.Add(dbReader1["Make"].ToString());
                            row.cell.Add(dbReader1["Model"].ToString());
                            row.cell.Add(dbReader1["Trim"].ToString());
                            row.cell.Add(string.Format("{0:yyyyMMdd}", DateTime.Parse(dbReader1["StockDate"].ToString())));  //#"{0:MM/dd/yyyy}";
                            returnJqGridTemplate1.rows.Add(row);
                            rowCount++;
                        }
                    }
                }
fletchsod
  • 3,560
  • 7
  • 39
  • 65
  • @Oleg - Do you know what I did wrong with Stock Date formatting? – fletchsod Aug 13 '15 at 20:34
  • try reading this for the format string issues: https://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.110).aspx – ivan Aug 13 '15 at 20:37
  • Oh sorry, I mean the jqgird's javascript side. I recently updated the post to reduce some confustions here. – fletchsod Aug 13 '15 at 20:55
  • the comment with `@Oleg` above don't produced any notification to me. You should post such comment to an *my* old answer or to an question where I wrote my comment before. – Oleg Aug 14 '15 at 06:32
  • By the way you wrote that "free-jqgrid version is 4.6.2". Such version is not exist. You mean probably free jqGrid 4.9.2. – Oleg Aug 14 '15 at 07:24

1 Answers1

1

You should never post cumulative questions because it makes much more difficult to index the questions and so it makes difficult for other people to find the answer. You should always use non-minimized version of CSS and JavaScript files in your demos.

The reason of your problem is not in the settings of your custom CSS zz.css:

<link type="text/css" rel="stylesheet" href="/zzjqgrid/web/1/zz.css" />

which have following CSS rule

table {
    ...
    display: table-cell;
    ...
}

(instead of display: table;). Such global setting is very bad. It breaks the layout of the pager and width:100% not work for the pager table. You should remove it or at least set the setting for some specific CSS class.

About the problems with date formatter. I strictly recommend you to use "{0:yyyyMMdd}". You can just use Date.ToString("yyyy-MM-dd") which includes separater -. It's the standard ISO date format. You should just remove srcformat from formatoptions in the case.

The final advices:

  • I'd recommend you to use height: "auto"
  • remove beforeSend and error properties from ajaxGridOptions and to use loadBeforeSend and loadError instead
  • I would recommend you to review colModel. All index properties should be removed, properties with default value like sortable: true or sorttype: 'text' should be removed too, common settings like align: 'center' should be removed from colModel and you should use cmTemplate: {align: 'center'} jqGrid option instead (see the old answer).
  • You should never use name of colModel which include spaces (like name: 'Stock Number' and name: 'Stock Date'). jqGrid uses name to generate id of some internal elements on the grid. HTML5 don't allows the usage of spaces in id.
  • You should remove multiple absolutely unneeded calls of .trigger("reloadGrid") at the end of Webpage_Onload.
  • I would recommend you to use pager: true option and remove the parameter with the pager id from navGrid and navButtonAdd. I would recommend you to read the wiki article and to use more short form of option navGrid and to specify the options inside of navOptions parameter of jqGrid.
  • I would recommend you to change the format of JSON data returned from the server and to change jsonmap property of colModel. You use currently the property like jsonmap: function (o) { return o.cell[3]; } in every column. If you would make small changes in format of the data you would have to modify all jsonmap properties in colModel. By the way the page, records and total properties of the server response will be ignored in case of usage of loadonce: true. So one can just return array of items from the server.
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Ok, I made some changes. I did what you asked about the Stock Date column and date formatting. I'm getting the " NaN/NaN/NaN " instead of " 03/02/2015 " date. What part of jqgrid date formatting don't I understand ( or missed out on? ). Thanks. – fletchsod Aug 14 '15 at 16:27
  • @fletchsod: 1) I asked you before don't use any min-version (only src of jqGrid) 2) You returns still the date in the format `"20150731"` from the server instead of `"2015-07-31"`, which is wrong. – Oleg Aug 14 '15 at 16:33
  • Done. Fixed src of jqGrid instead of min version. The date formatting works now when changing to yyyy-mm-dd part. Any idea why the Stock Date sorting doesn't work until after clicking it the 3rd and 4th times? – fletchsod Aug 14 '15 at 17:51
  • @fletchsod: I can't reproduce any problem. I just see that initial data returned from the server have wrong sorting. jqGrid send the sorting parameters `sortname: "StockDate", sortorder: "asc"` to the server as `sidx` and `sord`. **The server have to return sorted data**. The next click on the column header works on the client side and it looks correctly in my tests: the column sill be sorted using `desc` order (large dates are the first). – Oleg Aug 14 '15 at 17:58
  • Ah! I understand now on the sortname & sortorder. It works great now and I'm accepting your answer. One other thing, any suggestion on wrong column width on both the column header and the column rows? If you click the Trim (or StockDate) a couple of times then you will see it. – fletchsod Aug 14 '15 at 18:12
  • 1
    @fletchsod: I wrote in my answer that the CSS rule `table: { display: table-cell; }` from `zz.css` is **absolutely wrong**. It means that all tables should be rendered as the cells: ``. If you remove the rule then the problem with the column width will be solved. – Oleg Aug 14 '15 at 18:30
  • Thanks. Looking into it. The downside is making sure table render correctly on 300 plus webpages when I do away with this. :-( – fletchsod Aug 14 '15 at 18:42
  • @fletchsod: You are welcome! I don't understand what you mean with "300 plus webpages". In any way you can see that all tables which uses quick rendering mode (`table-layout: fixed;`, see [here](https://css-tricks.com/fixing-tables-long-strings/) for example for the explanation) will be wrong rendered if you ask to render the table (`display: table;`) as the cell (`display: table-cell;`). The CSS properties `display: table;`, `display: table-cell;` and so on are introduced for the case when you want to use common purpose HTML elements like `
    ` as table parts, not for ``, `
    ` etc.
     – Oleg Aug 14 '15 at 19:01