Increase Width of the datagrid slno column

[thecyberzone]

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.

Code:

<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 ?

[stworthy]

Please refer to this example http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Virtual%20Scroll%20View

[thecyberzone]

Basically in your example the same technique is used.

Code:

    <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 ?

[stworthy]

But same has no effect in my program.

You may need to provide an example to demonstrate your issue.

[thecyberzone]

This is the content of my program :

Code:

<?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>&nbsp;
								<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&nbsp;
								<input type="radio" name="sect" value="Sel" onClick="setSect('Sel')">Selected&nbsp;
								<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>
								&nbsp;&nbsp;<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>&nbsp;
								<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&nbsp;
								<input type="radio" name="prog" value="Sel" onClick="setProg('Sel')">Selected&nbsp;
								<input id="progname" name="progname" class="easyui-combobox" style="width:380px;"
									data-options="valueField:'progcode', textField:'progname', url:'getPrgname.php', required:true" />
								&nbsp;&nbsp;<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

Code:

<!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 :



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.

[stworthy]

Please refer to the attached example 'test.html'.

[thecyberzone]

Here it is working but when data is coming from remote source in my program using following code, it does not work.

Code:

$('#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}
			]]
		});

[thecyberzone]

Now it is working, problem was in referencing the datagrid, now it is solved. Thanks.