Conditionally Hide Create Button on Sub-Grid

3 posts, 1 answers
  1. AP
    AP avatar
    244 posts
    Member since:
    Apr 2010

    Posted 08 Jun 2016 Link to this post

    I've got a sub-grid, which needs to allow records to be inserted, dependant on a value in the parent record.

    I've got an onBound handler, which gets passed the subGrid name, but what do I need to do to hide the create button in the toolbar?

    The toolbar is defined here:-

               .Events(e => e.Edit("onEdit"))
             .Columns(columns =>
                 columns.Bound(o => o.ActionID).Title("ID");
                 columns.Bound(o => o.ActionDate).Title("Date").Format("{0:g}");
                 columns.Bound(o => o.CategoryDescription).Title("Category");
                 columns.Bound(o => o.ActionDesc).Title("Details");
                 columns.Bound(o => o.UserName).Title("User");
        .ToolBar(commands => commands.Create().Text("Add Action"))
      .Events(e => e.DataBound(@<text> function(e){onSubBound(e,"ActionGrid_#=LogID#",#=Resolved#)}</text>))
      .Editable(editable => editable
             .DataSource(dataSource => dataSource
                  .Events(e => e.Error(@<text> function(e){subError(e,"ActionGrid_#=LogID#")} </text>).Sync("ActionSync"))
                  .Model(m => m.Id(p => p.ActionID))
                                 .Read(read => read.Action("RD_Actions", "Home", new { LogID = "#= LogID #" }))
                                   .Create(create => create.Action("InsertAction", "Home", new { LID = "#= LogID #" }))
                       .Update(update => update.Action("UpdateAction", "Home"))
                           .Destroy(delete => delete.Action("DeleteAction", "Home"))
                 .Pageable(p => p.Refresh(true))

    I can pass the Grid name and the value of the Boolean field that determines if records should be able to be added, but I'm at a loss at how to hide the button. I have tried:-

    function onSubBound(e,gridName,Flag)
                   // alert(gridName);
                    var grid = $(document.getElementById(gridName)).data("kendoGrid");

    But this doesn't work.

    How can I hide the button when I need to?


  2. Answer
    Eyup avatar
    3936 posts

    Posted 13 Jun 2016 Link to this post

    Hi Andrew,

    You can use the detailExpand event handler to achieve this requirement:

    For example:
    function detailExpand(args) {
        var masterRow = this.dataItem(args.masterRow);
        var value = this.dataItem(args.masterRow).ProductName;
        if (value.indexOf("8") >= 0) {
            var detailGrid = args.detailRow.parents(".k-widget.k-grid");

    That should do the trick. Please give it a try and let me know if it works for you.

    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. AP
    AP avatar
    244 posts
    Member since:
    Apr 2010

    Posted 20 Jun 2016 in reply to Eyup Link to this post

    Sorry for the delay (I've been on leave), this works like a charm.



Back to Top