Programmatically hide custom column in scrollable grid

[Richard]

Good afternoon,

Using the demo https://demos.telerik.com/aspnet-core/grid/custom-command edited in REPL I have added some extra columns and grouping, plus a custom command whose visibility is conditional.

When I make the grid scrollable and contained in a div whose class is "container" the custom command column is hidden at runtime.

Index.html:

<div class="container">
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Command(command => command.Custom("Close").Click("showDetails").Visible("colVisible"));
        columns.Bound(e => e.Title);
        columns.Group(group => group
            .Title("Name")
            .Columns(name => {
                name.Bound(e => e.FirstName).Width(80);
                name.Bound(e => e.LastName).Width(80);
            })
        );
        columns.Bound(e => e.FirstName).Width(80);
        columns.Bound(e => e.LastName).Width(80);
        columns.Bound(e => e.Title).Width(250);
        columns.Bound(e => e.FirstName).Width(80);
        columns.Bound(e => e.LastName).Width(80);
        columns.Bound(e => e.Title).Width(250);

    })
    .Size(ComponentSize.Small)
    .Scrollable()
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("CustomCommand_Read", "Grid"))
     )
)
</div>
@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)

 <script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= FirstName # #= LastName #</h2>
        <em>#= Title #</em>
        <dl>
            <dt>City: #= City #</dt>
            <dt>Address: #= Address #</dt>
        </dl>
    </div>
</script>

Script.js:

   function showDetails(e) {
        e.preventDefault();

        var detailsTemplate = kendo.template($("#template").html());
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

    function colVisible(dataItem) {
        var visible = dataItem.LastName == "Fuller";
        return !visible;
    }

Is there a way to make the custom command appear?  I guess that the width of the grid is being set by "container", I've predefined column widths of some of the columns, and it works out which columns appear before the visibility of the custom command is decided, so that appears behind the first Title column?

Kind regards,

Richard

[Anton Mironov]

Hello Richard,

Thank you for the details provided.

The described behavior is caused by your Custom Command column, which is getting swallowed by the grouped columns configuration and column order. In order to show your custom column, I would recommend adding a with to it:

 columns.Command(command => command.Custom("Close").Click("showDetails").Visible("colVisible")).Width(100);
       

Here is a REPL example:

• https://netcorerepl.telerik.com/cgYbGNFH34xzRrmt19

Feel free to test the REPL example on your side. I hope you will like the result.

Kind Regards,
Anton Mironov
Progress Telerik

[Richard]

Hi Anton,

Many thanks for your reply.

A similar solution had occurred to me after I posted the question.  I suppose the one drawback to specifying the width of the custom command is that if all the buttons are hidden you have an empty column that is 100px wide.

Kind regards,

Richard