Show a dialog through a column template

[DoomerDGR8]

Hi!

I have a grid setup like below:

<div id="SearchDetail">
    <div id="SearchResult" style="width:850px"></div>
</div>

<script>
    function getSearchResult() {
        $("#SearchResult").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: BASE_URL + "SomeApi/GetRequestList",
                        type: "post",
                        dataType: "json",
                        data: {
                            CardId: $("#ParkingCardId").val(),
                            StatusId: $("#StatusId").val(),
                            Status: $("#Status").val()
                        }
                    }
                },
                pageSize: 10,
                schema: {
                    data: "result",
                    total: "total"
                }
            },
            groupable: false,
            sortable: true,
            resizable: true,
            pageable: true,
            filterable: false,
            selectable: "single",
            dataBound: function(e) {
                for (var i = 0; i < this.columns.length; i++) {
                    if (i === 2) {
                        continue;
                    }

                    this.autoFitColumn(i);
                }

                setTimeout(function() {
                        $(".k-pager-wrap ul").css({ "margin-left": "0px" });
                        $(".k-pager-wrap ul li")
                            .css({ "margin-left": "0px", "padding-left": "0px", "list-style-type": "none" });
                    },
                    100);
            },
            columns: [ {
                    field: "ParkingCardId",
                    title: "Card Id",
                    template: '<a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=View">#=ParkingCardId#</a>'
                }, {
                    field: "Name",
                    title: "Full Name"
                }, {
                    field: "Status",
                    title: "Status"
                }, {
                    field: "IsExpired",
                    title: "Action",
                    template: '#if (IsExpired) {# <a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=Renew Card">Renew</a> #} else {# #}#'
                }, {
                    field: "StatusId",
                    title: "Action",
                    template: '#if (StatusId === 0) {# Show a dialog asking user Y/N. If User press Yes, call Api tp cancel request #} else {# #}#'
                }
            ]
        });
    }
</script>

 

As per the comment on the second column titles Action, I need to show a Dialog with Yes/No option. If user say Yes, then I need to call the request cancel Api and if that returns success, reload the grid.

I need help in this template or a JS function.

[Ivan Danchev]

Hi Hassan,

Here's an example showing how a Dialog can be opened from a Grid's column: https://dojo.telerik.com/EVOpEFIh/3

A button is displayed for the records that have StatusId === 0. Clicking the button opens a Dialog. It has a handler attached to its "Ok" action:

action: function(e){
  // ...put ajax request here...
},

In this handler you can add an AJAX request to the respective API method. In the AJAX request's "success" callback you can refresh the Grid like this:

$("#SearchResult").data("kendoGrid").dataSource.read();

Regards,
Ivan Danchev
Progress Telerik