This is a migrated thread and some comments may be shown as answers.

How to hide command buttons for select rows

11 Answers 1909 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Marion
Top achievements
Rank 1
Marion asked on 25 Apr 2017, 07:16 PM
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?

11 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 27 Apr 2017, 01:21 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marion
Top achievements
Rank 1
answered on 27 Apr 2017, 03:20 PM

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)
            )

 

0
Marion
Top achievements
Rank 1
answered on 27 Apr 2017, 03:27 PM

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

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

0
Stefan
Telerik team
answered on 01 May 2017, 06:44 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Marion
Top achievements
Rank 1
answered on 01 May 2017, 02:30 PM

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

0
Marion
Top achievements
Rank 1
answered on 01 May 2017, 03:39 PM

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);

0
Marion
Top achievements
Rank 1
answered on 02 May 2017, 05:10 PM

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'.

0
Stefan
Telerik team
answered on 03 May 2017, 07:23 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Harry Gozlan
Top achievements
Rank 1
answered on 25 Sep 2018, 03:33 PM

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

0
Harry Gozlan
Top achievements
Rank 1
answered on 25 Sep 2018, 05:31 PM

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

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

0
Stefan
Telerik team
answered on 27 Sep 2018, 07:12 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
Marion
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Marion
Top achievements
Rank 1
Harry Gozlan
Top achievements
Rank 1
Share this question
or