How to hide command buttons for select rows

12 posts, 0 answers
  1. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 25 Apr 2017 Link to this post

    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?
  2. Stefan
    Admin
    Stefan avatar
    2476 posts

    Posted 27 Apr 2017 Link to this post

    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.
  3. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 27 Apr 2017 in reply to Stefan Link to this post

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

     

  4. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 27 Apr 2017 in reply to Marion Link to this post

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

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

  5. Stefan
    Admin
    Stefan avatar
    2476 posts

    Posted 01 May 2017 Link to this post

    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 visualization (charts) and form elements.
  6. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 01 May 2017 in reply to Stefan Link to this post

    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

  7. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 01 May 2017 in reply to Marion Link to this post

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

  8. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 02 May 2017 Link to this post

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

  9. Stefan
    Admin
    Stefan avatar
    2476 posts

    Posted 03 May 2017 Link to this post

    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.
  10. Harry Gozlan
    Harry Gozlan avatar
    2 posts
    Member since:
    Jan 2009

    Posted 25 Sep 2018 in reply to Stefan Link to this post

    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

  11. Harry Gozlan
    Harry Gozlan avatar
    2 posts
    Member since:
    Jan 2009

    Posted 25 Sep 2018 in reply to Harry Gozlan Link to this post

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

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

  12. Stefan
    Admin
    Stefan avatar
    2476 posts

    Posted 27 Sep 2018 Link to this post

    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.
Back to Top