Combining actions in a single column's template

2 posts, 1 answers
  1. Hassan
    Hassan avatar
    158 posts
    Member since:
    Aug 2010

    Posted 07 Jul 2020 Link to this post

    I have this grid:

    01.<div id="SearchDetail">
    02.    <div id="SearchResult" style="width:850px"></div>
    03.</div>
    04.  
    05.<script>
    06.    function getSearchResult() {
    07.        $("#SearchResult").kendoGrid({
    08.            dataSource: {
    09.                transport: {
    10.                    read: {
    11.                        url: BASE_URL + "SomeApi/GetRequestList",
    12.                        type: "post",
    13.                        dataType: "json",
    14.                        data: {                       
    15.                            CardId: $("#ParkingCardId").val(),
    16.                            StatusId: $("#StatusId").val(),
    17.                            Status: $("#Status").val()
    18.                        }
    19.                    }
    20.                },
    21.                pageSize: 10,
    22.                schema: {
    23.                    data: "result",
    24.                    total: "total"
    25.                }
    26.            },
    27.            groupable: false,
    28.            sortable: true,
    29.            resizable: true,
    30.            pageable: true,
    31.            filterable: false,
    32.            selectable: "single",
    33.            dataBound: function(e) {
    34.                for (var i = 0; i < this.columns.length; i++) {
    35.                    if (i === 2) {
    36.                        continue;
    37.                    }
    38.  
    39.                    this.autoFitColumn(i);
    40.                }
    41.  
    42.                setTimeout(function() {
    43.                        $(".k-pager-wrap ul").css({ "margin-left": "0px" });
    44.                        $(".k-pager-wrap ul li")
    45.                            .css({ "margin-left": "0px", "padding-left": "0px", "list-style-type": "none" });
    46.                    },
    47.                    100);
    48.            },
    49.            columns: [ {
    50.                    field: "ParkingCardId",
    51.                    title: "Card Id",
    52.                    template: '<a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=View">#=ParkingCardId#</a>'
    53.                }, {
    54.                    field: "Name",
    55.                    title: "Full Name"
    56.                }, {
    57.                    field: "Status",
    58.                    title: "Status"
    59.                }, {
    60.                    field: "IsExpired",
    61.                    title: "Action",
    62.                    template: '#if (IsExpired) {# <a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=Renew Card">Renew</a> #} else {# #}#'
    63.                }, {
    64.                    field: "StatusId",
    65.                    title: "Action",
    66.                    template: '#if (StatusId === 0) {# <input type="button" class="k-button" value="Cancel" onclick="openDialog(#=ParkingCardId#)" #} else {# #}#'
    67.                }
    68.            ]
    69.        });
    70.    }
    71.</script>

     

    How do I get a single Action column with the two conditional actions? The button can be replaced with link.

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 09 Jul 2020 Link to this post

    Hello Hassan,

    You can use a single column and add both "if" statements to its template: https://dojo.telerik.com/ENepuqon/2

    Regards,
    Ivan Danchev
    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