Hide Edit button in a group

3 posts, 0 answers
  1. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 23 May 2015 Link to this post

    Hi

    I used this code to hide Edit and Delete button if a column in the grid has value of 1

    function onDataBoundgridCreditors(e) {
     
        var grid = $("#gridCreditors").data("kendoGrid");
        var gridData = grid.dataSource.view();
     
        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            if (gridData[i].CREDITOR_SOURCE_ID == 1) {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                var editButton = $(currenRow).find(".k-grid-edit");
                editButton.hide();
                var deleteButton = $(currenRow).find(".k-grid-delete");
                deleteButton.hide();
            }
        }
    }

    I added a group and now gridData[i].CREDITOR_SOURCE_ID  from the function above is not recognize.

    What should I use to hide the buttons in the group?

    Here is the grid:

    @(Html.Kendo().Grid<ShowCreditCheck>()
        .Name("gridCreditors")
    .Columns(columns =>
    {
        columns.Bound(c => c.CREDITOR_ID).Hidden(true);
        columns.Bound(c => c.ASSIGNMENT_ID).Hidden(true);
        columns.Bound(c => c.ACCOUNT_REFERENCE).Title("Ref#").Width(70).HtmlAttributes(new { title = " #= ACCOUNT_REFERENCE # " });
        columns.Bound(c => c.CREDITOR_TYPE).Title("Type").Width(90);
        columns.Bound(c => c.creditorClass).Title("Class").Width(70);
        columns.Bound(c => c.CREDITOR_NAME).Title("Creditor").Width(110);
        columns.Bound(c => c.CREDITOR_SOURCE).Title("Source").Width(80);
        columns.Bound(c => c.applicantNumber).Title("Applicant").Width(60);
        columns.Bound(c => c.CREDIT_CHECK_CURRENT_BALANCE).Title("Balance").Width(60).Format("{0:#,##}").HtmlAttributes(new { style = "text-align:right" })
                            .ClientFooterTemplate("<div style='text-align:right'>#= kendo.format('{0:0,00}', sum)#</div>")
                            .ClientGroupFooterTemplate("<div style='text-align:right'>#= kendo.format('{0:0,00}', sum)#</div>");
        columns.Bound(c => c.DATE_CREATED).Title("Checked").Width(75).Format("{0:dd/MM/yyyy}");
        columns.Bound(c => c.CREDITOR_SOURCE_ID).Hidden(true);
        columns.Bound(c => c.OWNER_ID).Hidden(true);
        columns.Bound(c => c.CREDIT_STATUS_ID).Hidden(true);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(70);
    })
    .ToolBar(toolbar => toolbar.Create().Text("Add Creditor"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ProvidedCreditCheckTemplate"))
    .Pageable(pager => pager.Refresh(true))
    .Sortable()
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .HtmlAttributes(new { style = "height:420px;" })
    .Events(e => e.DataBound("onDataBoundgridCreditors"))
    .Groupable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Group(group => group.Add(p => p.creditorClass))
        .ServerOperation(false)
        .Aggregates(aggregates =>
        {
            aggregates.Add(p => p.CREDIT_CHECK_CURRENT_BALANCE).Sum();
        })
        .Events(events => events.Error("error_handlerCreditorProvided"))
        .Model(model => model.Id(p => p.CREDITOR_ID))
        .Create(update => update.Action("GridCreditCheck_Create", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
        .Read(read => read.Action("GridCreditCheck_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
        .Update(update => update.Action("GridCreditCheck_Update", "Home"))
        .Destroy(update => update.Action("GridCreditCheck_Destroy", "Home"))
    )
     
    )

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 25 May 2015 Link to this post

    Hello Derek,

    In this case the view() method of the dataSource returns a collection of the groups, not the rows, which is the reason for the unexpected behavior. As a workaround you could iterate the Grid rows directly instead of the dataSource items.
    E.g.

    function dataBound(e) {
        var grid = this;
     
        grid.tbody.find("tr[role='row']").each(function () {
            var dataItem = grid.dataItem(this);
     
            if (dataItem.UnitPrice > 30) {
                $(this).find(".k-grid-delete").remove();
            }
        });
    }

    In the above example I am removing the delete button for items with UnitPrice above 30.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 25 May 2015 in reply to Dimiter Madjarov Link to this post

    Thank you!

    Worked.

Back to Top