legend: {
    position: "bottom",
    labels: {
      template:
      function(e){
        return '<span style="color: red;">' + e.text +'</span>';
      }  
    }
  }

var gridName = <HTML_SELECTOR+NAME>,
    gridURL = <SERVER_URL>,

    columnNames = [{
        template: "# if((uploaded_status =='Delete In Process')||(uploaded_status =='GSTN Delete Error')||(uploaded_status =='Saved')|(uploaded_status =='Submitted')|(uploaded_status =='Filed') ){} else { # <input type='checkbox' class='checkBoxClassInv' name='selectgst[]' value='#: data.gstin_of_customer #:#: data.invoice_no #'>  #}#",
        field: "gstin",
        title: "<input type='checkbox' check-id='checkBoxClassInv' class='checkAllGrid'>",
        filterable: false,
        sortable: false,
        groupable: false,
        width: 30
    }, {
        template: "<div class='status #: uploaded_status #'>#: uploaded_status #</div>",
        field: "uploaded_status",
        title: "Status",
        width: 100
    }, {
        field: "outwardvsgstr1_status",
        title: "OutwardVsGstr1 Status",
        width: 90
    }, {
        field: "invoice_category",
        title: "Tran Type",
        width: 100
    }, {
        field: "doc_type",
        title: "Doc Type",
        width: 100
    }, {
        template: "<span class='grid-align-left'>#: customer_name #</span>",
        field: "customer_name",
        title: "Customer Name",
        width: 200
    }, {
        template: "<span class='invoice_no' >#: invoice_no #</span>",
        field: "invoice_no",
        title: "Doc No ",
        width: 100
    }, {
        field: "invoice_date",
        title: "Doc Date",
        width: 100
    }, {
        field: "place_of_supply",
        title: "POS",
        width: 90
    }, {
        command: [{
            text: " ",
            name: "Details",
            click: outwardInvoiceDetails,
            iconClass: "k-icon k-icon-20 k-i-info m-r-0-imp op-1"
        }, {
            text: " ",
            name: "Edit",
            click: outwardInvoiceEditDetails,
            iconClass: "k-icon k-icon-20 k-i-edit m-r-0-imp op-1",
            visible: function (dataItem) {
                if ((dataItem.uploaded_status == 'Deleted') || (dataItem.uploaded_status == 'Pending Response') || (dataItem.uploaded_status == 'Delete In Process') || (dataItem.uploaded_status == 'GSTN Delete Error') || (dataItem.uploaded_status == 'Saved') || (dataItem.uploaded_status == 'Submitted') || (dataItem.uploaded_status == 'Filed')) { } else {
                    if (outwardManualEntryConf == 1 && editable == 1) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        }],
        title: "<span class='select'>Details</span>",
        width: 130
    }],

    gridData = {
        p_gstin: gstin,
        return_period: fpdate
    };
//below is kendo grid defination
$("#" + gridId).empty().kendoGrid({

    dataSource: {
        transport: {
            read: {
                url: <SERVER_URL>,
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: gridData,
                dataType: "json"
            }
        },
        schema: {
            aggregates: serverAggregateConf,
            model: modelConf,
            parse: function (response) {
                //schema response structure
            },
            total: function (count) {
                // custom total page counter
            }
        },
        error: function (response) {
            dataSourceError(response);
        },
        serverPaging: serverpgination,
        pageSize: defaultPageSize,
        aggregate: aggregateConf,
        serverAggregates: typeof (serverAggregateConf) == 'undefined' ? false : true
    },
    dataBound: function (e) {
        //UI manipulations logic
    },
    scrollable: true,
    change: function (e) {
        //setting heights as per UI
    },
    dataBinding: function () {
        srno = (this.dataSource.page() - 1) * this.dataSource.pageSize();
    },
    noRecords: {
        //custom message if no message
    },
    height: 800,
    groupable: groupableConf,
    sortable: sortableConf,
    columnMenu: columnMenuConf,
    resizable: resizableConf,
    pageable: pagingConf,
    filterable: filterConf,
    columns: gridColumns,
    excelExport: excelConf,
    excel: {
        allPages: true
    }
}).data("kendoGrid");