Revamping Web Application: Implement RadAutoCompleteBox

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.image

    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. clip_image001
    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

Advertisements

3 thoughts on “Revamping Web Application: Implement RadAutoCompleteBox

  1. Pingback: Revamping Web Application: Implementing RadScheduler | Telerik Helper

  2. Pingback: Revamping Web Application: The UI changes | Telerik Helper

  3. Pingback: Revamping Web Applications Part-1 | Telerik Helper

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s