Translate

Tuesday, 21 April 2015

Web Grid In Mvc 4 Razor



IN Model


    public class Sample
    {
        public string UserName { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Location { get; set; }
        public string Name { get; set; }
        public string Path { get; set; }
        public string Size { get; set; }
        public List<Sample> images { get; set; }
        public int Id{get;set;}
        public List<Sample> Listgrid { get; set; }
        KavithaEntities1 context = new KavithaEntities1();

        public List<Sample> GetList()
        {
            List<Sample> ListDetails = new List<Sample>();
            Sample Smpl = null;
            var list = context.sp_GetList_Jqgrid().ToList();
            for (int i = 0; i < list.Count(); i++)
            {
                Smpl = new Sample();
                Smpl.UserName = list[i].UserName;
                Smpl.FirstName = list[i].FirstName;
                Smpl.LastName = list[i].LastName;
                Smpl.Location = list[i].Location;
                Smpl.Id = Convert.ToInt32(list[i].Id);
                ListDetails.Add(Smpl);
            }
            return ListDetails;
        }

    }

In controller
      public ActionResult WebGrid()
        {
            Sample sample = new Sample();
            List<Sample> lst = new List<Sample>();
            lst = sample.GetList();
            return View(lst);
        }

In view

@model IEnumerable<JQGridExample.Models.Sample>


    @{ 
        Layout = "~/Views/Shared/_Layout.cshtml"; 
 } 


<!DOCTYPE html>
 @{
     var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
        }

<html>
<head>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <div class="tableGrid">
         <table width="100%" border="0" cellspacing="0" cellpadding="0" id="yui">
                <thead>
                   <tr>
                        <td colspan="5" class="filter">
                            <div style="float: left; height: 28px;">
                                <input name="filter" id="filterBox" value="" maxlength="30" size="30" type="text" class="membertextbox" onkeyup="CallMe(1000)" />
                                <input type="button" name="button" id="btndel" value="Delete" class="redbutton" onclick="return DeleteMember()" >
                            </div>
                            <div style="float: right">
                            </div>
                        </td>
                    </tr>
                   
                </thead>
                 <tbody>
                     @MvcHtmlString.Create(grid.GetHtml(
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "selectedrow",
            htmlAttributes: new { id = "managemebers" },

            columns: grid.Columns(
            grid.Column(header: "{CheckBoxHeading}", format: @<text><input name="chck" class="chkmember" onclick="CheckboxCheck()"
          TYPE="checkbox" id="chck" value="@item.Id" /></text>), grid.Column(columnName: "User Name", format: (item) => Html.ActionLink((string)item.UserName, "EditMember", new { Id = item.Id }, new { @style = "color:#000;text-decoration:underline" }), canSort: true), grid.Column("FirstName", "First Name"), grid.Column("LastName", "Last Name"), grid.Column("Location", "Location"))).ToString().Replace("{CheckBoxHeading}", "<input type='checkbox' id='chkall' onclick='return checkAll(this.checked)'/>"))
                </tbody>
                  
            </table>
           
            <div colspan="5" style="background: #E9E9E9;color: #000;vertical-align: middle;font-size: 14px;width:100%;text-align:center">Total rows:@Model.Count()</div>
        </div>
        <!--rightSection -->
 
   

</body>
</html>


Output Shows like below



Posted by at No comments:

How to Use JqGrid ASP.Net MVC



 IN Model

public class Sample
    {
        public string UserName { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Location { get; set; }
        public string Name { get; set; }
        public string Path { get; set; }
        public string Size { get; set; }
        public List<Sample> images { get; set; }
        public int Id{get;set;}
        public List<Sample> Listgrid { get; set; }
        KavithaEntities1 context = new KavithaEntities1();

        public List<Sample> GetList()
        {
            List<Sample> ListDetails = new List<Sample>();
            Sample Smpl = null;
            var list = context.sp_GetList_Jqgrid().ToList();
            for (int i = 0; i < list.Count(); i++)
            {
                Smpl = new Sample();
                Smpl.UserName = list[i].UserName;
                Smpl.FirstName = list[i].FirstName;
                Smpl.LastName = list[i].LastName;
                Smpl.Location = list[i].Location;
                Smpl.Id = Convert.ToInt32(list[i].Id);
                ListDetails.Add(Smpl);
            }
            return ListDetails;
        }


    }


In controller
public ActionResult jQGRID()
        {
            Sample sample = new Sample();
            List<Sample> lst = new List<Sample>();
            lst = sample.GetList();
            Session["Export"] = lst;
            return View(lst);
        }


In view



@model IEnumerable<JQGridExample.Models.Sample>
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery-1.9.1.min.js"></script>

<link href="~/Content/css/jquery-ui-custom.css" rel="stylesheet" />
<link href="~/Content/css/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Content/js/grid.locale-en.js"></script>
<script src="~/Content/js/jquery.jqGrid.js"></script>

<script type="text/javascript">
$(document).ready(function () {
@{
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
serializer.MaxJsonLength = Int32.MaxValue;
}
var mydata = @Html.Raw(serializer.Serialize(Model))
$grid = $("#jQGridCustomer");

$grid.jqGrid({
datatype: "local",
gridComplete: function () {
$("tr.jqgrow:odd").addClass("evenrows");
},
width: 'auto',
height: 'auto',
shrinkToFit: false,
data: mydata,
rowNum: 5,
sortorder: "asc",
rowList: [5, 10, 15],
pager: '#pagerCustomer',
emptyrecords: 'No Records Found',
viewrecords: true,
colNames: ["", 'Id', 'User Name', 'First Name', 'Last Name', 'Location'],
colModel: [{
name: 'Id', sortable: false, width: 40, formatter: function (cellValue, options, rowdata, action) {
return '<input type="checkbox" class="chkmember" onclick="CheckboxCheck()" value="' + rowdata.Id + '" />'
}
},
{ name: 'Id', index: 'Id', width: '100%', cmTemplate: { sortable: true }, formatter: editLink },
{ name: 'UserName', index: 'UserName', width: '100%', cmTemplate: { sortable: true } },
{ name: 'FirstName', index: 'FirstName', width: '100%', cmTemplate: { sortable: true } },
{ name: 'LastName', index: 'LastName', width: '100%', cmTemplate: { sortable: true } },
{ name: 'Location', index: 'Location', width: '100%', cmTemplate: { sortable: true } }, ],
caption: '<input type="checkbox" id="chkall"  onclick="return checkAll(this.checked)"/>' + 'Select All',

loadComplete: function () {
}
});

$("#gridJQ .ui-icon-trash").removeClass('ui-icon ui-icon-trash').addClass('idoc-icon-trash');
});

function editLink(cellValue, options, rowdata, action) {
return "<a href='@Url.Action("EditMember", "JqGrid")?Id=" + rowdata.Id + "'>" + rowdata.UserName + "</a>";
}


function checkAll(checkedStatus) {
$('#chkall').attr('checked', checkedStatus);
$("input[class='chkmember']").each(function () {
this.checked = checkedStatus;
});
$('#chkall').attr('checked', checkedStatus);
}

function CheckboxCheck() {
var chkarray = [];
$('.chkmember:checkbox:checked').each(function () {
$('#chkall').attr('checked', false);
chkarray.push($(this).val());
});
var totalCheckboxes = $('input:checkbox').length;

var checkedCheckboxes = $('input:checkbox:checked').length;

if (totalCheckboxes - 1 == checkedCheckboxes) {

$('#chkall').attr('checked', true);
}
}

</script>


<div style="height: auto; width: 100%;" class="GridCustomer" id="maindiv" >
<table id="jQGridCustomer" class="greedGrid" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #666666;"></table>
<div id="pagerCustomer"></div>
</div>



The result view Below
Posted by at No comments:
Subscribe to: Posts (Atom)