How to Develop a Simple RadGrid Easily

Hi all, in this tutorial I am going to show you how to develop a very simple grid using Telerik. 

First create the structure of the RadGrid using the markups.

<telerik:radscriptmanager id="RadScriptManager1" runat="server"EnablePageMethods="true"/>

<asp:Panel ID="PnlGrid" runat="server">

        <telerik:radgrid runat="server"id="Grid"autogeneratecolumns="false"allowpaging="true" enableviewstate="true"

OnItemCreated ="Grid_ItemCreated"

OnNeedDataSource ="Grid_NeedDataSource">

        <MasterTableViewCommandItemDisplay="None" InsertItemPageIndexAction="ShowItemOnCurrentPage" EditMode="InPlace">

            <Columns>

                <telerik:GridBoundColumn UniqueName="Column1"Visible="true">

                    <ItemStyleWrap="true"/>

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn UniqueName="Column2"Visible="true">

                    <ItemStyleWrap="true"/>

                </telerik:GridBoundColumn>

            </Columns>

           

            <NoRecordsTemplate>

                <asp:Label ID="lblNoRecords"runat="server"/>

            </NoRecordsTemplate>

        </MasterTableView>

        <PagerStyle Mode="NextPrevAndNumeric"/>

        <ClientSettings EnablePostBackOnRowClick="false">

            <Selecting AllowRowSelect="true"/>

        </ClientSettings>

        <SelectedItemStyleBorderStyle="None"BorderWidth="0px"/>

    </telerik:radgrid>

  

</asp:Panel>

Between the ‘Columns’ tags, you can specify the columns you need using telerik:GridBoundColumn. Here I have used telerik:GridBoundColumn but we can use different other column types. As this is going to be a simple grid, I have only included the telerik:GridBoundColumn.

In this grid, I have specified some events. Let me explain them very briefly.

OnNeedDataSource : When this event fires, the grid will be bound to a given data source. It can be either a SQL data source or a list of objects.

OnItemCreated : I thought of showing you this method, because this method can be really helpful, when you are trying to dynamically change the items in the grid. Inside this method, you can do so many functions, for setting grid headers, data types for columns, data format strings, button names etc.

Then I have included the <NoRecordsTemplate> ,which will used for displaying the grid, when there are no records to be shown in the data source.

Then I have added pager style for the grid. This is a really cool feature in Telerik Grid, because it creates an amazing pagination for the grid.

In the <ClientSettings> allowed the row selection and avoided autopostback on row click. You can do server side functions by enabling this autopostback.

Then I have given a simple style for the selected row.

OK, now we are good with the structure of the RadGrid.  Then let’s see how we can bind the data to the grid and display it. For this example I have used a sample Student list to populate the grid.

Here’s the student class.

public class Student

    {

        public int StudentID { get; set; }

        public stringStudentName { get; set; }

        public Student()

        {

        }

        public Student(intid, string name)

        {

            this.StudentID = id;

            this.StudentName = name;

        }

    }

The code behind of the web page will look like this.

protected void Page_Load(object sender, EventArgse)

{

}

protected voidGrid_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

this.SetDataFieldsForGridColumns();

       this.Grid.DataSource = this.GetStudentsList();

}

protected voidGrid_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

if (e.Item isGridHeaderItem)

{

              GridHeaderItemheader = (GridHeaderItem)e.Item;

              header["Column1"].Text = "Student ID";

              header["Column2"].Text = "Student Name";

}

       if (e.Item is GridNoRecordsItem)

       {

              GridNoRecordsItemnoRecordsItem = e.Item as GridNoRecordsItem;

System.Web.UI.WebControls.LabellblNoRecords = (System.Web.UI.WebControls.Label)noRecordsItem.FindControl("lblNoRecords");

                lblNoRecords.Text = "Sorry, No Records are available for viewing";

       }

 }

private voidSetDataFieldsForGridColumns()

{

GridBoundColumn column1 = this.Grid.MasterTableView.GetColumnSafe("Column1") as GridBoundColumn;

GridBoundColumn column2 = this.Grid.MasterTableView.GetColumnSafe("Column2") as GridBoundColumn;

column1.DataField = "StudentID";

column2.DataField = "StudentName";

}

private List<Student> GetStudentsList()

{

List<Student> students = new List<Student>();

for (inti = 0; i < 20; i++)

       {

       students.Add(new Student(i, string.Format("Std{0}",i)));

       }

       return students;

}

Final Output for the grid will look like this.

In this tutorial, I have explained how to develop a simple static radgrid with populated with a list of data.  

Thanks. J