Print Page - Datagrid RenderRow

please help, I have a problem regarding the use DataGrid renderRow why in the column header (title) and the data is not aligned or do not look the same column. like this syntax:

html:
-------

<table>
<thead>
<tr>
<th style = "width: 92px" field = "item_kode"> <b> Item Code </ b> </ th>
<th style = "width: 191px" field = "ITEM_NAME"> <b> Item Name </ b> </ th>
<th style = "width: 250px" field = "description"> <b> Description </ b> </ th>
<th style = "width: 48px" field = "qty"> <b> Qty </ b> </ th>
<th style = "width: 104px" field = "price_normal"> <b> Price Normal </ b> </ th>
<th style = "width: 97px" field = "price_sale"> <b> Price Sale </ b> </ th>
<th style = "width: 92px" field = "BRAND_NAME"> <b> Brand </ b> </ th>
</ tr>
</ thead>
</ table>

javascript:
---------------

<script>
cardview var = $ .extend ({}, $ .fn.datagrid.defaults.view, {
renderRow: function (target, fields, frozen, rowIndex, rowData) {
var cc = [];
cc.push ('<td width = 92px>' + rowData.item_kode + '</ td>');
if (frozen) {
cc.push ('<td width = 191>' + rowData.item_name + '</ td>');
cc.push ('<td width = 250px>' + rowData.description + '</ td>');
cc.push ('<td width = 48px>' + rowData.qty + '</ td>');
cc.push ('<td width = 104px>' + rowData.price_normal + '</ td>');
cc.push ('<td width = 97px>' + rowData.price_sale + '</ td>');
cc.push ('<td width = 92px>' + rowData.brand_name + '</ td>');
}

$ ('# dg'). DataGrid ('fixColumnSize');
cc.join return ('');
}
});

$ (function () {
$ ('# dg'). DataGrid ({
view: cardview
});
});
</ script>

I need your help for this problem and I really appreciate it.

regards,

Rudy

Please try to set the 'box-sizing' CSS style with 'border-box'. To learn more how to extend a datagrid view, please refer to http://www.jeasyui.com/extension/datagridview.php

Code:

<style type="text/css">
  *{
    box-sizing:border-box;
  }
</style>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Rudy on October 04, 2015, 05:11:20 PM