UI for ASP.NET AJAX

Resources for Webinar “Responsive Layouts for your ASP NET WebForms with Telerik UI for ASP NET AJAX “

On Mar 26 2015, we conducted a webinar titled “Responsive Layouts for your ASP NET Webforms with Telerik UI for ASP NET AJAX” . This blog post is a recap of that webinar. You will find the slide deck & video recording of the webinar in this post. So if you had missed attending live this resources will help you catch up on the webinar.

About Telerik UI for ASP.NET AJAX:

UI for ASP.NET AJAX is one of most popular control suites we have here in Telerik. As the name says this is a control suite for ASP.NET AJAX technology. The suite is packed with 80+ AJAX controls which meet almost every needs of your projects. With UI for ASP.NET AJAX controls you get seamless UX across browsers & devices. The controls are also responsive & support mobile devices. You can check out all the controls in UI for ASP.NET AJAX suite with our online demos  available here: http://demos.telerik.com/aspnet-ajax

UI for ASP.NET AJAX

UI for ASP.NET AJAX

 

Slide Deck:

Here is the slide deck i used in the webinar:

 

Video Recording:

Here is the video recording of the webinar:

 

T-Shirt Winners:

Every webinar we select 2 random attendees and they will receive our .NET Ninja T-Shirts. Following are the winners for this webinar:

  • Govind Ranjan
  • Latha S

Congratulations to the winners. We will contact you for your address and ship the t-shirts.

Till next time – Happy Coding.

Working with LINQ to SQL Class and AJAX RadGrid

In this post we will take a look on working with RadGrid and LINQ to SQL Class. We will display data in RadGrid using LINQ to SQL Class from SQL Server database.

image

Very first let us create DataSource to be used with RadGrid. We will use LINQ to SQL class to create data model here. To create data model using LINQ to SQL class right click on the project and select Add then New Item. From Data tab, choose LINQ to SQL Classes

image

If you want you can change name of the LINQ to SQL class, however I am leaving default name and clicking on the Add button. Choose Server Explorer on the design surface to create data classes.

image

In Server Explorer right click on the Data Connection and Add Connection. In Add Connection dialog box provide database server name and choose the database to create data model. Click on Ok to add a new Data Connection in Server Explorer.

image

On successfully adding of data connection , you can see that in server explorer

image

Next drag and drop Tables, Views , Stored Procedures and Functions from Server Explorer on dbml design surface to make a part of data model. In this case , I am going ahead with only one table Person. Now you can see that Person is added on dbml file.

image

As of now we have added the data model in the project. Now let us go ahead and add a RadGrid on the page. To add RadGrid on the page drag and drop it from Toolbox on the page. If you don’t find RadControls in toolbox then right click on the General tab in tool box and select Add Tab

image

Give name of the tab . Right click on newly created tab and selecte Choose Items. Then browse to

C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q1 2012 SP1\Bin40

and choose Telerik.Web.UI.dll and after selecting dll click on Ok button to add the controls in toolbox.

image

In toolbox you can see that RadControls are successfully added.

image

 

Next from the Telerik AJAX Data Component tab , drag and drop RadGrid on the page.

<pre><asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True">

</telerik:RadGrid>
</asp:Content>

 

As of now we have added RadGrid on the page . Next we need to create data source from the data model and bind to the RadGrid. Below is the function returning List of Person.


private List<Person> GetStudents()
{
DataClasses1DataContext context = new DataClasses1DataContext();
return  context.Persons.ToList();
}

In function we are creating instance of DataContext class and returning list of person on that. Now we need to bind data returning from this function to RadGrid. We can do that as following


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI;

namespace GridSample
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
RadGrid1.AllowPaging = true;
RadGrid1.NeedDataSource += RadGrid1_NeedDataSource;



}

void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
RadGrid1.DataSource = GetStudents();
}




private List<Person> GetStudents()
{
DataClasses1DataContext context = new DataClasses1DataContext();
// return context.Persons.SortBy("FirstName").ToList();
return context.Persons.ToList();
}
}
}

Now when you press F5 to run the application , you should get data in RadGrid using LINQ to SQL class.

image

In this way you can pull data from database using LINQ to SQL class and bind to a RadGrid. I hope you find this post useful. Thanks for reading.