Conditionally Hide Create Button on Sub-Grid

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

    Posted 08 Jun 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
    3007 posts

    Posted 13 Jun 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. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 20 Jun 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