phattrienweb

How to...?

Hmm.. that's a very basic and common operation, we will configure our DataList control to use the ObjectDataSource control, so that it brings the blog categories from the database and hands it over to the DataList control. One important thing to note is once you configure the data source of the DataList control set the DataKeyField to a primary/unique field. This is how the control looks in default template after binding it with ObjectDatasourceControl

DataList control default template

Ok so now let's sprinkle some color on this little beauty and make it look more adorable, use the Autoformat option and select a scheme of your choice.

Here comes the fun part, we will now define how our data will be displayed, right click on the DataList control and go to "Edit Template" -> "Item Templates",

DataList control edit item template mode

In the above image you will notice that there are four sections,

The template names are self explanatory so I won't brag about them, edit item template is going to be our point of focus, let's just remove the "Id" field from the templates as we don't want to display that field, we are only going to display the blog category and we will be able to edit the category description.

Now let's drop a textbox control inside the edit item template and configure it's datasource, with this we are asking the DataList control "hey whenever the control is in edit mode display this textbox with the category description".

Now drop two LinkButton control's in Item Template, one for Edit and the other one for Delete and set the CommandName to "EDIT" and "DELETE" respectively.

Similarly drop two LinkButton control's in Edit ItemTemplate, one for Update and one for Cancel operation set their CommandName to "UPDATE" and "CANCEL" respectively. Below given is the snapshot

We have the UI ready for Edit,Update and Delete operations, only thing missing from the list is a way to add new blog category. For this we will use the footer template and add one Textbox control to allow the user to input the description and a Linkbutton to perform an add operation. Below given is the snapshot of the DataList control after the template modifications.

Now let's look at the event arsenal of DataList control, there are 5 events which sounds interesting, allow me to list down these events

The first four events are perfect for our needs, but what about adding new blog category this is where ItemCommand is useful. So far so good and we still have our hands neat and clean, but we will get our hands dirty with some code. Let's subscribe to all the five events and write some code.

//EditCommand
 
protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "EDIT")
{
DataList1.EditItemIndex = e.Item.ItemIndex;
DataList1.DataBind();
}
}
 
//UpdateCommand
 protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "UPDATE")
{
string sId = DataList1.DataKeys[e.Item.ItemIndex].ToString();
string sDesc = ((TextBox)e.Item.FindControl("DescText")).Text;
BlogCategory objBlogCategory = new BlogCategory(Convert.ToInt32(sId));
objBlogCategory.Description = sDesc;
BlogManager.UpdateBlogCategory(objBlogCategory);
DataList1.EditItemIndex = -1;
DataList1.DataBind();
}
}
 
//CancelCommand
 protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
{
DataList1.EditItemIndex = -1;
DataList1.DataBind();
}
 
//DeleteCommand
 protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "DELETE")
{
string sId = DataList1.DataKeys[e.Item.ItemIndex].ToString();
BlogManager.DeleteBlogCategory(Convert.ToInt32(sId));
DataList1.DataBind();
}
}
 
//ItemCommand
 protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "ADDNEW")
{
string sDesc = ((TextBox)e.Item.FindControl("txtCategoryDesc")).Text;
BlogCategory objBlogCategory = new BlogCategory();
objBlogCategory.Description = sDesc;
BlogManager.AddBlogCategory(objBlogCategory);
DataList1.DataBind();
}
}
 

How it works?

The event model is pretty straight forward, we set the EditItemIndex to the row index that needs to be edited, this is provided to us by the DataList control so there is no complexity.

During update the update command event is fired and we get the blog category description from the TextBox that holds the data by using the FindControl method.

Delete is very simple one just use the DataKeys collection of DataList and get the category id to delete.

Adding of new category seems to follow the same pattern and since this operation doesn't have a specific event associated to it we use the ItemCommand event to meet our objective.

Final output

Below given snapshot is the final output to manage our blog category, pretty neat and clean is it :)

Once you catch hold of the DataList control and play around you will find the control very usefull and a powerfull tool.