How to hide command buttons for select rows

[Marion]

I am using a treelist to display groups and items. On nodes that represent groups, I want to display the Add, Edit, and Delete buttons (which I have working now). On the nodes that are items I only want to show the Delete button. How do I conditionally hide the buttons for nodes that are items and not groups?

[Stefan]

Hello Marion,

The desired result can only be achieved via custom logic using jQuery as it is not supported out of the box.

I can suggest using a custom logic on the dataBound event to determine which buttons have to be hidden, and to hide them with jQuery:

http://dojo.telerik.com/OGibO

Please have in mind that the example is hiding all buttons, and custom logic have to be added to hide only the desired buttons.

Regards,
Stefan
Telerik by Progress

[Marion]

Is there an MVC version of this, example? This is what I have so far.

@(Html.Kendo().TreeList<CityBudget.Areas.MvcArea.Models.CouncilReportModel>()
                .Name("treelist")
                .Columns(columns =>
                {
                    columns.Add().Field(e => e.Description).Width(300);
                    columns.Add().Field(e => e.IsBatch).Title("Edit").Width(150).Command(c =>
                    {
                        c.CreateChild().Text("Add");
                        c.Edit();                       
                        c.Destroy();
                    });
                })
                .Filterable()
                .Sortable()
                .Selectable()
                .DataSource(dataSource => dataSource
                    .Read(read => read
                        .Action("GetBatches", "CouncilReport")
                        .Data("getSelectedYear")
                    )
                    .ServerOperation(false)
                    .Model(m =>
                    {
                        m.Id(f => f.UserDeptBatchId);
                        m.ParentId(f => f.ParentUserDeptBatchId).DefaultValue(Guid.Empty);
                        m.Field(f => f.Description);
                        m.Expanded(true);
                    })
                )
                .Height(600)
            )

 

[Marion]

I thought you might need to see the function getSelectedYear().

function getSelectedYear() {
        return {
            year: $("#cboBudgetYear").val()
        }
    }

[Stefan]

Hello Marion,

The same approach can be used in the MVC version of the widget:

.Events(events => {
    events.DataBound("onDataBound");
    })

And the onDataBound function:

function onDataBound(e) {
            e.sender.element.find(".k-grid-edit").hide()
        }

Just as a reminder, this will hide all of the edit buttons, and additional custom logic have to be used to determine which ones have to be hidden or shown.

Regards,
Stefan
Telerik by Progress

[Marion]

Okay. Thank you. This is working.

How can I pass more information (like the model) into the onDataBound function?

Do I have to parse through the DOM to figure out what type of node I am on or is there a better way to get the data I need to decide whither to hide a button?

Thank you

[Marion]

I have been exploring the e.model and it doesn't seem to provide access to my model. Here is an example of my code:

var model = e.model;
console.log(model.Description);

[Marion]

Can anyone point me to the documentation of what 'e' is in an event function like:

<script type="text/javascript">

function Grid_onDataBinding(e){

//handling code

}

</script>

I found this:

http://docs.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html#OnDataBound

but the document doesn't explain what type is 'e', what I should expect 'e' to contain, or how I should use 'e'.

[Stefan]

Hello Marion,

The 'e' is representing the event object, which contains e.sender which represents the widget:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

For example, e.sender.dataItem() can be used to retrieve a specific dataItem based on an index:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

Regards,
Stefan
Telerik by Progress

[Harry Gozlan]

Hi Stefan,

Adding custom logic to your Dojo :

dataBound:function(e){
                          var data = this.dataSource.view();
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].id == "1" || data[i].id == "2" || data[i].id == "3") {
                            var currenRow = this.tbody.find("tr[data-uid='" + data[i].uid + "']");
                            var editButton = $(currenRow).find(".k-grid-edit");
                            editButton.prop('disabled', true);
                           
                            
                            
                        }
                    }
                                                         
                        }

Dojo here : http://dojo.telerik.com/OhUluBUD

If you click on 'Add Child Record', the update button is disabled (it takes the edit button definition). How would you manage that ?

Thanks

Arnaud

[Harry Gozlan]

May not be the best way but adding this solved my above request :

edit: function (e) {
                    $(".k-grid-update").prop('disabled', false);
                }

[Stefan]

Hello, Harry,

Thank you for sharing a solution. It is highly appreciated.

This occurs because the widget is passing the disabled prop down.

The provided solution is a good one and can be used in the application.

In any issues occurs due to the additional code, please let us know and we will check for a different solution if available.

Regards,
Stefan
Progress Telerik