53591

jqgrid double headers

Question:

Can we include two headers in jqgrid. One with a colModel and one without a colModel?

Also I have an issue where when I click one row, the entire grid gets highlighted. How can I resolve this issue?

CSS Code:

.cssclass{ background-color : #EEEEEE; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #0B0B61; border: 0; font-weight: bold; text-align: center; text-indent: 2pt; padding-top: 2px; padding-right: 2px; padding-left: 2px; left: expression(parentNode.parentNode.parentNode.parentNode.parentNode.scrollLeft); position:relative; z-index:10; cursor: default; }

jqgrid code:

$.ajax({ type: "POST", url: 'cfcs/index.cfc?method=getCols', data: "", dataType: "json", success: function(result) { colM = eval("([" + result.COLMODEL + "])"); colN = result.COLNAMES; jQuery("#list").jqGrid({ url:'cfcs/index.cfc?method=getDetails', datatype: 'json', mtype: 'POST', colNames:colN, colModel :colM, height: 'auto', hoverrows: true, width: 1260, shrinkToFit: false, pager: jQuery('#pager'), resizable: false, rowNum: 25, rowList: [25, 50, 100], viewrecords: true, jsonReader: { root: "ROWS", //our data page: "PAGE", //current page total: "TOTAL", //total pages records:"RECORDS", //total records cell: "", id: "0" } //loadComplete: function(data){alert('loaded');}, //loadError: function(xhr,status,error){alert('error');} }) $("#list").setLabel("col1","<br><br>col1","cssclass"); $("#list").setLabel("col2","<br><br>col1","cssClass"); $("#list").jqGrid('navGrid','#pager',{ edit:false, add:false, del:false, search:true, refresh: true, searchtext:"Search", refreshtext: "Refresh", 'cloneToTop':true }); }, error: function(x, e) { alert(x.readyState + " "+ x.status +" "+ e.msg); } });

Thanks.

Answer1:

About your second problem. I supose that you use the same id for all grid rows. The row id must be unique, then you will not have the descibed problem.

About two headers I don't really understand what you mean. Prabably you can explain what you mean in other words or post a picture.

Answer2:

You may consider putting using separate grids for each date range, and just formatting them to look like they are together.

--------------------------------------------------- | 1/1/2010 | 1/2/2010 | --------------------------------------------------- | grid 1 header | grid 2 header | ---------------------------------------------------

You could tie the various events for grid1, and grid2 together, so selecting row 10 in grid1 selects it in grid2 as well.

You may also want to look at the <a href="http://www.trirand.com/blog/jqgrid/jqgrid.html" rel="nofollow">subgrid demos here</a> under "Advanced" and see if there is something that will work for your data.

<hr />

<strong>Alternative</strong>

After reading over your comments I think this might be closer to what you want, just change out units for date range. <img alt="alt text" class="b-lazy" data-src="https://i.stack.imgur.com/cOCyf.jpg" data-original="https://i.stack.imgur.com/cOCyf.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

.ui-jqgrid .ui-jqgrid-htable th div { height: auto; padding: 5px 0px; }

Recommend

  • Cannot register REST services
  • Why can't I change objects in a vector?
  • JSON Data Parsing Error the response from server becomes null: Android
  • JSON Data Parsing Error the response from server becomes null: Android
  • 404 error - Google attempting to index ColdFusion CFC
  • Converting datatype Char to Nvarchar
  • Can you use DataSet and DataTables in a Portable Class Library
  • How do I change the kernel/python version for iPython?
  • (Play 2.5) How do you define json format for type alias of an Option?
  • How do I bind multiple properties in an Android layout element
  • Unzip archive in .Net CORE 1.0
  • Telegram bot API - Inline bot getting Error 400 while trying to answer inline query
  • What is corresponding c++ data type to SQL numeric(18,0) data type?
  • Select value from xtype selection type checkbox CQ5
  • Javascript CORS - No 'Access-Control-Allow-Origin' header is present
  • Exception creating JSON with LINQ
  • Angular2 Response for preflight is invalid (redirect) from some GET requests
  • pyodbc doesn't report sql server error
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Play WS (2.2.1): post/put large request
  • Get data from AJAX - How to
  • Different response to non-authenticated users and AJAX calls
  • Bug in WPF DataGrid
  • Trying to switch camera back to front but getting exception
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • AngularJs get employee from factory
  • Free memory of cv::Mat loaded using FileStorage API
  • Angular 2 constructor injection vs direct access
  • embed rChart in Markdown
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • Is it possible to post an object from jquery to bottle.py?
  • Programmatically clearing map cache
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?