Title: Increase Width of the datagrid slno column
Post by: thecyberzone on April 12, 2015, 10:29:21 PM
If a datagrid contain more than 999 rows, default settings cannot accommodate to display the 4 digits, please let me know how to increase the width of leftmost slno column to accommodate at least 5 digits at a time. I have tried following CSS, but no-effect. <style type="text/css">
.datagrid-header-rownumber,.datagrid-cell-rownumber{
width:80px;
}
</style> In the same datagrid even data-option striped:true is also not works. Any help ?
Title: Re: Increase Width of the datagrid slno column
Post by: stworthy on April 12, 2015, 11:49:31 PM
Please refer to this example http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Virtual%20Scroll%20View
Title: Re: Increase Width of the datagrid slno column
Post by: thecyberzone on April 13, 2015, 05:48:02 AM
Basically in your example the same technique is used. <style type="text/css">
.datagrid-header-rownumber,.datagrid-cell-rownumber{
width:40px;
}
</style> But same has no effect in my program. Is it required to define autoRowHeight:false. But it is for height not for width. I want ot change the width of the column. The above said style should work but it is not working in my project. As I told before, even striped:true options is also not working. Any suggetion ?
Title: Re: Increase Width of the datagrid slno column
Post by: stworthy on April 13, 2015, 07:57:58 AM
But same has no effect in my program.
You may need to provide an example to demonstrate your issue.
Title: Re: Increase Width of the datagrid slno column
Post by: thecyberzone on April 13, 2015, 10:42:20 PM
This is the content of my program : <?PHP
include("lock.php");
include("header.php");
?>
<div id="code1">
<div id="dlg">
<script type="text/javascript" src="need.js"></script>
<div id="tabbar">
<div class="easyui-tabs" style="width:800px;height:100px"
tabPosition="left" headerWidth="120" plain="true" tabHeight="44">
<div title="Section-wise" style="padding:10px">
<div class="fitem">
<label4>Year:</label4>
<input id="year2" name="year2" class="easyui-combobox"
style="width:100px;"
data-options="
valueField:'year',
textField:'tyear',
data: [ {year:'2012', tyear:'2012-2013'},
{year:'2013', tyear:'2013-2014'},
{year:'2014', tyear:'2014-2015'},
{year:'2015', tyear:'2015-2016'},
{year:'2016', tyear:'2016-2017'},
{year:'2017', tyear:'2017-2018'},
{year:'2018', tyear:'2018-2019'},
{year:'2019', tyear:'2019-2020'},
{year:'2020', tyear:'2020-2021'}
],
required:true" />
<div style="display: inline-block; width:80px; text-align:right; ">
<a href="#" class="easyui-linkbutton" iconCls="icon-print" onclick="year=$('#year2').combobox('getText');CreateFormPage('Printing', $('#dg'));">Print</a>
</div>
</div>
<br />
<div class="fitem">
<label4>Section:</label4>
<input type="radio" name="sect" value="All" onClick="setSect('All')" checked="checked">All
<input type="radio" name="sect" value="Sel" onClick="setSect('Sel')">Selected
<select id="cg" name="cg" class="easyui-combogrid" style="width:380px; padding-right:10px;"
data-options="panelWidth: 500,
idField: 'secode2', textField: 'section',
url: 'getSection.php',
mode: 'remote',
fitColumns:true,
columns: [[
{field:'secode2',title:'SeCode',width:60,align:'right'},
{field:'secode',width:0,hidden:true},
{field:'section2',width:0, hidden:true},
{field:'section',title:'Section',width:260},
{field:'deptname',title:'Department',width:200}
]],
required:true
">
</select>
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="show('S')">Show</a>
</div>
</div>
<div title="Program-wise" style="padding:10px" >
<div class="fitem">
<label4>Year:</label4>
<input id="year1" name="year1" class="easyui-combobox"
style="width:100px;"
data-options="
valueField:'year',
textField:'tyear',
data: [ {year:'2012', tyear:'2012-2013'},
{year:'2013', tyear:'2013-2014'},
{year:'2014', tyear:'2014-2015'},
{year:'2015', tyear:'2015-2016'},
{year:'2016', tyear:'2016-2017'},
{year:'2017', tyear:'2017-2018'},
{year:'2018', tyear:'2018-2019'},
{year:'2019', tyear:'2019-2020'},
{year:'2020', tyear:'2020-2021'}
],
required:true" />
<div style="display: inline-block; width:80px; text-align:right; ">
<a href="#" class="easyui-linkbutton" iconCls="icon-print" onclick="year=$('#year1').combobox('getText');CreateFormPage('Printing', $('#dg'));">Print</a>
</div>
</div>
<br />
<div class="fitem">
<label4>Program:</label4>
<input type="radio" name="prog" value="All" onClick="setProg('All')" checked="checked">All
<input type="radio" name="prog" value="Sel" onClick="setProg('Sel')">Selected
<input id="progname" name="progname" class="easyui-combobox" style="width:380px;"
data-options="valueField:'progcode', textField:'progname', url:'getPrgname.php', required:true" />
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="show('P')">Show</a>
</div>
</div>
</div>
</div>
[color=red]<style type="text/css">
.datagrid-header-rownumber,.datagrid-cell-rownumber{
width:40px;
}
</style>[/color]
<table id="dg" title="Annual Training Need" class="easyui-datagrid" style="width:800px;height:350px;"
toolbar="#toolbar" data-options = "rownumbers:true, singleSelect:true, fitColumns:true,
remoteSort:false, multiSort:false,[color=red] striped:true,[/color] view:scrollview, autoRowHeight:false"></table>
</div>
</div>
<?PHP
include("footer.php");
?> And here is the content of header.php <!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Competence Assessment System</title>
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="ui/demo/demo.css">
<script type="text/javascript" src="ui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div id="wrapper">
<div id="topbar">
<div id="logo">
<a href="main.php"><img src="images/logo.jpg" width="349" height="98" border="0" alt="logo" /></a>
</div>
<div id="userid">
<a href="" class="easyui-menubutton" menu="#mm1" style="margin:0px;">
<img src="images/user2.png" width="25" height="25" border="0" alt="UserId" />
<?PHP echo strtoupper($_SESSION['userid']); ?>
</a>
</div>
<div id="mm1" style="width:200px;">
<?PHP
if (strtoupper($_SESSION['usercat'])=="A") {
?>
<div iconCls="icon-close" onclick="window.open('access.php','_self',false)">Access Permission</div>
<div class="menu-sep"></div>
<?PHP
}
?>
<div iconCls="icon-close" onclick="window.open('logout.php','_self',false)">Logout</div>
</div>
<div id="bar1">
<img height="30px" src="images/menu_bg.gif" width="1002" />
</div>
</div>
<div id="mid1" >
<?PHP
include "leftbar.php";
?>
And here is the ouput screen : (http://1.bp.blogspot.com/-ssZzIW-FoP8/VSyogv_SXFI/AAAAAAAABqI/M2uApB0NeC0/s1600/test.jpg) Please notice that in the main ode, RED COLOURED portion contains style required to change the column width, but notice in the attached image that width has not been increased. It is also noted that the datagrid #dg contain striped:true option, but in output there is also no effect of the same.
Title: Re: Increase Width of the datagrid slno column
Post by: stworthy on April 14, 2015, 12:28:16 AM
Please refer to the attached example 'test.html'.
Title: Re: Increase Width of the datagrid slno column
Post by: thecyberzone on April 14, 2015, 04:14:32 AM
Here it is working but when data is coming from remote source in my program using following code, it does not work. $('#dg').datagrid({
url:'getNeed.php?type='+t+'&yr='+yr+'&val='+x,
columns:[[
{field:'year',hidden:true},
{field:'tno2',title:'T/No',width:100,align:'center',sortable:true},
{field:'name',title:'Name',width:250,sortable:true},
{field:'secode2',title:'SeCode',width:80,align:'center',sortable:true},
{field:'mapprog',title:'Program',width:350,sortable:true},
{field:'trgcode',title:'ProgCode',width:100,align:'center',sortable:true},
{field:'trgdate',title:'PlanDate',width:120,align:'center',sortable:true}
]]
});
Title: Re: Increase Width of the datagrid slno column
Post by: thecyberzone on April 14, 2015, 04:26:29 AM
Now it is working, problem was in referencing the datagrid, now it is solved. Thanks.
|