Showing posts with label Other Ajax Controls. Show all posts
Showing posts with label Other Ajax Controls. Show all posts

Tuesday, September 29, 2009

How to build an Ajax Schedule control (Downloadable source code)

New PainControls are released. You can download it from:

http://cid-79833c0a838434be.skydrive.live.com/self.aspx/PainControls/PainControls%203.0.0.0929.rar

It contains the following Ajax Controls:
TimePicker
DropDown
DropPanel
Simple Schedule
ButtonList

About Schedule:


Please check the following image:




1. The schedule is bound on DataSource control. You can select a date in left clanedar, it will retrieve the data from DataSource, and present the related task.
2. Each task will be presented in a DropPanel. You can Drag & Drop it to another cell(day). It will be updated.
3. When you mouse move on the droppanel, it will show CloseButton so that you can remove this task.
4. When mouse over the cell of schedule, it will expend itself by design if it has more task needs to show.
5. In left calendar, it will highlight the date which has tasks.
6. Since it is an Ajax ScriptControl, you can use custom css style at will.
7. Schedule used ButtonList and DropPanel in Paincontrols I mentioned before.
8. You need build and bind a web service file on this control to achieve updating and deleting function asychronously.

***** It is a simple schedule. I just want to share how to build a schedule and hope it can help. In next time, I'd like to expend the following functionality:
1. Besides "Month" display mode, "Day" display mode is needed.
2. Recently, you can create a DetailView to insert a new task, since Schedule is bound on DataSource. Next time, I'd like to expend the internal insert functionality.

If you have more suggestions, please let me know. Thanks.

How to use PainControl Schedule:

The following sample can help you to use Schedule control:


<Pain:Schedule ID="Schedule" runat="server" AutoPostBack="true" DataSourceID="SqlDataSource1" KeyField="num"
DateTimeFieldName="date_time" TitleFieldName="title" DescriptionFieldName="description" ServicePath="ScheduleWebService.asmx"
UpdateServiceMethod="UpdateWebService" DeleteServiceMethod="DeleteWebService" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>"
SelectCommand="SELECT * FROM [schedule]"></asp:SqlDataSource>

Property:
1. DataSourceID ---- Create a DataSource and bind it on Schedule.
2. KeyField ---- The field name of primary key of DataSource.
3. There are three mandatory field you have to create:
DateTimeFieldName ---- related field name about the datetime of the task
TitleFieldName ---- related field name about the title of the task
DescriptionFieldName ---- related field name about the description of the task
4. ServicePath ---- If you have used AjaxControlToolkit, you must be familar with this property. It means the path of the web service file.
UpdateServiceMethod ---- The web method name to execute updating function
DeleteServiceMethod ---- The web method name to execute deleting function

Build a web service bound to achieve updating and deleting function

The following demo snippets are the web methods of updating function and delete function.
In the web method of updating function:
"key" is the primary key that will be updated.
"updateFieldName" is the field name that will be updated.
"updateValue" is the related value which it is updated to about "updateFieldName".

In the web method of deleting function,
just need "key" that is the primary key that will be deleted.

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public void UpdateWebService(string key, string updateFieldName, string updateValue)
{
string constr = (string)ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString;
string sql = "update schedule set " + updateFieldName + "='" + updateValue+"' where num="+key;
SqlConnection connection = new SqlConnection(constr);
SqlCommand sdc = new SqlCommand(sql, connection);
sdc.CommandType = CommandType.Text;
try
{
connection.Open();
sdc.ExecuteScalar();
}
catch (SqlException SQLexc)
{
throw new Exception(SQLexc.Message);
}
finally
{
connection.Close();
}
System.Threading.Thread.Sleep(2000);

}

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public void DeleteWebService(string key)
{

string constr = (string)ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString;
string sql = "delete from schedule where num=" + key;
SqlConnection connection = new SqlConnection(constr);
SqlCommand sdc = new SqlCommand(sql, connection);
sdc.CommandType = CommandType.Text;
try
{
connection.Open();
sdc.ExecuteScalar();
}
catch (SqlException SQLexc)
{
throw new Exception(SQLexc.Message);
}
finally
{
connection.Close();
}
System.Threading.Thread.Sleep(2000);
}


In Short:
To use this Schedule button, you need use html tag to create Schedule, create a DataSource control to bind on Schedule and build two web methods to achieve updating and deleting functions.

Build a ButtonList (Ajax Control)

New PainControls are released. You can download it from:

http://cid-79833c0a838434be.skydrive.live.com/self.aspx/PainControls/PainControls%203.0.0.0929.rar

It contains the following Ajax Controls:

TimePicker
DropDown
DropPanel
Simple Schedule
ButtonList

About ButtonList:
Check the following image.


There are three item button you can select. It is like a DropDownList, but it's composted of several Button. You can select one of the items, and it will call SelectedIndexChanged event.

You can use this control by the following code.

<Pain:ButtonList runat="server" ID="ButtonList1" OnSelectedIndexChanged="ButtonList1_SelectedIndexChanged" >
<asp:ListItem>day</asp:ListItem>
<asp:ListItem>month</asp:ListItem>
<asp:ListItem>year</asp:ListItem>
</Pain:ButtonList>

Thursday, July 16, 2009

Ajax TimePicker/ClockPicker control

Hi,

Last time I made a Custom DropDown. Please check the following image about this Ajax control.


Blog link: http://vincexu.blogspot.com/2009/06/about-ajaxcontroltoolkit-combobox.html

It introduces how to build a DropDown/ComboBox by Asp.Net Ajax ScriptControl. You can download this control in above link.


I made a TimePicker/ClockPicker this time, hope it can help you. See the following image about this ajax TimePicker.



You can drag the hour/minute pointer to select a time. It supports 12h and 24h format.

You can download from:


(PainControls contain dropdown and timepicker so far)


If you'd like to use this ajax control, please check the below:


1.Add the reference PainControls.dll, and check the sample code as below.


<asp:TextBox ID="TextBox1" Text="" runat="server"></asp:TextBox> <Pain:TimePicker runat="server" ID="t1" TargetControlID="TextBox1" TimeType="H24" />
Properties:
TargetControl: which TextBox(only TextBox) is bound on TimePicker
TimeType: H24/H12 -- Time format
ErrorPrensentControlID: the control can display the time validation information. You can assign it as some span or label to bind on it.
And there are several client Events you can use:
OnClientShowing : client showing event
OnClientShown : client shown event
OnClientHiding: client hiding event
OnClientHidden: client hidden event
OnClientHourSelectionChanged: it triggers when you select new hour value by mouse. It will trigger when mouse up.
OnClientMinuteSelectionChanged: it triggers when you select new minute value by mouse. It will trigger when mouse up.
2. You need use FrameWork 3.5 sp1 to support this control. (You can recompile the files if you want to use in FrameWork 2.0)
3. Don't forget adding a ScriptManager control in the page.
4. If you want to set a default Time for TimePicker, please set a default value in TextBox. It will reset the time according to the value of TextBox bound.