Rad Controls for Ajax

Revamping Web Application: The UI changes

Posted by

2

Read – Revamping Web Applications: Implementing RadAutoComplete

This post is a summary of the previous 12 blog posts where we have talked on how to upgrade our web application using the Telerik Ajax ASP.NET controls.We took an example of an Event Networking Application which is further explained in the first article. We started with testing the application to set a benchmark followed by implementing the Data Access Layer. Then we replaced almost all the controls with Rad controls. And in the end we have finally changed our interface to a new design. To do so we have used basic twitter bootstrap responsive css. To know more about implementing bootstrap click here.

Here we have elaborated on the following features of the application:

Directory
Sessions
MyScheduler
Messages
Edit Profile
Edit Profile (Mobile Version)

To see the difference in the User Interface changes  between the old and the new web application we have highlighted some of the major features.

At the DAL we can see a new layer being created in the form of a project named EventNetworking.Data.

image

Following from the above we have a new architecture for our application.

New Arch

A different UI can be seen as the bootstrap CSS has been implemented providing a responsive-UI. The visual changes can be seen as follows:

Directory

There is a new search criteria based on the Attendee name. Even the list can now be sorted only on the basis of the speakers.

image

image

Sessions

The basic UX has been modified to a RadGrid interface providing a better sorting, multiple-grouping as well as paging options.

image

image

MyScheduler

The scheduler where all the registered sessions were stored is now represented in a calendar form. Using RadScheduler the UI has turned very interactive and smooth.

image

image

Messages

The extensive vertical scrolling has been split into two pages namely inbox and outbox with almost a similar UI.

image

image

Edit Profile

The bootstrap CSS has made all the difference in this page.

image

image

Edit Profile (Mobile Version)

The following snippet displays the responsiveness of our application. Edit profile, when viewed in a mobile browser, we could experience the details have automatically shrunk to fit on the screen. This reduces the navigation to one dimension hence increasing the user experience.

Capture

The back-end does not really affect a user. What affects the user is the interface and the smooth performance of the Web Application. That is what we have tried to justify in our application. These are not all but the major features that have made difference in our application. Please comment on where else can we tweak the UI.

Advertisement

Revamping Web Application: Implement RadAutoCompleteBox

Posted by

3

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