Friday, 25 November 2016

How to enable/disable Edit button in Kendo grid


<script>
function DataBound(e)
    {
        var dataItems = e.sender.dataSource.view(); // getting dataitems from kendo grid
        var d = new Date(),
            n = d.getMonth() + 1,
            y = d.getFullYear(),
            z = d.getDate();

        for (var j = 0; j < dataItems.length; j++)
        {
            var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");
            if (dataItems[j].MonthNumber < n)
            {
                row.find('.k-grid-edit').enable(false);
                row.find('.k-grid-edit').css("cursor", "not-allowed");
            }

            if (z < 6) // upto 20th of current month and  5th of next month we need to allow  for edit
            {
                var month = n - 1
                if (dataItems[j].MonthNumber == month)
                {
                    row.find('.k-grid-edit').enable(true);
                }
            }
        }
    }

</script>



On Custom button click how to redirect/ call other action method/Page in kendo

<Script>

    function showDetails(e)
    {
        var index = 0;
        var grid = $("#ActualRevenueSummary").data("kendoGrid");
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var value = $('#ProjectId').val();
        var text = $("#ProjectId").data("kendoDropDownList").text();
        var Month = dataItem.MonthNumber;
        var MonthName = dataItem.MonthName;
        var projectname = dataItem.projectname;
        var NestId = $(this).data('id');
        var url = "/ActualRevenueDetails/GetRevenueDetails?Id=" + value + "&&month=" + Month + "&&MonthName=" + MonthName + "&&projectName=" + text + "";
        window.location.href = url;
    }

</script>

----------------------------------------------------------------------------------

  @(Html.Kendo().Grid<SPAN.OMS.ViewModel.ActualRevenueViewModel>()
                                .Name("ActualRevenueSummary")
                                 .Columns(columns =>
                                 {
                                     columns.Bound(p => p.RevenueSummaryId).Visible(false);
                                     columns.Bound(p => p.ProjectId).Visible(false);
                                     columns.Bound(p => p.Year).Visible(false);
                                     columns.Bound(p => p.MonthNumber).Visible(false);
                                     columns.Bound(p => p.MonthName).Title("Month");
                                     columns.Bound(p => p.ResourceCount).Title("Total no. of Resrc").Format("{0:n2}");
                                     columns.Bound(p => p.TotalBilledRsrcCount).Title("Total no. of Billed Resrc").Format("{0:n2}");
                                     columns.Bound(p => p.OffshoreAmount).Format("{0:c2}").Title("Offshore Revenue");
                                     columns.Bound(p => p.OnsiteAmount).Format("{0:c2}").Title("Onsite Revenue");
                                     columns.Bound(p => p.Travel).Title("Travel Revenue").Format("{0:c2}");
                                     columns.Bound(p => p.Hardware).Title("H/W Revenue").Format("{0:c2}");
                                     columns.Bound(p => p.Software).Title("S/w Revenue").Format("{0:c2}");
                                     columns.Bound(p => p.Misc).Title("Misc Revenue").Format("{0:c2}");
                                     columns.Bound(p => p.ComissionAmount).Title("Commission").Format("{0:c2}").ClientFooterTemplate("Grand Total:");
                                     columns.Bound(p => p.Total).Title("Revenue Total").ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
                                     columns.Command(command => { command.Edit(); });
                                     columns.Command(command => command.Custom("ViewDetails").Click("showDetails").Text("<i class='fa fa-pencil-square-o fa-lg' ></i>"));
                                 }
                                )
                                    .Resizable(resizing => resizing.Columns(true))
                                    .Events(events => events.DataBound("DataBound"))
                                    .Editable(editabe => editabe.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
                                    .Events(events => events.Edit("edit"))
                                    .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Events(events => events.Error("error_handler"))
                                    .Events(events => events.Change("isEditable").Sync("sync_handler"))
                                    .Aggregates(aggregates =>
                                    {
                                        aggregates.Add(p => p.Total).Sum();
                                    })
                                    .Model(model =>
                                    {
                                        model.Id(p => p.RevenueSummaryId);
                                        model.Id(p => p.ProjectId);
                                        model.Id(p => p.Year);
                                        model.Id(p => p.MonthNumber);
                                        model.Field(p => p.MonthName).Editable(false);
                                        model.Field(p => p.ResourceCount).Editable(false);
                                        model.Field(p => p.TotalBilledRsrcCount).Editable(false);
                                        model.Field(p => p.OffshoreAmount).Editable(false);
                                        model.Field(p => p.OnsiteAmount).Editable(false);
                                        model.Field(p => p.Travel).Editable(false);
                                        model.Field(p => p.Hardware).Editable(false);
                                        model.Field(p => p.Software).Editable(false);
                                        model.Field(p => p.Misc).Editable(false);
                                        model.Field(p => p.ComissionAmount).Editable(true);
                                        model.Field(p => p.Total).Editable(true);
                                    })
                       .Read(read => read.Action("GetActualRevenueSummary", "ActualRevenue").Data("ItemFormValues"))
               .Update(update => update.Action("RevenueSummaryUpdate", "ActualRevenue").Data("ItemFormValues"))
                                             )
            )

Changing the Background Color of the kendo grid cell

<style>
    tr.condtn1 td:last-child {
        background-color: #ff3232;
        font-weight: bolder !important;
    }

    tr.condtn2 td:last-child {
        background-color: green;
        font-weight: bolder !important;
    }

    tr.condtn3 td:last-child {
        background-color: yellow;
        font-weight: bolder !important;
    }

    tr.condtn4 td:last-child {
        background-color: transparent;
        font-weight: bolder !important;
    }
</style>


<script>

  function DataBound(e)
    {
        var columns = e.sender.columns;
        var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "MarginValue" + "]").index();

        // iterate the data items and apply row styles where necessary
        var dataItems = e.sender.dataSource.view();
        for (var j = 0; j < dataItems.length; j++)
        {
            var ForecastedValue = 0;
            var actualRevenue = 0;
            var budgetedValue = 0;
            var marginValue = 0;
            ForecastedValue = dataItems[j].get("ForecastedValue");
            actualRevenue = dataItems[j].get("ActualRevenue");
            budgetedValue = dataItems[j].get("BudgetedValue");
            var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");

            if (ForecastedValue > actualRevenue) {
                row.addClass("condtn1"); // refer css style above
            }
            else if (ForecastedValue < actualRevenue) {
                row.addClass("condtn2"); // refer css style above
            }
            else if (budgetedValue < actualRevenue) {
                row.addClass("condtn3"); // refer css style above
            }
            else {
                row.addClass("condtn3"); // refer css style above
            }

        }

    }

</script>


--------------------------------------------------------------------------------------------------------

<div class="director-dashboardProject">
                                        @(Html.Kendo().Grid<SPAN.OMS.ViewModel.SummaryView>()
                                            .Name("UsaProjectGrid")
                                             .Columns(columns =>
                                                {
                                                    columns.Bound(p => p.ProjectName).Format("{0:n2}").ClientFooterTemplate("Grand Total:").Width(122);
                                                    columns.Bound(p => p.BudgetedValue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
                                                    columns.Bound(p => p.ForecastedValue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
                                                    columns.Bound(p => p.ActualRevenue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
                                                    columns.Bound(p => p.ActualCost).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
                                                    columns.Bound(p => p.CommissionValue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
                                                    columns.Bound(p => p.MarginValue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
                                                })
                                                .Events(events => events.DataBound("DataBound")) // On data bound we need to check data values and need to do the required changes.
                                                .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .Events(events => events.Error("error_handler"))
                                                    .Aggregates(aggregates =>
                                                {
                                                    aggregates.Add(p => p.BudgetedValue).Sum();
                                                    aggregates.Add(p => p.ForecastedValue).Sum();
                                                    aggregates.Add(p => p.ActualRevenue).Sum();
                                                    aggregates.Add(p => p.ActualCost).Sum();
                                                    aggregates.Add(p => p.CommissionValue).Sum();
                                                    aggregates.Add(p => p.MarginValue).Sum();
                                                })
                                                .Read(read => read.Action("GetUsaProjectSummary", "SummaryView").Data("ItemFormValues"))
                                                )
                                        )
                                    </div>