function loadGrid(data) {
    var columns = data[0].report.metaData;

    columns.forEach(function (element) {
        element.headerTemplate = "<span id='menuTarget' class='k-icon k-i-more-vertical'></span><a class='k-link' href='#'>" + element.title + "</a>";
    });

    localStorage.setItem("MetaData", JSON.stringify(columns));
    kendo.ui.FilterMenu.fn.options.operators.integer = {
        eq: "Equal to",
        neq: "Not equal to"
    };
    kendo.ui.FilterMenu.fn.options.operators.string = {
        eq: "Equal to",
        neq: "Not equal to",
        contains: "Contains"
    };
    kendo.ui.FilterMenu.fn.options.operators.number = {
        eq: "Equal to",
        neq: "Not equal to"
    };
    kendo.ui.FilterMenu.fn.options.operators.date = {
        eq: "Equal to",
        neq: "Not equal to"
    };
    //hhttps://docs.telerik.com/kendo-ui/api/javascript/ui/filter/configuration/operators.boolean.neq
    //hhttps://docs.telerik.com/kendo-ui/api/javascript/ui/filter/configuration/operators.boolean.custom.text
    kendo.ui.FilterMenu.fn.options.operators.boolean = {
        eq: "Equal to",
        neq: "Not equal to"
    };
    $("#grid").empty().kendoGrid({
        columns: columns,
        dataSource: {
            transport: {
                read: function (option) {
                    $.ajax({
                        url: "Components/BindKendoGridData",
                        contentType: 'application/json;',
                        dataType: 'json',
                        type: 'POST',
                        data: kendo.stringify({
                            reportId: data[0].report.reportId,
                            gridParameter: option.data
                        }),
                        success: function (result) {
                            option.success(result);
                        },
                        error: function (result) {
                            option.error(result);
                        }
                    });
                },
                parameterMap: function (data) {
                    return kendo.stringify(data);
                }
            },
            serverFiltering: true,
            serverGrouping: true,
            serverPaging: true,
            serverSorting: true,
            serverAggregates: true,
            aggregate: data[0].report.aggregate,
            pageSize: 10,
            schema: {
                data: function (response) {
                    return response.data;
                },
                total: function (response) {
                    return response.total;
                },
                groups: function (response) {
                    return response.groups;
                },
                aggregates: function (response) {
                    return response.aggregates;
                }
            }
        },
        sortable: true,
        groupable: true,
        columnMenu: false,
        filterable: false,
        reorderable: true,
        resizable: true,
        pageable: {
            previousNext: true,
            alwaysVisible: false,
            refresh: true,
            pageSizes: [10, 20, 30]
        },
        noRecords: true,
        messages: {
            noRecords: "There is no data for the selected criteria."
        }
    });
    // Removes default text - "items per page".
    $('.k-pager-sizes')
        .contents()
        .filter(function () {
            return this.nodeType === 3;
        }).remove();

    //$('.k-grouping-header').hide();

    $("#context-menu").kendoContextMenu({
        target: "#grid",
        filter: "#menuTarget",
        alignToAnchor: true,
        copyAnchorStyles: false,
        showOn: "click",
        select: function (e) {
            var groupingFields = $("#grid").data("kendoGrid").dataSource._group;
            var field = $(e.target).parent()[0].dataset.field;
            if ($(e.item).text().trim() === "Group Column") {
                $('.k-grouping-header').show();
                groupingFields.push({ field: field, dir: "desc" });
                $(e.item).text("Ungroup Column");
            } else if (e.item.innerText === "Ungroup Column") {
                $('.k-grouping-header').hide();
                groupingFields.splice(groupingFields.findIndex(({ field }) => field === field), 1);
                $(e.item).text("Group Column");
            }            
            $("#grid").data("kendoGrid").dataSource.read();
        }
    });

   
};