Read – Revamping Web Applications: Implementing RadScheduler

We have used this particular control in the admin page for adding or deleting tags attached to the sessions. We use two Open Access data source here. First to fetch the TagName and set the property to DataTextField and second we attach TagID to the DataValueField.

Following is the DataSource we are talking about:

<telerik:OpenAccessDataSource ID="tagLDS" runat="server" EnableDelete="False" EnableInsert="False"
EnableUpdate="False" ObjectContextProvider="EventNetworking.Data.NetworkingDataContext,
EventNetworking.Data" OrderBy="this.TagName" TypeName="EventNetworking.Data.Tag">
</telerik:OpenAccessDataSource>

Our RadAutoCompleteBox control looks like the following on the aspx page:

<telerik:RadAutoCompleteBox ID="TagsAutoCompleteBox" runat="server" DataSourceID="tagLDS"
DataTextField="TagName" DataValueField="TagID" Skin="Windows7" Width="500px"
DropDownWidth="150px" DropDownHeight="200px" OnEntryAdded="TagsAutoCompleteBox_EntryAdded"
OnEntryRemoved="TagsAutoCompleteBox_EntryRemoved" OnDataBound="TagsAutoCompleteBox_DataBound">
 </telerik:RadAutoCompleteBox>

As you can see we have 3 events being assigned to the control:

1. Let us first talk about the DataBound control:
   This control adds the tags to the control which are already associated to the session we are dealing with.
   

   protected void TagsAutoCompleteBox_DataBound(object sender, EventArgs e)
    {
    var sessionTagsX = (from st in ndx.SessionTags
    where st.SessionID == Convert.ToInt32(SessionID.Value)
    select st).ToList();
   
    for (int i = 0; i < sessionTagsX.Count; i++)
    {
    TagsAutoCompleteBox.Entries.Add(new AutoCompleteBoxEntry(sessionTagsX[i].Tag.TagName, sessionTagsX[i].TagID.ToString()));
    }
    }
   
   

2. To add an entry we just start typing and the list would be populated automatically. We can either select from the list or just type in the whole tag.

   protected void TagsAutoCompleteBox_EntryAdded(object sender, AutoCompleteEntryEventArgs e)
    {
    SessionTag sessionTagsX = new SessionTag();
    sessionTagsX.SessionID = Convert.ToInt32(SessionID.Value);
    sessionTagsX.TagID = Convert.ToInt32(e.Entry.Value);
    ndx.Add(sessionTagsX);
    ndx.SaveChanges();
    }
   
   

3. To remove a specified tag we just click the cross symbol and the EntryRemoved code will get executed. Here we specify the session and the tag and it get removed from the sessionTags table.

   protected void TagsAutoCompleteBox_EntryRemoved(object sender, AutoCompleteEntryEventArgs e)
    {
    SessionTag sessionTagsX = (from st in ndx.SessionTags
    where st.SessionID == Convert.ToInt32(SessionID.Value) && st.TagID == Convert.ToInt32(e.Entry.Value)
    select st).FirstOrDefault();
    sessionTagsX.SessionID = Convert.ToInt32(SessionID.Value);
    sessionTagsX.TagID = Convert.ToInt32(e.Entry.Value);
    ndx.Delete(sessionTagsX);
    ndx.SaveChanges();
    }
   
   

This control is useful when few elements need to be selected from a huge list. We had the same scenario and hence we used the RadAutoCompleteBox.

Read – Revamping Web Application: The UI changes