[Kendo Grid] Kendo grid using MVC helpers. #kendo #grid

KendoGrid.cshtml

@{
    bool viewCreateUserName = false;        
}

@helper ToolbarTemplate()
{
    <button class="k-button k-button-icontext k-grid-excel"><span class="k-icon k-i-excel"></span>Export to Excel</button>
    <button class="k-button k-button-icontext selectall"><span class="k-icon"></span>Select All</button>
    @*<a class="k-button k-button-icontext savegridstate" href="#"><span></span>Save Grid State</a>
    <a class="k-button k-button-icontext loadgridstate" href="#"><span></span>Load Grid State</a>
    <a class="k-button k-button-icontext cleargridstate" href="#"><span></span>Clear Grid State</a>*@
}

<script type="text/x-kendo-template" id="toolbarTemplate">
    @Html.Raw(@ToolbarTemplate().ToHtmlString().Replace("#", "\\#").Replace("</scr", "<\\/scr"))
</script>


@(Html.Kendo().Grid<Wildcat.Types.Wildtracs.BillOfLadingType>()
	.Name("gridBolsFiltered")
    .Columns(columns =>
    {
        // A checkbox column, can be used for multi-selecting rows (requires custom javascript)
        columns.Bound(t => t.ID).Title("").ClientTemplate("<input type='checkbox' value='#= ID #' />").Width(40);

        // Determine how to display this column based on its values (each row will perform these checks for its value)
        columns.Bound(t => t.Type).Title("BOL Number").ClientTemplate(
            "# if (Type == 'Customer Shipment') { #" +
                "<a href='" + Url.Action("BolEditor", "BOL") + "?orderID=#=OrderID#&bolID=#=BillOfLadingID#" + "'>#=BillOfLadingID#</a>" +
            "# } else if (Type == 'Truckload Returned To Terminal') { #" +
                "<a href='" + Url.Action("Return", "BOL") + "?bolID=#=BillOfLadingID#" + "'>#=BillOfLadingID#</a>" +
            "# } else if (Type == 'Truck Unloaded To Storage') { #" +
                "<a href='" + Url.Action("Unload", "Truck") + "?bolID=#=BillOfLadingID#" + "'>#=BillOfLadingID#</a>" +
            "# } else { #" +
                "#=BillOfLadingID#" +
            "# } #"
            ).Width(130);

        // Filterable provides a multi-check list of all values for this column in the set
        columns.Bound(t => t.Name).Title("Name").Filterable(ftb => ftb.Multi(true)).Width(130);

      	// If dates are not stored in strings, they display in weird ways in Excel export
        columns.Bound(t => t.CreateDateString).Title("Create Date").Width(150);

        // Conditionally display column based on C# variable (if false, column won't be hidden, it won't exist on the page)
        if (viewCreateUserName)
        {
            columns.Bound(t => t.CreateUserName).Title("Create User").Width(150);
        }

        // Example of a custom column, not bound to any field, not included in Excel export
        columns.Template(@<text>@Html.ActionLink("Print", "Print", "Controller")</text>).ClientTemplate("<a href='" + Url.Action("Print", "Controller") + "?id=#=ID#'>Print</a>").Width(100);
    })

    .Reorderable(r => r.Columns(true))
    // This will override other settings (Excel export, etc.). It is not needed unless you want custom functionality in the toolbar).
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>@ToolbarTemplate()</text>);
    })
    .Excel(excel => excel.AllPages(true))
    .Editable(editable => editable.DisplayDeleteConfirmation(false))
    .Pageable(p => p.PageSizes(new[] { 10, 25, 50 }))//, Model.Count }))
    .Resizable(r => r.Columns(true))
    .Sortable()
    .ColumnMenu()
    .Groupable()
    .Filterable()
    .Events(e => e.DataBound("gridDataBound").ColumnMenuInit("filterMenuInit"))
    .Scrollable(s => s.Height("max"))
    .HtmlAttributes(new { style = "height: 100%" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .PageSize(200)
        .Events(events => events.Error("error_handler").RequestEnd("gridSetOptions"))
        .Model(model =>
        {
        	model.Id(p => p.ID);
    	})
        .Read(read => read.Action("FilteredJson", "Controller").Data("FilterValues"))
    )
)

KendoGridJavascript.js

<script type="text/javascript">

    var wnd;

    var firstLoad = true;

    $(document).ready(function () {
        wnd = $("#modalWindow").kendoWindow({
            title: "Delete confirmation",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
        }).data("kendoWindow");

        $("#grid").on("click", ".savegridstate", function (e) {
            var grid = $("#gridBolsFiltered").data("kendoGrid");
            e.preventDefault();
            var gridOptions = grid.getOptions();
            localStorage["settings"] = kendo.stringify(gridOptions);
        });

        $("#grid").on("click", ".loadgridstate", function (e) {
            var grid = $("#gridBolsFiltered").data("kendoGrid");
            e.preventDefault();
            var options = localStorage["settings"];
            if (options) {
                var parsedOptions = JSON.parse(options);
                parsedOptions.toolbar = [
                    { template: $("#toolbarTemplate").html() }
                ];
                grid.setOptions(parsedOptions);
            }
        });

        $("#grid").on("click", ".cleargridstate", function (e) {
            var grid = $("#gridBolsFiltered").data("kendoGrid");
            e.preventDefault();
            grid.dataSource.filter({});
            grid.dataSource.sort({});
        });

        $(".selectall").on('click', function () {
            $('#gridBolsFiltered tbody tr').each(function () {
                var row = $(this);

                setRowCheckbox(row, true);
            });

            setHiddenInputs();
            return false; // If it doesn't return false, it will submit the form when Select All is clicked
        });
    });

    function openWindow(e) {
        e.preventDefault();
        var grid = this;
        var row = $(e.currentTarget).closest("tr");
        wnd.center().open();

        $("#yes").click(function () {
            grid.removeRow(row);
            wnd.close();
        });

        $("#no").click(function () {
            wnd.close();
        });
    }

    function error_handler(args) {

        var grid = $("#gridBolsFiltered").data("kendoGrid");

        if (args.errors) {
            grid.one("dataBinding", function (e) {
                //prevent saving if server error is thrown
                e.preventDefault();
            });
        }
        else {
            displayKendoGridErrorDialog(args, "gridBolsFiltered", false);
        }
    }

    function FilterValues() {
        return {
            TerminalCustomerIDs: $("#TerminalCustomerIDs").val(),
            TerminalIDs: $("#TerminalIDs").val(),
            ProductIDs: $("#ProductIDs").val(),
            OrderStatusIDs: $("#OrderStatusIDs").val(),
            ProducerIDs: $("#ProducerIDs").val(),
            PurchaseOrderNumber: $("#PurchaseOrderNumber").val(),
            SalesOrderNumber: $("#SalesOrderNumber").val(),
            Start: $("#Start").val(),
            End: $("#End").val(),
            BOLNumber: $("#BOLNumber").val(),
            BOLRangeStart: $("#BOLRangeStart").val(),
            BOLRangeEnd: $("#BOLRangeEnd").val()
        };
    }

    function gridSetOptions(e) {
        if (firstLoad) {
            firstLoad = false;
            var options = localStorage['@ViewBag.PageId' + '_' + "gridBolsFiltered_state"];
            if (options) {
                var parsedOptions = JSON.parse(options);
                parsedOptions.toolbar = [
                    { template: $("#toolbarTemplate").html() }
                ];
                var grid = $("#gridBolsFiltered").data("kendoGrid");
                grid.setOptions(parsedOptions);
            }
        }
        //alert("calling gridSetOptions");
    }

    function gridDataBound() {
        setPageSizeOptions();

        removeKendoProgress();
        if ("@readOnly" == "True") {
            gridReadOnly("gridBolsFiltered");
        }

        setGridOnClick();
    }
</script>