This is a migrated thread and some comments may be shown as answers.

Button in Grid triggering Modal Popup

1 Answer 1020 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Duane
Top achievements
Rank 1
Duane asked on 21 Apr 2017, 01:00 PM

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>

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 25 Apr 2017, 07:48 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Duane
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or