EasyUI Forum
March 28, 2024, 05:53:57 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to use DataGrid within a Portal Layout?  (Read 28175 times)
tslatt
Jr. Member
**
Posts: 85



View Profile
« on: July 28, 2011, 10:37:26 AM »

I would like to use a DataGrid table within a portal layout where the table will fill 100% of the width of the column/panel it's in and the height of the panel will extend to show all rows of the data. Then, when the table's panel is dragged to a smaller or larger column, I want it to resize to do the same there. It should only show a horizontal scrollbar if the content of the table cannot squeeze to fit in that column's width.

I've tried several settings while monkeying around with the demo, but can't get these results. Can anyone tell me how this can be accomplished?
Logged
tslatt
Jr. Member
**
Posts: 85



View Profile
« Reply #1 on: November 04, 2011, 07:43:22 AM »

I still can't get a datagrid to work within a portal layout, unless I set a pixel width to it and to each field. The datagrids in my portal need to have a 100% width within their panels, so they can grow or shrink to fill the width of the column they are in. If the column is wider than the table, the table should expand to fill the space. If the column is smaller than the table (when the table is at its smallest possible width due to the content inside it), only then should a scrollbar appear. Also, the striping isn't working -- all rows are white instead of alternating color.

Here's what happens with the widths:

(1) If I set a pixel width for the datagrid, the table won't grow to fill a larger width panel and it won't shrink to its smallest possible width in a panel whose width is smaller than the set pixel amount. But, the content does show up and is readable.

(2) If I set a width of 'auto' or a width of '100%' for the datagrid, I get an empty panel. You see a white background that seems to be the correct height, but there is no datagrid present.



Here is my code:
Code:
<div class="easyui-panel" title="TEST" collapsible="true" closable="true" maximizable="true">

  <table width="100%" cellspacing="0" cellpadding="0" border="0" id="test-datagrid" class="easyui-datagrid">
    <thead>
      <tr>
        <th align="left" field="checknum">Check Number</th>
        <th align="center" field="status">Status</th>
        <th align="right" field="period">Period</th>
        <th align="right" field="total">Total</th>
        <th align="right" field="date">Date</th>
        <th align="right" field="released">Released</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="left"><a href="#">Direct Dep</a></td>
        <td align="center">C</td>
        <td align="right">6/25/2010 11:59:59 PM</td>
        <td align="right">$947.00</td>
        <td align="right">7/2/2010</td>
        <td align="right">6/30/2010 2:14:00 PM</td>
      </tr>
      <tr>
        <td align="left"><a href="#">10873</a></td>
        <td align="center">C</td>
        <td align="right">6/18/2010 11:59:59 PM</td>
        <td align="right">$297.00</td>
        <td align="right">6/25/2010</td>
        <td align="right">6/24/2010 8:56:00 AM</td>
      </tr>
    </tbody>
  </table>

  <script type="text/javascript">
  $(document).ready(function() {
    $('#test-datagrid').datagrid({
      fitColumns: true,
      striped: true,
      nowrap: false,
      sortName: 'released',
      sortOrder: 'desc',
      width: 660,
      columns:[[ 
        {field: 'checknum', title: 'Check Number', width: 110, sortable: true, resizable: true, align: 'left'},
        {field: 'status', title: 'Status', width: 60, align: 'center'},
        {field: 'period', title: 'Period', width: 140, align: 'right'},
        {field: 'total', title: 'Total', width: 100, align: 'right'},
        {field: 'date', title: 'Date', width: 110, align: 'right'},
        {field: 'released', title: 'Released', width: 140, align: 'right'}
      ]]
    });
  });
  </script>

</div>



Can anyone tell me what I am doing wrong, and whether what I am trying to do is even possible? Any help would be greatly appreciated.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #2 on: November 04, 2011, 08:31:14 PM »

When datagrid parent panel resize, try call 'resize' method for your datagrid:

Code:
<div id="pdatagrid" title="TEST" collapsible="true" closable="true" maximizable="true">
  <table width="100%" cellspacing="0" cellpadding="0" border="0" id="test-datagrid" class="easyui-datagrid">
  ...
  </table>
</div>
Code:
$('#pdatagrid').panel('options').onResize = function(){
  $('#test-datagrid').datagrid('resize');
}
Logged
tslatt
Jr. Member
**
Posts: 85



View Profile
« Reply #3 on: November 08, 2011, 10:27:04 AM »

That helped some. Now I can specify a 100% width for the table, the content shows up (instead of the blank panel), and the content grows/shrinks when the panel resizes.

However I still have a few issues:

(1) The text in the table is not wrapping. Instead, it is just getting cut off, even though I specified "nowrap: false".
(2) If the content won't fit inside the panel width even AFTER wrapping, it should stretch to the minimum width that will fit the content, and should show a horizontal scrollbar in the panel. I tried setting "fitColumns: false", but when I do that, the table content doesn't show up at all -- just the header row shows.
(3) The rows are not alternating background color, although I set "striped: true".

I must be misunderstanding the settings. Could you look at my settings and tell me what I can do to make the content wrap, show a horizontal scrollbar if necessary, and alternate row colors?

I really appreciate your help!

Code:
<script type="text/javascript">
$(document).ready(function() {
  $('#test-datagrid').datagrid({
    fitColumns: true,
    striped: true,
    nowrap: false,
    sortName: 'released',
    sortOrder: 'desc',
    width: '100%',
    columns:[[ 
      {field: 'checknum', title: 'Check Number', width: 110, sortable: true, resizable: true, align: 'left'},
      {field: 'status', title: 'Status', width: 60, align: 'center'},
      {field: 'period', title: 'Period', width: 140, align: 'right'},
      {field: 'total', title: 'Total', width: 100, align: 'right'},
      {field: 'date', title: 'Date', width: 110, align: 'right'},
      {field: 'released', title: 'Released', width: 140, align: 'right'}
    ]]
  });
});
</script>
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 on: November 08, 2011, 07:53:40 PM »

Try specify 'break-word' value with 'word-wrap' property for the datagrid cells:

.datagrid-body .datagrid-cell{
   word-wrap: break-word;
   white-space: normal;
}
Logged
tslatt
Jr. Member
**
Posts: 85



View Profile
« Reply #5 on: November 09, 2011, 10:44:56 AM »

Replacing "word-wrap:normal;" in the css with "word-wrap: break-word;" made things worse, because it caused words to break in the middle of the word. So I left it at "normal".

Replacing "white-space:nowrap;" in the css with "white-space: normal;" partially fixed the wrapping issue. Now the content in the cells will wrap if it does not fit in the space allotted. However, if the content does not fit in the space even after being wrapped, like if a word was too long, it gets cut off. I tried changing "overflow: hidden" to "overflow: visible", but that just makes the word extend past the borders of its cell, and "overflow: auto" causes scrollbars within a cell. What should happen is that the column containing content that won't fit should be made wider, and a horizontal scrollbar should appear at the bottom of the panel.

Also, I still can't get the alternating background colors for rows to work.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!