Programming Articles.

Monday 9 September 2013

KnockOut KoGrid in Asp.net MVC4

It is the highlt performanced knockout datagrid.The main benefits we get out of KoGrid is the ability to define custom row and cell templates.

It's working in all main stream browsers.Here i am going to show a basic example of KoGrid. Through NuGet , we can install Knockout and KoGrid in our application.

After I created a javascript file for View Model

MyGrid.js

*********

function viewModel() {

var self = this;

self.items = ko.observableArray([{ firstName: "Eric", lastName: "Sam", mail: "Eric@gmail.com",phno:"1212121" },

{ firstName: "Manuel", lastName: "Dan", mail: "Manuel@gmail.com", phno: "234232" },

{ firstName: "Allen", lastName: "Ken", mail: "Allen@gmail.com", phno: "564523" },

{ firstName: "Joe", lastName: "George", mail: "Joe@gmail.com", phno: "46545435" },

{ firstName: "aki", lastName: "Ken", mail: "aki@gmail.com", phno: "32267565"}]);

}

$(document).ready(function () {

ko.applyBindings(new viewModel(), document.getElementById('disp'));

});

After that i create a bundle for KoGrid , Knockout and MyGrid

bundles.Add(new ScriptBundle("~/bundles/myBundle").Include(

"~/Scripts/jquery-{version}.js",

"~/Scripts/json2.js",

"~/Scripts/knockout-2.3.0.js",

"~/Scripts/koGrid-2.1.1.js",

"~/MyJs/MyGrid.js",

"~/Scripts/jquery-ui-{version}.js"));

After that added KoGrid css into Style Bundle.

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css","~/Content/KoGrid.css"));

GridDisplay.cshtml

<div id="grid" style="height: 200px;" data-bind="koGrid: { data: items,afterSelectionChange: function () { return true; },

columnDefs: [{ field: 'firstName', displayName: 'First Name',width:'300'},

{ field: 'lastName', displayName: 'Last Name',width:'300' },

{ field: 'phno',displayName: 'PhNo' ,width:'300'},

{ field: 'mail',displayName: 'MailID',width:'401'}],

autogenerateColumns: false,

isMultiSelect: true,

showFilter: true,

showColumnMenu: false

}">

</div>

KoGrid is very configurable. Here We will get More configuration Information.

Here I used a sample array. We can use json array for data in KoGrid.KoGrid have inbuilt functionality like sorting ,paging and search.

Friday 5 July 2013

Partial View in Asp.Net MVC4

If you want to reuse a view in your web application, you can go for partial view concept. Partial view is like regular view with file extension .cshtml.We can use partial view when the situation like we need a header, footer reuse for the mvc web application. We can say that it’s like a user control concept in asp.net.
Here i am going to explain how to create a partial view in mvc 4 asp.net application.
First add a view to shared folder with view name _Product .the best way to create partial view with name preceded by '_', because the name specifying that it is reusable.

Here in this example, I am using the partial view to display the item selected in the webgrid.
Creating webgrid example is in below link:
http://articlesforprogramming.blogspot.in/2013/07/webgrid-in-aspnet-mvc.html
Add html controls in partial view fir display the selected item.

<body>
   <div>
           <label>Id:</label>
            @Html.TextBox("Id", Model.Id)
             <label>Name:</label>
            @Html.TextBox("Name", Model.Id)
             <label>Description:</label>
            @Html.TextBox("Description", Model.Description)
             <label>Quantity:</label>
            @Html.TextBox("Quantity", Model.Quantity)
    </div>
</body>

We can call the partial view in a normal view like:

Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);
OR
@Html.Partial("~/Views/Shared/_Product.cshtml", product);

Html.Partial returns a string, Html.RenderPartial calls Write internally, and returns void. You can store the output of Html.Partial in a variable, or return it from a function. You cannot do this with Html.RenderPartial.Because the result will be written to the Response stream during the execution. So @html.RenderPartial() has fast execution than @html.Partial() due to RenderPartial give quick response to Output.

We can call the partial view if grid have any selected item. The code block is here:

@if (grid.HasSelection)
         {
             product =(PartialViewSample.Models.Product)grid.Rows[grid.SelectedIndex].Value;
             Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);
         }

In the above if you want to send the selected item into an action you can add a column with action link and send the selected item.

grid.Column("Detail", format: @<text>@Html.ActionLink("Select", "Submit", new { QtId = item.QtId }) </text>)

And in the action get the selected item and pass as parameter to display view.

public ActionResult Submit(Product product)
{
return View(product);
}