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

    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.

  2. Answer
    Ivan Danchev
    Admin
    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: 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

    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