Ada

<div class="row" style="margin-bottom:10px;padding-left:10px;">
    <div class="col-md-1">
        Period:
    </div>
    <div class="col-md-8">
        <select id="ddlPeriod" onchange="ddlPeriod_onChange(this)"></select>
    </div>
</div>

<div id="GridPane" style="height:100%">
    <div id="grid"></div>

    @*@(Html.Kendo().Grid<CMS.Models.MsSqReconcile>()
                    .Name("grid")
                    .Scrollable()
                    .Groupable()
                    .Sortable()
                    .Filterable(
                        filterable => filterable.Extra(false)
                    )
                    .Resizable(resizeable => resizeable.Columns(true))
                    .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(true)
                        .ButtonCount(5)
                    )
                    .Columns(
                        columns =>
                        {
                            columns.Select().Width(35);
                            columns.Bound(p => p.RowId).Title("Row Id").Hidden(true).Filterable(true);
                            columns.Bound(p => p.Material).Title("Material");
                            columns.Bound(p => p.Description).Title("Description");
                            columns.Bound(p => p.MovAvgPrice).Title("Mov Avg Price");
                            columns.Bound(p => p.TotalStock).Title("Total Stock");
                            columns.Bound(p => p.TotalValue).Title("Total Value");
                            columns.Bound(p => p.Status).Title("Status");
                            columns.Bound(p => p.MainCount).Title("Main Count");
                            columns.Bound(p => p.TagManual).Title("Tag Manual");
                            columns.Bound(p => p.TotalQty).Title("Total Qty");
                            columns.Bound(p => p.DiffMain).Title("Diff Main");
                            columns.Bound(p => p.Amount).Title("Amount");
                        }
                    )
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(p => p.Material))
                        .Read(read => read.Action("ReconcileList", "Reconcile").Data("{period:\"}"))
                        .PageSize(100)
                    )
                    .Events(m => m.Change("onChange"))
                    .PersistSelection(true)
                    .HtmlAttributes(new { style = "height: 400px" })
        )*@

</div>
@*<button id="processTally" class="btn btn-success" style="margin-top:25px;">Add Reconcile</button>*@
<style>
    #grid col, #grid td, #grid th {
        width: 150px;
    }
</style>

<script>
    var period;
    var selectedIds = [];

    $(document).ready(resizeGrid);
    $(window).resize(resizeGrid);
    $(document).ready(function () {
        InitCombo();
        $("#grid").kendoGrid({
            ///toolbar: ["excel"],
            toolbar: kendo.template($("#templateActBtn").html()),
            excel: {
                fileName: "Reconcile Data.xlsx",
                filterable: true
            },
            dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: "@Url.Content("~/Reconcile/ReconcileList/?period=")" + period
                },
                serverFiltering: true,
                serverPaging: true,
                serverSorting: true,
                pageSize: 100,
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: 'Errors',
                    model: {
                        id: "Material"
                    }
                }
            },
            height: 460,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                buttonCount: 5,
                pageSize: 50,
                pageSizes: [50, 100, 200, 500, 1000, 5000]
            },
            filterable: {
                extra: false
                //mode: 'row',
                //operators: {
                //    string: {
                //        contains: "contains"
                //    }
                //}
            },
            change: onChange,

            columns: [{
                selectable: true,
                width: 35
                }, {
                    field: "RowId",
                    title: "Row Id",
                    hidden: true
                }, {
                    field: "Material",
                    title: "Material",
                }, {
                    field: "Description",
                    title: "Description"
                }
                , {
                    field: "MovAvgPrice",
                    title: "Mov Avg Price"
                }, {
                    field: "TotalStock",
                    title: "Total Stock"
                }, {
                    field: "TotalValue",
                    title: "Total Value"
                }, {
                    field: "Status",
                    title: "Status"
                }
                , {
                    field: "Qty",
                    title: "Main Count"
                }, {
                    field: "QtyTagManual",
                    title: "Tag Manual"
                }, {
                    field: "TotalQty",
                    title: "Total Qty"
                }, {
                    field: "DiffMain",
                    title: "Diff Main"
                }, {
                    field: "Amount",
                    title: "Amount"
                }
            ],
            persistSelection: true
        });

        var grid = $("#grid").data("kendoGrid");
        var dropdown = grid.pager.element
            .find(".k-pager-sizes [data-role=dropdownlist]")
            .data("kendoDropDownList");

        //var item = {};

        //item[dropdown.options.dataTextField] = "50";
        //item[dropdown.options.dataValueField] = 50;
        //dropdown.dataSource.add(item);
        //item[dropdown.options.dataTextField] = "100";
        //item[dropdown.options.dataValueField] = 100;
        //dropdown.dataSource.add(item);
        //item[dropdown.options.dataTextField] = "200";
        //item[dropdown.options.dataValueField] = 200;
        //dropdown.dataSource.add(item);
        //item[dropdown.options.dataTextField] = "500";
        //item[dropdown.options.dataValueField] = 500;
        //dropdown.dataSource.add(item);
        //item[dropdown.options.dataTextField] = "1000";
        //item[dropdown.options.dataValueField] = 1000;
        //dropdown.dataSource.add(item);
        //item[dropdown.options.dataTextField] = "5000";
        //item[dropdown.options.dataValueField] = 5000;
        //dropdown.dataSource.add(item);

        //dropdown.bind("change", function (e) {
        //    if (this.text() == "All") {
        //        grid.one("dataBound", function () {
        //            setTimeout(function () {
        //                dropdown.span.text("");
        //            });
        //        });
        //    }
        //    else if (this.text() == "50") {
        //        grid.one("dataBound", function () {
        //            setTimeout(function () {
        //                dropdown.span.text("50");
        //            });
        //        });
        //    }
        //    else if (this.text() == "100") {
        //        grid.one("dataBound", function () {
        //            setTimeout(function () {
        //                dropdown.span.text("100");
        //            });
        //        });
        //    }
        //    else if (this.text() == "200") {
        //        grid.one("dataBound", function () {
        //            setTimeout(function () {
        //                dropdown.span.text("200");
        //            });
        //        });
        //    }
        //    else if (this.text() == "500") {
        //        grid.one("dataBound", function () {
        //            setTimeout(function () {
        //                dropdown.span.text("500");
        //            });
        //        });
        //    }
        //    else if (this.text() == "1000") {
        //        grid.one("dataBound", function () {
        //            setTimeout(function () {
        //                dropdown.span.text("1000");
        //            });
        //        });
        //    }
        //    else if (this.text() == "5000") {
        //        grid.one("dataBound", function () {
        //            setTimeout(function () {
        //                dropdown.span.text("5000");
        //            });
        //        });
        //    }
        //});

        $('#processTally').click(function () {
            if (selectedIds.length > 0) {
                $.ajax({
                    type: "POST", url: "@Url.Content("~/Reconcile/DoReconcile")",
                    data: { data: selectedIds, period: $("#ddlPeriod").val()},
                    success: function (resp) {
                        if (JSON.stringify(resp) == "1") {
                            kendo.alert('Succes add reconcile items');
                            window.location.href = '@Url.Content("~/Reconcile")';
                        } else {
                                kendo.alert(resp);
                        }
                    }, failure: function (resp) {

                    }, error: function (resp) {

                    }
                });
            }
            else {
                alert("No selected items");
            }
        });
    });

    function InitCombo() {
         $.ajax({
            type: "GET", url: "@Url.Content("~/Reconcile/GetPeriod")",
             success: function (resp) {
                 var cd = resp;
                 for (var field in cd.Period) {
                     $('<option value="' + cd.Period[field] + '">' + cd.Period[field] + '</option>').appendTo('#ddlPeriod');
                 }
                 $("#ddlPeriod option:last").prop("selected", "selected");
            }, failure: function (resp) {

            }, error: function (resp) {

            }
        });
    }
    function ddlPeriod_onChange(obj) {
        period = $(obj).val();
        var grid = $("#grid").data("kendoGrid");
        var dataSource = new kendo.data.DataSource({
            type: "aspnetmvc-ajax",
            transport: {
                read: "@Url.Content("~//Reconcile/ReconcileList/?period=")" + period
            },
            serverFiltering: true,
            serverPaging: true,
            serverSorting: true,
            pageSize: 100,
            schema: {
                data: "Data",
                total: "Total",
                errors: 'Errors',
                model: {
                    id: "Material"
                }
            }
        });
        grid.setDataSource(dataSource);
    }
    function onChange(arg) {
        var grid = $("#grid").data("kendoGrid");
        selectedIds = grid.selectedKeyNames();
    }
    function resizeGrid() {
        //Define Elements Needed
        var wrappersH = $(".content-wrapper");
        var header = $(".content-header");
        var content = $(".content");
        var grid = $("#grid");

        //Other variables
        var minimumAcceptableGridHeight = 250; //This is roughly 5 rows
        var otherElementsHeight = 0;

        //Get Window Height
        var windowHeight = $(window).outerHeight();

        //Get Header Height if its existing
        var hasHeader = header.length;
        var headerHeight = hasHeader ? header.outerHeight(true) : 0;

        //Get the Grid Element and Areas Inside It
        var contentArea = grid.find(".k-grid-content");  //This is the content Where Grid is located
        var otherGridElements = grid.children().not(".k-grid-content"); //This is anything ather than the Grid iteslf like header, commands, etc
        //console.debug(otherGridElements);

        //Calcualte all Grid elements height
        otherGridElements.each(function () {
            otherElementsHeight += $(this).outerHeight(true);
        });

        //Get other elements same level as Grid
        var parentDiv = grid.parent("div");

        var hasMainContent = parentDiv.length;
        if (hasMainContent) {
            var otherSiblingElements = content.children()
                .not("#grid")
                .not("script");

            //Calculate all Sibling element height
            otherSiblingElements.each(function () {
                otherElementsHeight += $(this).outerHeight(true);
            });
        }

        //Padding you want to apply below your page
        var bottomPadding = 0;

        //Check if Calculated height is below threshold
        var calculatedHeight = windowHeight - headerHeight - otherElementsHeight - bottomPadding;
        var finalHeight = calculatedHeight < minimumAcceptableGridHeight ? minimumAcceptableGridHeight : calculatedHeight;

        var totalHeight = (wrappersH.outerHeight(true) - finalHeight) - 75;

        //Apply the height for the content area
        contentArea.height(totalHeight);
    }

</script>

<script type="text/x-kendo-template" id="templateActBtn">
    <a id="processTally" class="btn btn-success" href="\\#">Add Recon</a>
    <a class="k-button k-button-icontext k-grid-excel pull-right" href="\\#"><span class="k-icon k-i-excel"></span>Export to Excel</a>

</script>