|
|
Rank: Member
Groups: Member
Joined: 9/22/2009
Posts: 24
|
Hi there, I am creating a "DatePicker- WebCustomControl" for a GridCalndarColumn. I added 2 context menu's for month and year and Footertemplate to a date picker.I added javascript code in a JS file and included.In my grid out of 5 , 2 are datepicker columns. "MinValidaDate" and "MaxValidDate" are different to each column.so,I am calling "YearMenuClick" dynamically. I am adding this calendarcolumn to asp:datagrid dynamically in code behind.Without context menu its working fine. Following are issues: 1. I added styles to a label,but styles are not reflecting in "FooterTemplate". 2. "YearMenu" popup is not populating "Year" contextmenu. Following is my javascript code:
Code: JavaScript
// JScript File
var g_curCalendar = null;
function ShowMonthPopup(calendar, refLink)
{
g_curCalendar = calendar;
var monthPicker = document.getElementById(calendar);
eo_GetObject(g_curCalendar).showContextMenu(monthPicker, "cmMonthMenu");
}
function MonthMenuClicked(e, info)
{
var month = info.getItem().getIndex();
var calendar = eo_GetObject(g_curCalendar);
//Get the current month
var curMonth = calendar.getVisibleDate();
//Change the month
curMonth.setMonth(month);
//Set the new current month
calendar.goTo(curMonth);
}
function ShowYearPopup(calendar, refLink)
{
var calendarID = calendar.replace("picker","cmYearMenu") ;
g_curCalendar = calendar;
var yearPicker = document.getElementById(calendar);
eo_GetObject(g_curCalendar).showContextMenu(yearPicker, calendarID);
}
function YearMenuClicked(e, info)
{
var year = info.getItem().getIndex();
var minYear = 1976;
var calendar = eo_GetObject(g_curCalendar);
//Get the current month
var curMonth = calendar.getVisibleDate();
//Set the new year
curMonth.setFullYear(year + minYear);
//Set the new current month
calendar.goTo(curMonth);
}
Following is WebCustomcontrol.cs code snippet:
Code: C#
public void InstantiateIn(System.Web.UI.Control container)
{
try
{
Literal lc = new Literal();
switch (templateType)
{
case ListItemType.Header:
lc.Text = "<B>" + columnName + "</B>";
container.Controls.Add(lc);
break;
case ListItemType.Item:
picker = new EO.Web.DatePicker();
picker.Enabled = _Enabled;
picker.PickerFormat = _PreferedDateFormat;
picker.MinValidDate = _MinDate;
picker.MaxValidDate = _MaxDate;
picker.Width = _CalendarControlWidth;
picker.EnableViewState = _EnabledViewState;
picker.DayHeaderFormat = DayNameFormat.Short;
picker.TitleFormat = "MMMM, yyyy";
picker.AutoPostbackOnScroll = false;
picker.AutoPostbackOnSelect = false;
picker.TitleLeftArrowImageUrl = "DefaultSubMenuIconRTL";
picker.DayCellHeight = 15;
picker.OtherMonthDayVisible = true;
picker.EnableOtherMonthDays = false;
picker.DayCellWidth = 31;
picker.TitleRightArrowImageUrl = "DefaultSubMenuIcon";
picker.TitleTemplateScope = CalendarTitleTemplateScope.TextOnly;
picker.CssClass = "EOCalendarStyle";
picker.DayHeaderStyle.CssClass = "EODayHeaderStyle1";
picker.DayHoverStyle.CssText = "background-image:url('00040402');color:#1c7cdc;";
picker.DisabledDayStyle.CssClass = "EODisabledDayStyle1";
picker.DayHeaderStyle.CssClass = "EODayHeaderStyle1";
picker.SelectedDayStyle.CssClass = "EOSelectedDayStyle1";
picker.MonthStyle.CssClass = "EOMonthStyle1";
picker.TitleStyle.CssClass = "EOTitleStyle1";
picker.TitleArrowStyle.CssClass = "EOTitleArrowStyle1";
picker.CalendarStyle.CssClass = "EOCalendarStyle1";
picker.TodayStyle.CssClass = "EOTodayStyle";
picker.DisableTextBox = _disableDatePicker;
picker.PickerHint = _PreferedDateFormat.ToUpper();
picker.ID = controlID;
picker.Enabled = _Enabled;
/******* Adding Footer to Control ***********/
picker.FooterTemplate = new ClientTemplate();
picker.FooterTemplate.EnableTheming = true;
picker.FooterTemplate.EnableViewState = true;
picker.FooterTemplate.Visible = true;
Label dateLabel = new Label();
dateLabel.Text = "Today:" + DateTime.Today.ToShortDateString();
dateLabel.Style.Add(HtmlTextWriterStyle.PaddingLeft, "30");
dateLabel.Style.Add(HtmlTextWriterStyle.FontFamily, "Verdana");
dateLabel.Style.Add(HtmlTextWriterStyle.FontSize, "11");
dateLabel.Style.Add(HtmlTextWriterStyle.Color, "red" );
dateLabel.Attributes.Add("CssClass", "EOCalendarControlFooter");
//dateLabel.CssClass = "EOCalendarControlFooter";
ClientTemplate ct = new ClientTemplate();
ct.Text = dateLabel.Text;
picker.FooterTemplate = ct;
/******* Adding Footer to Control ***********/
CustomValidator validator = new CustomValidator();
validator.ClientValidationFunction = _ClientsideCustomValidation;
ContextMenu cmMonthMenu = new ContextMenu();
cmMonthMenu.ID = "mnuMonth" + controlID;
cmMonthMenu.ControlSkinID = "None";
cmMonthMenu.Style.Add(HtmlTextWriterStyle.Width, "80");
cmMonthMenu.ClientSideOnItemClick = "javascript:return MonthMenuClicked(event,this);";
cmMonthMenu.TopGroup.Style.CssText = "border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:10px;padding-right:10px;padding-top:3px;";
cmMonthMenu.TopGroup.OffsetX = 115;
cmMonthMenu.TopGroup.OffsetY = -100;
LoadMenuMonths(ref cmMonthMenu);
EO.Web.MenuItem mnuMonth = new EO.Web.MenuItem();
mnuMonth.HoverStyle.CssText = "color:#1C7CDC;padding-left:5px;padding-right:5px;";
mnuMonth.ItemID = "_Default";
mnuMonth.NormalStyle.CssText = "color:#2C0B1E;padding-left:5px;padding-right:5px;";
mnuMonth.SubMenu.Style.CssText = "background-color:White;border-bottom-color:#e0e0e0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;color:#606060;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;";
mnuMonth.SubMenu.ShadowDepth = 0;
mnuMonth.SubMenu.ItemSpacing = 5;
cmMonthMenu.LookItems.Add(mnuMonth);
ContextMenu cmYearMenu = new ContextMenu();
cmYearMenu.ID = "mnuYear" + controlID;
cmYearMenu.ControlSkinID = "None";
cmYearMenu.Style.Add(HtmlTextWriterStyle.Width, "80px");
cmYearMenu.ClientSideOnItemClick = "javascript:return YearMenuClicked(event,this);";
cmYearMenu.EnableScrolling = true;
cmYearMenu.ScrollUpLookID = "scroll_up" + controlID;
cmYearMenu.ScrollDownLookID = "scroll_down" + controlID;
cmYearMenu.TopGroup.Style.CssText = "border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:10px;padding-right:10px;padding-top:3px;";
cmYearMenu.TopGroup.OffsetX = 168;
cmYearMenu.TopGroup.Height = 150;
cmYearMenu.TopGroup.OffsetY = -50;
int MinValidYear = MinValidDate.Year;
int MaxValidYear =MaxValidDate.Year;
EO.Web.MenuItem mnuYear = new EO.Web.MenuItem();
mnuYear.HoverStyle.CssText="color:#1C7CDC;padding-left:5px;padding-right:5px;";
mnuYear.ItemID="_Default";
mnuYear.NormalStyle.CssText="color:#2C0B1E;padding-left:5px;padding-right:5px;";
mnuYear.SubMenu.Style.CssText="background-color:White;border-bottom-color:#e0e0e0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;color:#606060;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;";
mnuYear.SubMenu.ShadowDepth=0;
mnuYear.SubMenu.ItemSpacing=5;
EO.Web.MenuItem mnuYearScrollDown = new EO.Web.MenuItem();
mnuYearScrollDown.Height = 14;
mnuYearScrollDown.ItemID = "scroll_down";
mnuYearScrollDown.NormalStyle.CssText = "background-image:url('00020005');border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;";
mnuYearScrollDown.Image.Url = "00020001";
EO.Web.MenuItem mnuYearScrollUp = new EO.Web.MenuItem();
mnuYearScrollUp.Height = 14;
mnuYearScrollUp.ItemID = "scroll_up";
mnuYearScrollUp.NormalStyle.CssText = "background-image:url('00020005');border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;";
mnuYearScrollUp.Image.Url = "00020000";
for (int i = MinValidYear; i <= MaxValidYear; i++)
{
EO.Web.MenuItem item = new EO.Web.MenuItem();
item.Text.Html = i.ToString();
cmYearMenu.Items.Add(item);
}
cmYearMenu.LookItems.Add(mnuYear);
cmYearMenu.LookItems.Add(mnuYearScrollDown);
cmYearMenu.LookItems.Add(mnuYearScrollUp);
/***************Adding Title Template ************/
picker.TitleTemplate = new ClientTemplate();
//picker.TitleTemplate.Text = "{var:visible_date:yyyy}<a id=\"A4\" href=\"javascript:ShowYearPopup('{var:clientId}', '{var:clientId}_year','{var:clientId}_cmYearMenu');\"><img src=\"{img:00020012}\" border=\"0\" /></a>";
//picker.TitleTemplate.Text = "{var:visible_date:MMMM}<a id=\"A3 \" href=\"javascript:ShowMonthPopup('{var:clientId}', '{var:clientId}_month');\"><img src=\"{img:00020012}\" border=\"0\" /></a>";
picker.TitleTemplate.Text = "{var:visible_date:MMMM}<a id=\"A3 \" href=\"javascript:ShowMonthPopup('{var:clientId}', '{var:clientId}_month');\"><img src=\"{img:00020012}\" border=\"0\" /></a>{var:visible_date:yyyy}<a id=\"A4\" href=\"javascript:ShowYearPopup('{var:clientId}', '{var:clientId}_year');alert('{var:clientId}_year')\"><img src=\"{img:00020012}\" border=\"0\" /></a>";
/******************Adding Titlte Template ************/
container.Controls.Add(validator);
container.Controls.Add(picker);
container.Controls.Add(cmMonthMenu);
container.Controls.Add(cmYearMenu);
string scriptName = "YearMenuClicked" + this.ClientID;
cmYearMenu.ClientSideOnItemClick = scriptName;
string stringScriptFormat = "<script type='text/JavaScript' > function " + scriptName + " (e, info){ YearMenuClicked(e, info, " + MinValidYear.ToString() + "); } </script> ";
Page.RegisterClientScriptBlock("JScript_" + scriptName, stringScriptFormat);
/*Added javascript for ClientSideOnSelect- START */
if (enableScriptOnClientSelected)
{
string calScriptName = "OnClientDateSelected" + this.ClientID;
picker.ClientSideOnSelect = calScriptName;
string stringCalendarScriptFormat = "<script type='text/JavaScript' > function " + calScriptName + "(){ OnClientDateSelected(); }</script>";
Page.RegisterClientScriptBlock("JScript_" + calScriptName, stringCalendarScriptFormat);
}
/*Added javascript for ClientSideOnSelect - END */
break;
}
}
catch (Exception e)
{
}
}
private void LoadMenuMonths(ref EO.Web.ContextMenu cmMnuMonth)
{
try
{
//Add the below code in page_load event
string[] months = new string[12];
months[0] = "January";
months[1] = "February";
months[2] = "March";
months[3] = "April";
months[4] = "May";
months[5] = "June";
months[6] = "July";
months[7] = "August";
months[8] = "September";
months[9] = "October";
months[10] = "November";
months[11] = "December";
if (cmMnuMonth != null)
{
cmMnuMonth.Items.Clear();
}
foreach (string month in months)
{
EO.Web.MenuItem item = new EO.Web.MenuItem();
item.Text.Html = month;
cmMnuMonth.Items.Add(item);
}
}
catch (Exception e)
{
}
}
And I am registering javascript source in code behind of my user page.Following is code snippet:
Code: C#
string webpath = Page.Request.Url.AbsoluteUri.Substring(0, Page.Request.Url.AbsoluteUri.IndexOf("/", 8));
webpath += Page.ResolveUrl("~/");
string mnuMonthScriptPath = webpath + "Javascripts/EOCalendarColumn.js";
string mnuMonthScriptText = string.Format("<script type='text/JavaScript' src='{0}'></script>\n", mnuMonthScriptPath);
if (!this.Page.IsClientScriptBlockRegistered("ContextMenuMonthScript"))
{
this.Page.RegisterClientScriptBlock("ContextMenuMonthScript", mnuMonthScriptText);
}
Please help me out from this issue. Thank's in Advance, Kumar.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, We looked into the code and there are a few issues: 1. You can not use server control with ClientTemplate. By definition ClientTemplate is a client side template. It does not run any server control code. So even if you set styles on a Label, the ClientTemplate will ingore them. When you assign Label.Text to your ClientTemplate, you are taking only the Label's Text. It is a simple string and has nothing to do with anything else you set on the Label; 2. Your template text is wrong. Particularlly you have "<a id=\"A4\" ....", the ID of this element is important. The second argument of ShowYearPopup is the ID of this element, so that it knows that it should align the popup to this link. Please see the sample code for more details; 3. Inside your ShowMonthPopup and ShowYearPopup, you call showContextMenu to display the menu. However the second arguments for both calls are wrong. The second arguments should be the ClientID of the context menu. In your case, you are creating two new context menus for each Grid item. This is not necessary. Your ShowMonthPopup appears to be working because showContextMenu found a menu whose ID matches the argument ("cmMonthMenu"), but this is wrong because there are multiple menus with this ID in your page. Your ShowYearPopup is not working at all because the second argument you pass to ShowContextMenu (calendarID) does not match any menu ID at all; Hope this helps. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 9/22/2009
Posts: 24
|
Hi, I modified Template text and javascript functions. But month and year popup is not populating. After analysis I found that . whatever script i am registering is not registered.In my page 3 EODatepickers added which are inherited from 'EOCalendar user control'. so,Earlier ShowMonthMenu() calling "'EOCalendar user control"s javascript method. I tried by adding javascript in local page instead of 'EOCalendar.js' file. But no break through. Following is my updated Template Text.
Code: C#
eoDatePicker.TitleTemplate.Text = "{var:visible_date:MMMM}<a id=\"{var:clientId}_month\" href=\"javascript:ShowMonthPopup1('{var:clientId}', '{var:clientId}_month','{var:clientId}_cmMonthMenu');\"><img src=\"{img:00020012}\" border=\"0\" /></a>{var:visible_date:yyyy}<a id=\"{var:clientId}_year\" href=\"javascript:ShowYearPopup1('{var:clientId}','{var:clientId}_year','{var:clientId}_cmYearMenu');\"><img src=\"{img:00020012}\" border=\"0\" /></a>";
Following are my updated java-script functions:
Code: JavaScript
var g_curCalendar1 = null;
function ShowMonthPopup1(calendar, refLink,mnuClientId)
{
g_curCalendar1 = calendar;
eo_GetObject(g_curCalendar1).showContextMenu(refLink,mnuClientId);
}
function MonthMenuClicked1(e, info)
{
var month = info.getItem().getIndex();
var calendar = eo_GetObject(g_curCalendar1);
//Get the current month
var curMonth = calendar.getVisibleDate();
//Change the month
curMonth.setMonth(month);
//Set the new current month
calendar.goTo(curMonth);
}
function ShowYearPopup1(calendar, refLink,mnuClientId)
{
g_curCalendar1 = calendar;
eo_GetObject(g_curCalendar1).showContextMenu(refLink,mnuClientId);
}
function YearMenuClicked1(e, info)
{
var year = info.getItem().getIndex();
var minYear = 1976;
var calendar = eo_GetObject(g_curCalendar1);
//Get the current month
var curMonth = calendar.getVisibleDate();
//Set the new year
curMonth.setFullYear(year + minYear);
//Set the new current month
calendar.goTo(curMonth);
}
Thanks In Advance, Kumar.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Your code looks right to me. Please try to create a test project and send it to us so that we try to run it here and see what we can find. We will PM you as to where to send.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 9/22/2009
Posts: 24
|
Hi, Finally I fixed the issue. My datagrid is inside update panel.that's why script is not registered. After I copied script registration inside update-panel script is working. How to set the TitleTemplate to center-aligned from "WebCusotmControl" page.Following is code snippet.
Code: C#
eoDatePicker.FooterTemplate = new ClientTemplate();
eoDatePicker.FooterTemplate.Visible = true;
Label dateLabel = new Label();
dateLabel.Text = "Today:" + DateTime.Today.ToShortDateString();
dateLabel.Style.Add(HtmlTextWriterStyle.PaddingLeft, "30");
dateLabel.Style.Add(HtmlTextWriterStyle.FontFamily, "Verdana");
dateLabel.Style.Add(HtmlTextWriterStyle.FontSize, "11");
//dateLabel.Attributes.Add("CssClass", "EOCalendarControlFooter");
//dateLabel.CssClass = "EOCalendarControlFooter";
ClientTemplate ct = new ClientTemplate();
ct.Text = dateLabel.Text;
eoDatePicker.FooterTemplate = ct;
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
You need to forget about the Label control and deal with raw HTML directly. ClientTemplate takes raw HTML, not server control. Whatever property/style you added to your Label control will be ignored.
Thanks
|
|