Show a dialog through a column template

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

    Posted 03 Jul 2020 Link to this post


    I have a grid setup like below:

    <div id="SearchDetail">
        <div id="SearchResult" style="width:850px"></div>
        function getSearchResult() {
                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) {
                    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" });
                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 {# #}#'


    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.

  2. Answer
    Ivan Danchev
    Ivan Danchev avatar
    2153 posts

    Posted 07 Jul 2020 Link to this post

    Hi Hassan,

    Here's an example showing how a Dialog can be opened from a Grid's column:

    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:


    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