Enable Custom Command by data

2 posts, 1 answers
  1. Dario
    Dario avatar
    40 posts
    Member since:
    Jun 2018

    Posted 28 Apr 2020 Link to this post

    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?

  2. Answer
    Anton Mironov
    Admin
    Anton Mironov avatar
    167 posts

    Posted 30 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top