Button in Grid triggering Modal Popup

[Duane]

I am using a KendoUI grid to display data on screen. Each row has a set of buttons that trigger various actions. One button triggers a modal popup asking the user to select a child item (generated via an ajax call) of the row before continuing on with the action. The first time the button is triggered, the select is correctly filled, however, on subsequent calls the select box is left blank as if the element doesn't exist. Any idea what I am doing wrong here:

 

 

    $(document).ready(function () {
      $('#formGrid').delegate('.exportButton', 'click', function () {
         var button = $(this);
         var formId = button.attr("data-form-id");
         var formImplementationId = button.attr("data-form-implementation-id");
         var formVersion = Number(button.attr("data-form-version"));

         $.ajax({
           url: AppSettings["BaseUrl"] + "/xxxx/GetVersions?formId=" + formId + "&formImplementationId=" + formImplementationId,
           dataType: 'json',
           success: function (data) {
             $.each(data, function (index) {
               var item = data[index];
               $("#exportVersion").append("<option value=\"" + item.Version + "\">Version: " + item.Version + " (" + item.EffectiveDate + ")</option>")
             });
           }
         });

         var kendoWindow = $("<div />").kendoWindow({
           title: "Export Form",
           resizable: false,
           modal: true
         });

         kendoWindow.data("kendoWindow")
           .content($("#select-export-version").html())
           .center().open();

         kendoWindow
           .find(".export-confirm")
           .click(function () {
             if ($(this).hasClass("export-confirm-yes")) {
               window.location = AppSettings["BaseUrl"] + "/xxxx/ExportForm?formId=" + formId + "&formImplementationId=" + formImplementationId + "&formVersion=" + $('#exportVersion').val()
             }

             kendoWindow.data("kendoWindow").close();
           })
           .end()
         });
      });

      $('#formGrid').kendoGrid({
        dataSource: {
          transport: {
            read: {
              url: '@Url.EncodedAction("GetForms", "xxxx")',
              dataType: "json",
              contentType: "application/json"
            }
          },
          schema: {
            model: {
              fields: {
                FormName: { type: "string" },
                ContractName: { type: "string" },
                EffectiveDate: { type: "date" },
                UserName: { type: "string" },
                IsDraft: { type: "string" },
                FormId: { type: "string" },
                FormImplementationId: { type: "string" },
                FormVersion: { type: "number" }
              }
            }
          },
          pageSize: 15,
          sort: [{ field: "FormName", dir: "asc" }]
        },
        sortable: true,
        pageable: true,
        columns: [
          {field: "FormName", title: "Form"},
          {field: "Version", title: "Version", width: 100},
          {field: "ContractName", title: "Contract", width: 150},
          {field: "EffectiveDate", title: "Last Modified", format: "{0:MM/dd/yyyy}"},
          {title: "User", field: "UserName"},
          {field: "Status", title: "Status", width: 120},
          {
            template: function (dataItem) {
              buttons = '<div class="buttonDiv">';
              buttons += '<button class="exportButton" title="Export Form" data-form-id="' + dataItem.FormId + '" data-form-implementation-id="' + dataItem.FormImplementationId + '" data-form-version="' + dataItem.Version + '"><span class="glyphicon glyphicon-open"></span></button>'
              buttons += '</div>';

              return buttons;
            },
          }
        ]
      });
    });

    <script id="select-export-version" type="text/x-kendo-template">
      <div id="export-file-modal" class="maintenance-modal">
        <p>
          <label for="exportVersion">Select the version of the form to export:</label><br />
          <select id="exportVersion"></select>
        </p>
        <div id="export-buttons" class="text-center same-width">
          <button class="export-confirm export-confirm-yes k-button k-default">Export</button>
          <button class="export-confirm export-confirm-no k-button k-primary">Cancel</button>
        </div>
      </div>
    </script>

[Boyan Dimitrov]

Hello,

What I noticed in the provided code is that a new Kendo UI Window widget is initialized on each button click. Eventually there will lots of Kendo UI Window widgets on the page after user interaction (let say the user clicked on the 5 of the rows and there will be 5 Kendo UI Window widgets on the page). My suggestion is to check whether there is an already Kendo UI Window widget initialized and change it content according to the data item. Please refer to the Grid / Custom command demo. 

Regards,
Boyan Dimitrov
Telerik by Progress