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

5 posts, 0 answers
  1. Manish
    Manish avatar
    5 posts
    Member since:
    Aug 2018

    Posted 03 Sep Link to this post

    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     

  2. Manish
    Manish avatar
    5 posts
    Member since:
    Aug 2018

    Posted 03 Sep in reply to Manish Link to this post

    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>

  3. Dimitar
    Admin
    Dimitar avatar
    490 posts

    Posted 05 Sep Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Manish
    Manish avatar
    5 posts
    Member since:
    Aug 2018

    Posted 05 Sep in reply to Dimitar Link to this post

    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

     

  5. Dimitar
    Admin
    Dimitar avatar
    490 posts

    Posted 05 Sep Link to this post

    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:


    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top