Kendo UI - Tab control

In this tutorial, we will discuss about getting records for Kendo Grid and displaying them. Will also see, how to retrieve a specific column value on click of a row event.

I had written a sample Kendo Grid Html, which will display four columns, namely Employee ID, Name, Join Date and Comments

Data definition for this grid resides in DemoNamespace.Models.TestData, which is nothing but defining properties of the above columns. Once defined, make sure your controller method returns JSON data to be bound to the grid....

In the above, while binding the columns, you could define their width and title attributes as shown.

  .Read will invoke the call to Home Controller -> GetTestData method and returns a result set to be tied up with the grid.

   On selection of a row, the code will start executing the method "recordselected" as indicated. Below is the code where it defines the method and gives an alert of the selected Employee Name.

Few changes are required in controller, before we could run and test it. Here is a sample code of, how the  action method should be defined...

While returning the json result set, it should have .ToDataSourceResult(request), else the grid will not be bound with the returned data... Also parameters must contain [DataSourceRequestAttribute] DataSourceRequest request as the first parameter and other parameters should follow....

Happy coding....

MVC Web Grid

In this tutorial, we will go over a simple way to get data from controller and display it in the view using Web Grid.

  For this tutorial, we will be using the Web API tutorial to get the data from Web API source.

   Lets create a view first. I had created a new view in Home folder as TestPage.cshtml

Once the page is created, create a class named CategoryData as below...  This is being used in reference to the Web API we developed earlier. 

To retrieve data from Web API, I will request a call from controller to return all data, which I will tie it up with the grid to display....

 Now, we have everything ready except view. To implement view changes, I will use WebGrid  (make sure you have reference to System.Web.Helpers.dll). Below is the sample code for view.

Now, we are all set to run and test our web grid... But before that, if you are using Home Controller and a different view than index, make sure you update the following changes in App_Start\RouteConfig.cs

Everything is set to run the application. Press F5 and you should see the following output...

The styles implemented so far are pretty simple, you could always refer more at many web sites or be creative to have your own version of styles for table, header, rows, etc...

Happy coding...

How to invoke a stored procedure in Web API using Entity Framework

In this tutorial, we will go over sample code to retrieve data with Web API and Entity Framework (invoking a stored procedure to return data).

 Before getting started, I installed Entity Framework 4.3.0. To learn more about installation, click here....

 For this example, I had installed Northwind database and created a sample stored procedure that would return few records, which we will fetch through Web API methods in this illustration...

Create a sample procedure as below...

   To start with, create a folder called Data Model. Right click on Data Model and select add new item...

In the above, I created a new ADO.NET Entity Data Model named DBEntity. I will be using this one for the tutorial.

 I prefer to create an empty data model and add stored procedures as I go. (this works well with just stored procedures approach)...

Once you click finish, this should open up DBEntity.edmx file. Right click on Stored Procedures and click "update model from database"

Once you do that, make sure it has the connection to the DB server it needs to, if not click on New Connection and enter the server details and make sure the connection is working fine by clicking on Test Connection.

Finally we should see a window where it shows up with three tabs, Add, Refresh and Delete... In the Add tab, expand stored procedures and you should see the one created in first step. Check on the TestProc stored procedure and click finish... (refer below..)

Now, our DBEntity.edmx should be like the one below, with new stored procedure added to it...  To include a stored procedure, right click on Function Import  and select Add function import to add stored procedure.

In the window that appears,  select TestProc from stored procedure name and give "TestProc" for Function import name..

Once you click on get column information, this should give the set of columns that will be returned. Now click on the button "Create New Complex type" and this should create a new result-set as "TestProc_Result". Finally the screen should look like the below image.....  If so, then click ok...

Now, its time to get started on invoking the stored procedure and testing the results....  You can find the entity name in web.config and use it for data retrieval... (here the name is DBEntityContainer)

In my WebApiTestController, will add the following code (class and implementation to retrieve data).

 public class CategoryList
        {
            public int CategoryID { get; set; }
            public string CategoryName { get; set; }
            public string CategoryDescription { get; set; }
        }

        public IList<CategoryList> GetSampleData()
        {

            List<CategoryList> catList = new  List<CategoryList>();

            using(WebAPI.DataModel.DBEntityContainer test = new DataModel.DBEntityContainer())
            {
                var result = test.TestProc().ToList();

                foreach (var item in result.ToList())
                {
                    catList.Add(new CategoryList { CategoryID = item.CategoryID, CategoryName = item.CategoryName, CategoryDescription = item.Description});
                }
                return catList;
            }

        }


Now press F5 and you should be able to see the output as below...

Happy coding...