Enable Custom Command by data

[Dario]

I would like to enable or disable the custom command based on the current line value.

My model, called ItemModel has a property called HasPicture, custom command called "GetPictureCommand" should be disabled when HasPicture returns false.

@(Html.Kendo().Grid<ItemModel>
            ()
            .Name("itemGrid")
            //.ToolBar(t => t.Search())
            .Filterable()
            .AutoBind(true)
            .Columns(columns =>
            {
                columns.Bound(f => f.No);
                columns.Bound(f => f.Description);
                columns.Bound(f => f.Brand);
                columns.Command(c => c.Custom("GetPictureCommand").Text(" ").IconClass("k-icon k-i-image").Click("getImage")).Width(52);
                columns.Bound(f => f.PurchasesQty).Format("{0:N2}").HtmlAttributes(new { style = "text-align: right;" });
                columns.Command(command => command.Custom("ItemLedgerEntryPurchaseCommand").Text(" ").IconClass("k-icon k-i-arrow-drill").Click("showPurchaseDetails")).Width(52);
                columns.Bound(f => f.NetChange).Format("{0:N2}").HtmlAttributes(new { style = "text-align: right;" });
                columns.Command(command => command.Custom("ItemLedgerEntryCommand").Text(" ").IconClass("k-icon k-i-arrow-drill").Click("showDetails")).Width(52);
                columns.Bound(f => f.LastEntryDate).Format("{0:dd/MM/yyyy}");
            })
            .Pageable() // Enable paging
            .Sortable() // Enable sorting
            .Scrollable(scrollable => scrollable.Virtual(true))
            .HtmlAttributes(new { style = "height:430px;" })
            .DataSource(dataSource => dataSource //Configure the Grid data source.
            .Ajax() //Specify that Ajax binding is used.
            .PageSize(10)
            .Read(read => read.Action("Item_ReadData", "Home").Data("additionalData"))
            )
            )

How can I do this?

[Anton Mironov]

Dear Dario,

Thank you for the provided code snippet.

The Visible property of the command column gives the opportunity to conditionally hide the button based on a field from the model. It accepts a JavaScript function name. Here is an example:

columns.Command(c => c.Custom("GetPictureCommand").Text(" ").IconClass("k-icon k-i-image").Click("getImage").Visible("getBoolean")).Width(52);

And add the respective JavaScript function

function getBoolean(e) {
      return e.HasPicture;
}

Let me know if you need further assistance.

 

Regards,
Anton Mironov
Progress Telerik