Example of kendo gride

@model Nop.Admin.Models.OutgoingCalls.Summary
@{
    var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
    var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;
}
@using (Html.BeginForm())
{

    <div class="section-header accounthead">
        <div class="title">
            Outgoing Calls
        </div>
        <div class="assmeblyKitinfo form-group marginTop10 marginBot pull-left">
            <ul class="list-inline">
                <li>
                    <label>From </label>
                    @Html.TextBoxFor(model => model.From, new { @class = "form-control", @id = "txtFrom" })

                </li>
                <li>
                    <label>To </label>
                    @Html.TextBoxFor(model => model.To, new { @class = "form-control", @id = "txtTo" })

                </li>
            </ul>
        </div>
        <div class="searchWrap marginTop15">
            <div class="search-input"><input type="text" id="txtSearch" name="txtSearch" /></div>
            <div class="search-btn">
                <input type="button"  id="btnSearch" class="k-button" value="" />
            </div>
        </div>
        <div class="clearer"></div>
    </div>
}
<div class="tableWrap">
    <table class="admincontent table-responsive" style="width:100%;">

        <tr>
            <td>
                <div id="OutgoingSummary-grid"></div>
            </td>
        </tr>

    </table>
    <script type="text/javascript">
        $(function () {

            $('#txtFrom').kendoDatePicker();
            $('#txtTo').kendoDatePicker();
            $('#txtTo').change(function(){
                var grid = $('#OutgoingSummary-grid').data('kendoGrid');
                grid.dataSource.page(1);
                return false;
            });
            $('#txtFrom').change(function(){
                var grid = $('#OutgoingSummary-grid').data('kendoGrid');
                grid.dataSource.page(1);
                return false;
            });
            $("#OutgoingSummary-grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            url: "@Html.Raw(Url.Action("GetData", "OutgoingCalls"))",
                            type: "POST",
                            dataType: "json",
                            data: additionalData
                        }


                    },
                    schema: {
                        data: "Data",
                        total: "Total",
                        errors: "Errors"
                    },
                    error: function(e) {
                        display_kendoui_grid_error(e);
                        this.cancelChanges();
                    },
                    pageSize: @(defaultGridPageSize),
                    serverPaging: true,
                    serverFiltering: false,
                    serverSorting: false,
                },
                filterable: {
                    extra:false,
                    operators: {
                        string:{ contains: "Contains"}
                    }
                },
                sortable: {
                    mode: "single",
                    allowUnsort: true
                },
                pageable: {
                    refresh: true,
                    pageSizes: [@(gridPageSizes)]
                },

                scrollable: false,
                selectable: false,


                columns:
                [
                {

                    title: "Id",
                    template: "#=Id#",
                    hidden: true,



                },

                {
                    field: " Date",
                    title: " Date",
                    template: "#= kendo.toString(kendo.parseDate(Date, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",


                },
                {
                    field: "AccountNo",
                    title: "Account No.",



                },
                 {
                     field: "AccountName",
                     title: "Account Name",


                 },


                {
                    field: "ContactPerson",
                    title: "Contact Person",


                },

                {
                    field: "ContactNo",
                    title: "Contact No.",


                },
                {
                    field: "Email",
                    title: "Email",


                },
                {
                    field: "LastBuyDate",
                    title: "Last Buy Date",
                    template: "#= (LastBuyDate == null) ? '' :kendo.toString(kendo.parseDate(LastBuyDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",

                 

                },

                {
                 
                    field: "OnHold",
                    title: "On Hold",
                    template: '#if(OnHold){#<input  style="float:left"  type="checkbox" checked="checked" value="#=OnHold#"   name="cb" disabled="disabled"  />#} else{#<input style="float:left"  type="checkbox"  value="#=OnHold#"   name="cb" disabled="disabled"  />#} #',

                },
                 {
                     field: "Time",
                     title: "Time",

                 },
                 {
                     field: "Result",
                     title: "Result",


                 },

                   {
                       title: "Action",
                       width:"100px",
                       command:[
                           {
                               name: "edit", text: "", imageClass: "k-icon k-edit", click: Update

                           },
                           //{
                           //    name: "edit",
                           //    text: "",
                           //    template: "<div class='k-grid-view'><a onclick='Update1(this)' > <img  src='/Administration/Content/images/notes-icon.png' /></a></div>",
                             
                           //    click: Update1

                           //}

                       ]
                   },
                   {
                       title: "Notes",
                       field: "Notes",
                       template: "<div class='k-grid-view'><a onclick='openpopup(#=Id#)' > <img  src='/Administration/Content/images/notes-icon.png' /></a></div>",
                     
                   },
                ],
                dataBound: function ()
                {
                    if ($('#OutgoingSummary-grid').find("tr").length==1) {
                        $('#OutgoingSummary-grid').find('tbody')
                                .append('<tr class="kendo-data-row"><td colspan="12" style="text-align:center"><b>No Results Found!</b></td></tr>');
                    }
                }

            } );
            function additionalData() {
                return {
                    StartDate:$('#txtFrom').val(),
                    EndDate:$('#txtTo').val(),
                    Search: $('#txtSearch').val(),

                };
            }

        });
       
        function Update(e)
        {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            $.ajax({
                cache: false,

                type: "POST",
                url: '../OutgoingCalls/FillPopup',
                data:{Id:dataItem.Id,mark:1},
                success: function (data)
                {
                    $('#Edit').empty().append(data);
                    var window = $('#Edit');
                    if (!window.data('kendoWindow')) {

                        window.kendoWindow({
                            modal: true,
                            title: 'Result',
                            actions: ['Close'],
                            width: 600,
                            draggable: false,
                            resizable: false,
                            visible: false,
                            height: 300
                        });
                    }

                    window.data('kendoWindow').center().open();
                    return false;

                }
            });
        }
        function openpopup(s)
        {
            $.ajax({
                cache: false,

                type: "POST",

                url: '../OutgoingCalls/Openpopup',
                data:{Id:s,mark:1},
                success: function (data)
                {
                    $('#Note').empty().append(data);
                    var window = $('#Note');
                    if (!window.data('kendoWindow')) {

                        window.kendoWindow({
                            modal: true,
                            title: 'Add Note',
                            actions: ['Close'],
                            width: 600,
                            draggable: false,
                            resizable: false,
                            visible: false,
                            height: 400
                        });
                    }

                    window.data('kendoWindow').center().open();
                    return false;

                }
            });
        }
        $('#btnSearch').click(function () {
            var grid = $('#OutgoingSummary-grid').data('kendoGrid');
            grid.dataSource.page(1);
            return false;
        });
        $('#txtSearch').keydown(function (event) {
            if (event.keyCode == 13) {
                $("#btnSearch").click();
                return false;
            }

        });
        $('#txtSearch').val('Search');
        $('#txtSearch').focus(function(){
            $(this).val('');
        });
        $('#txtSearch').blur(function(){
            if($(this).val().length==0)
                $('#txtSearch').val('Search');
        });
       
    </script>
</div>
<div id="Note" style="display:none;">

</div>
<div id="Edit" style="display:none;">

</div>