How to display command buttons or icon based on some conditions?

[Manish]

I have designed one page where i am showing some actions using command. But i want to change the icons based on condition suppose based on status,

As mentioned in attached picture for OnHold the icons are displaying as edit, Cancel and OnHold but for approved we need to show only edit and cancel.

How we can achieve that? Also  ,the command actions is taking a square block instead of that i need to show only font awesome  icons like in second attached picture

Please help.

 

Thanks & Regards

Manish Tiwari     

[Manish]

Below is the code: -

 <script>
                                var dataSource1 =
                                    $(document).ready(function () {

                                    var element = $("#grid").kendoGrid({
                                        dataSource:  new kendo.data.DataSource({
                                    data:@Html.Raw(Json.Serialize(Model.RequestViewModel)),
                                            dataType: JSON,
                                            pageSize: 10
                                }),
                                        height: 500,
                                        sortable: true,
                                        pageable: true,
                                        reorderable: true,
                                        resizable: true,
                                        filterable: true,
                                        detailInit: detailInit,
                                        columns: [
                                            {
                                                field: "RequestId",
                                                title: "Request Id",
                                                width: "115px"
                                            },
                                            {
                                                field: "Priority",
                                                width:"100px"
                                            },
                                            {
                                                field: "RequestName",
                                                title: "Request Name",
                                                width: "150px"
                                            },
                                            {
                                                field: "RequestDate",
                                                title: "Request Date",
                                                width: "150px"
                                            },
                                            {
                                            field:"Department",
                                                title: "Dept",
                                                width:"110px"
                                            },
                                            {
                                                field: "Role",
                                                title:"Role",
                                                width: "100px"
                                            },
                                            {
                                                filed: "PositionFilled",
                                                title: "Position Filled",
                                                width:"120px"
                                            },
                                            {
                                                field:"RequestStatus",
                                                title: "Status",
                                                width: "120px"
                                            },
                                            {
                                                field: "RequestStage",
                                                title: "Stage",
                                                width: "120px",
                                            },
                                            {
                                                command: [
                                                    { name: "edit", text: "&nbsp", iconClass: "fa fa-pencil" }, { name: "cancel", text: "&nbsp", iconClass: "fa fa-times fa-fw" }, {
                                                        name: "hold", text: "&nbsp ", iconClass: "fa fa-hand-paper-o", click: function (e) {
                                                            var tr = $(e.target).closest("tr");
                                                            var data = this.dataItem(tr);
                                                            putOnHoldPopup(data.RequestId);
                                                        } }
                                                ], width: "250px"
                                            }
                                        ],

                                    });
                                    }).data("kendoGrid");

                            function detailInit(e) {
                                debugger;
                                var p = e.data.RequestId;
                                $("<div/>").appendTo(e.detailCell).kendoGrid({
                                    dataSource: new kendo.data.DataSource({ data:@Html.Raw(Json.Serialize(Model.RequestTimeline)), dataType: JSON }),
                                    serverPaging: true,
                                    serverSorting: true,
                                    pageSize: 10,

                                    filter: { field: "RequestId", operator: "eq", value: parseInt(p) },
                                    columns: [
                                        { field: "RecordedTime", width: "110px" },
                                        { field: "ByWhom", title: "By", width: "110px" },
                                        { field: "Message", title: "Message" },
                                        { field: "Comment", title: "Comment", width: "300px" }
                                    ]
                                });
                            }
        </script>

[Dimitar]

Hello Manish,

In order to display a Grid command button conditionally, just add the visible property for a command and specify the desired condition that will be used to display/hide the command:

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{
       name: "edit",
       visible: function(dataItem) {
         return dataItem.name === "Jane"
       }
    ]}
  ],
  editable: "popup",
  dataSource: [ { name: "Jane" }, { name: "Bill" } ]
});

You will notice that the function receives a the data item object for the row as an argument. In this way, you will have all the related model data in order to conditionally modify the button visibility.

Concerning the exact markup that will be used to display the command - by default a button is shown. However, if you need to customize the command HTML markup, then this could be achieved by utilizing the command template option as follows:

command: [{
  name: "settings",
  template: "<i class='fa fa-home k-grid-settings'></i>",
  click(e){
    kendo.alert("Settings clicked!")
  }
}]

Important to note when using the template option is that in order for the click handler to work successfully, the "k-grid-[command.name]" class has to be added to the respective element of the template.

I hope this resolves the issue. In case you have any additional questions, please do not hesitate to contact us.

Regards,
Dimitar
Progress Telerik

[Manish]

Hi Dimitar,

I have used the same as you have mentioned above but i think something is getting wrong. I have applied the condition and found that every time it is returning false and the icons are not visible.

                                                            return dataItem.RequestStatus === "onHold";
                                                        }}, { text: " | " }, { name: "cancel", text: "&nbsp", iconClass: "fa fa-times fa-fw" }, { text: " | " }, {
                                                        name: "hold", text: "&nbsp ", iconClass: "fa fa-hand-paper-o", click: function (e) {
                                                            var tr = $(e.target).closest("tr");
                                                            var data = this.dataItem(tr);
                                                            putOnHoldPopup(data.RequestId);
                                                        } }
                                                ], width: "250px"
                                            }
                                        ],

 

Please refer the screenshot as well.

In picture Capture_After for all request the icons are hidden.

 

Thanks & Regards

Manish Tiwari

 

[Dimitar]

Hello Manish,

The visibility issue is most likely related to the dataItem's RequestStatus property. Please make sure that it contains a string and that there are items available that have the "onHold" status.

Here is a simple Dojo example that demonstrates the command.visible option. With it, the command button in the second row is being correctly hidden:

• https://dojo.telerik.com/awetipiJ

In case the issue continues to persist, you could modify the above example and link it here, so that I can review it and locate the origins of the problem.

Regards,
Dimitar
Progress Telerik