Introduction
This article shows how to add a JavaScript tree menu to the DataGrid head text, as well as dynamically change the header text, which my clients require to change the date formats and dynamically change the column header text.
This demo program demonstrates these ideas.
Implementation
To demonstrate this idea, I put the following piece of code in a .aspx page:
<asp:datagrid>
<Columns id="DataGrid1" CellPadding="2" BorderColor="#CC9966"
style="Z-INDEX: 101; LEFT: 100px; POSITION: absolute; TOP: 47px"
EnableViewState="False" runat="server"
AutoGenerateColumns="False">
<asp:BoundColumn HeaderText="Last Name" DataField="LastName"
ItemStyle-Width="150px" ></asp:BoundColumn>
<asp:BoundColumn HeaderText="First Name" DataField="FirstName"
ItemStyle-Width="150px" ></asp:BoundColumn>
<asp:BoundColumn HeaderText="_Date" DataField="Date"
ItemStyle-Width="150px"></asp:BoundColumn>
</Columns>
</asp:datagrid>
To add a tree menu to the DataGrid header text, I add an “onMouseOver” event to the head text JavaScript:
headtext = "<a href='#'" + " onMouseOver='HM_f_PopUp(\"elMenu1\",event)'"
+ " onclick='javascript:document.getElementById(\"{0}\").click();'>" +
date + "</a>";
The SetHeaderText functions as follows:
private void SetHeadText()
{
string headtext = "";
//date from AppSettings["HeaderDate"]
string date = ConfigurationSettings.AppSettings["HeaderDate"];
if(date.Length > 0)
{
//Note add an "onMouseOver" event
headtext = "<a href='#'" +
" onMouseOver='HM_f_PopUp(\"elMenu1\",event)'" +
" onclick='javascript:document." +
"getElementById(\"{0}\").click();'>" +
date + "</a>";
}
else
{
headtext = "<a href='#'" +
" onMouseOver='HM_f_PopUp(\"elMenu1\",event)'" +
" onclick='javascript:document.getElementById(\"{0}\")." +
"click();'>Date</a>";
}
//Set Header Text
this.DataGrid1.Columns[2].HeaderText = string.Format(headtext,2);
}
The tree menu "DateMenu" method functions as:
private void DateMenu(string strBrowser, string strScriptDir)
{
StringBuilder sb = new StringBuilder();
bool IsSecure;
string strAddress = "";
IsSecure = Request.IsSecureConnection;
Uri MyUrl = Request.Url;
string strUri = MyUrl.AbsoluteUri;
string strScriptName = MyUrl.AbsoluteUri;
if (IsSecure==true )
{
strAddress = MyUrl.AbsoluteUri.Replace("http", "https");
}
else
{
strAddress = MyUrl.AbsoluteUri;
}
string strHrefParam,strSortDate;
string strGregorian1,strGregorian2,strGregorian3,strGregorian4;
string strJulian;
strHrefParam = "ChangeDateFormat=" + strChangeDateFormat;
strSortDate = strAddress + "?" + strHrefParam +
"&DateFormat=" + strDateFormat;
strGregorian1 = strAddress + "?" + strHrefParam +
"&DateFormat=" + "mm/dd/yyyy" ;
strGregorian2 =strAddress + "?" + strHrefParam +
"&DateFormat=" + "dd/mm/yyyy";
strGregorian3 = strAddress + "?" + strHrefParam +
"&DateFormat=" + "mm/dd/yy";
strGregorian4 = strAddress + "?" + strHrefParam +
"&DateFormat=" + "dd/mm/yy";
strJulian = strAddress + "?" + strHrefParam +
"&DateFormat=" + "yyyy.ddd";
sb.Append("<script language='JavaScript1.2'>" + "\n\r");
sb.Append("var varDate ='" + strSortDate +"'; " +"\n\r");
sb.Append("var varGregorian1 ='" + strGregorian1 +"'; " + "\n\r");
sb.Append("var varGregorian2 ='" + strGregorian2 +"'; " + "\n\r");
sb.Append("var varGregorian3 ='" + strGregorian3 +"'; " + "\n\r");
sb.Append("var varGregorian4 ='" + strGregorian4 +"'; "+ "\n\r");
sb.Append("var varJulian ='" + strJulian +"'; " + "\n\r");
if(bCheckIE==true)
{
sb.Append ("HM_Array1 = [");
sb.Append (" [90], ");
sb.Append (" ['Others', varDate, 1,0,0],");
sb.Append (" ['Format Date','',1,0,1] ");
sb.Append (" ];" + "\n\r");
sb.Append ("HM_Array1_2 = [");
sb.Append (" [],");
sb.Append (" ['MM/DD/YYYY', varGregorian1 ,1,0,0],");
sb.Append (" ['DD/MM/YYYY', varGregorian2 ,1,0,0],");
sb.Append (" ['MM/DD/YY', varGregorian3 ,1,0,0],");
sb.Append (" ['DD/MM/YY', varGregorian4 ,1,0,0],");
sb.Append (" ['YYYY.DDD', varJulian ,1,0,0] ");
sb.Append (" ] " + "\n\r");
}
else
{
sb.Append ("HM_Array1 = [");
sb.Append (" [90], ");
sb.Append (" ['Sort Date', varDate, 1,0,0],");
sb.Append (" ['MM/DD/YYYY', varGregorian1 ,1,0,0],");
sb.Append (" ['DD/MM/YYYY', varGregorian2 ,1,0,0],");
sb.Append (" ['MM/DD/YY', varGregorian3 ,1,0,0],");
sb.Append (" ['DD/MM/YY', varGregorian4 ,1,0,0],");
sb.Append (" ['YYYY.DDD', varJulian ,1,0,0] ");
sb.Append (" ]" + "\n\r");
}
sb.Append ("HM_DOM = (document.getElementById) ? true : false;" + "\n\r");
sb.Append ("HM_NS4 = (document.layers) ? true : false;" + "\n\r");
sb.Append ("HM_IE = (document.all) ? true : false;" + "\n\r");
sb.Append ("HM_IE4 = HM_IE && !HM_DOM;" + "\n\r");
sb.Append ("HM_Mac = (navigator.appVersion.indexOf('Mac') != -1);" + "\n\r");
sb.Append ("HM_IE<chmetcnv w:st="on" unitname="m" sourcevalue="4" hasspace="False" negative="False" numbertype="1" tcsc="0">4M</chmetcnv> = HM_IE4 && HM_Mac;" + "\n\r");
sb.Append ("HM_IsMenu = (HM_DOM || HM_NS4 || (HM_IE4 && !HM_IE<chmetcnv w:st="on" unitname="m" sourcevalue="4" hasspace="False" negative="False" numbertype="1" tcsc="0">4M</chmetcnv>));" +
"\n\r");
sb.Append ("HM_BrowserString = HM_NS4 ? 'NS4'" +
" : HM_DOM ? 'DOM' : 'IE4';" + "\n\r");
sb.Append ("if(window.event + '' == 'undefined') event = null;" + "\n\r");
sb.Append ("function HM_f_PopUp(){return false};" + "\n\r") ;
sb.Append ("popUp = HM_f_PopUp;" + "\n\r");
sb.Append ("</script>" + "\n\r");
sb.Append ("\n\r");
sb.Append ("<script language='JavaScript' src='"+
strScriptDir+
"/web_menu.js'></script>" + "\n\r");
sb.Append("<script language='JavaScript'" +
" src='Script/web_scriptiens6.js'></script>" +
"\n\r");
Response.Write( sb.ToString());
}
I stored the default date format in the Web.config AppSettings["DateFormat"]. The use of key/value pair settings simply populates a hashtable that you can access with your application, which allows you to dynamically change your application settings. If the configuration data settings change, the application is automatically restarted and the new values are used. Of course, you can also use the XML file.
Note that, in the user interface, the header text is "_Date", however, at AppSettings, I set the header text as "Date". So the screen displays "Date" instead of "_Date".
Here is my appSettings:
<appSettings>
<add key="ScriptDir" value="SCRIPT" />
<add key="DateFormat" value="mm/dd/yyyy" />
<add key="HeaderDate" value="Date" />
</appSettings>
The date format function "GetDateFormat" is as shown below:
private void GetDateFormat()
{
//tempDate from AppSettings
string tempDate = ConfigurationSettings.AppSettings["DateFormat"].ToLower();
if(tempDate == "" || tempDate == null)
tempDate = "mm/dd/yyyy";
//strDateFormat from QueryString
strDateFormat= Request.QueryString["DateFormat"];
string [] arTempDateFormat = null;
if(strDateFormat == null || strDateFormat == "")
strDateFormat= tempDate;
else if(strDateFormat.IndexOf(',') != -1)
{
arTempDateFormat = strDateFormat.Split(',');
int len = arTempDateFormat.Length;
for(int iDateFormat=0; iDateFormat<len; iDateFormat++)
{
strDateFormat = arTempDateFormat[len-1];
}
}
//Display an error message when appSettings "DateFormat" key is invalid.
if (strDateFormat != "mm/dd/yyyy" && strDateFormat != "dd/mm/yyyy" &&
strDateFormat != "mm/dd/yyyy" && strDateFormat != "mm/dd/yy" &&
strDateFormat != "dd/mm/yy" && strDateFormat != "yyyy.ddd")
{
strMsg = "";
strMsg = "Date Format is incorrect:( " + strDateFormat + ")";
strMsg = doErrorMsg(strMsg);
Response.Write(strMsg);
}
}
Next is binding the data. The SetHeadText() function must be called before calling the DataBind() function.
private void BindDataGid(ArrayList alData)
{
this.SetHeadText();
DataGrid1.DataSource = alData;
DataGrid1.DataBind();
}
Conclusion
By using this example program, you can easily add a tree menu to the column header text, as well as dynamically change application settings via Web.config appSettings.
About <city w:st="on"><place w:st="on">Florence</place></city> FZ Li
|
M.S.: Computer Science, B.S.: Physics, MCSD: .NET, MCSD: VS 6
<city w:st="on">Florence</city> currently works at Confident Software, Inc. <city w:st="on">Atlanta</city>, <country-region w:st="on"><place w:st="on">U.S.A.</place></country-region> Besides programming, during her spare time she enjoys opera.
Click here to view Florence FZ Li's online profile.
|
分享到:
相关推荐
wpf 动态合并datagrid表头单元格
WPF中的DataGrid合并单元格,模板列内嵌套DataGrid,非真正合并
DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
wpf datagrid排序列表头文字右边的升降箭头Demo,下载下来用VS2019编辑即可执行!!
WPF根据xml配置文件加载DataGrid列。这样可以做到修改xml文件来改变数据表格列,更加灵活。
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
简单的修改DataGrid的表头的方法,希望有帮助
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
解决EasyUIdataGrid列比较多,无数据,列展现不全
flex 自定义 datagrid 列头带组合框进行过滤
前台使用Jquery EasyUI 插件datagrid实现多表头动态生成的功能
DataGrid表头合并和单元格内容合并-升级版
WPF DataGrid 动态添加 行列 比较靠谱的,可以看看,通俗易懂
DataGrid 统计每一列的值,合计在底部。 这里的合计是在 DataGrid 的内部,汇总在最后一行,在 DataGrid 横向滚动条的上方进行汇总。
datagrid 4种解决方案 表头与列对齐
介绍数据表格DataGrid的基础用法。 DataGrid可用AutoGenerateColumns属性控制列的生成。Column包含DataGridTextColumn、DataGridCheckBoxColumn、DataGridComboBoxColumn、DataGridHyperlinkColumn、...
使用简单的方式实现复合表头,灵活操作,拖动列不受影响
C# 修改winform程序中datagrid列头信息的实际例子源码,内含讲解,和一段实际操作的例子,不错的知识点,供大家学习,我们都知道,再ASP.NET中的datagrid可以设置属性列的列头,但是在winform中却不能,所以提供这个...