Modal Window with Grid

[Informed Sources]

Hi, 

I want a grid that has a button that opens a window that contains a grid that allows you to select a value for the parent grid

@(Html.ISGrid<Core.Data.Models.AttributeSourceSEModel>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Command(command => command.Custom("pick").Click("pickAttribute")).Width(50);

          columns.Bound(p => p.AttributeSourceID).Width(200);
          columns.Bound(p => p.Description).Width(200);
          columns.Bound(p => p.SourceDataColumnName).Width(200);
          columns.Bound(p => p.AttributeDefinitionID).Width(200);
          columns.Bound(p => p.AttributeDefinitionName).Width(200);
          columns.Bound(p => p.AttributeReportingGroupName).Width(200);
          columns.Bound(p => p.AttributeHeaderName).Width(200);
          columns.Bound(p => p.Name).Width(200);

          //columns.Bound(p => p.AttributeSourceDatabaseID).Width(200);
          columns.ForeignKey(p => p.AttributeSourceDatabaseID, (System.Collections.IEnumerable)ViewBag.AttributeSourceDatabase, "ID", "Name")
            .Title("Database").Width(150);

          columns.Bound(p => p.TableName).Width(200);
          columns.Bound(p => p.SurveyEntityIDColumnName).Width(200);
          columns.Bound(p => p.FilterColumnName).Width(200);
          columns.Bound(p => p.FilterColumnValue).Width(200);
          columns.Bound(p => p.Filter2ColumnName).Width(200);
          columns.Bound(p => p.Filter2ColumnValue).Width(200);

          columns.Bound(p => p.LastUpdatedDateColumnName).Width(200);
          columns.Bound(p => p.RecommendedBatchSize).Width(200);

          columns.Bound(p => p.VeracitySourceID).Width(200);
          columns.Bound(p => p.VerificationTypeID).Width(200);
          columns.Bound(p => p.VerificationTypeUnits).Width(200);
          columns.Bound(p => p.IsInUse).Width(200);
          columns.Bound(p => p.AttributeDataLogCount).Width(200);


          columns.Command(command => command.Destroy()).Width(172);
      })
      .ToolBar(toolbar =>
      {
          toolbar.Create();
          toolbar.Save();
          toolbar.Excel();
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
      .Pageable()
      .Groupable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Batch(true)
          .Events(events => events.Error("error_handler"))
          .Model(model =>
          {
              model.Id(p => p.AttributeSourceID);

              model.Field(p => p.AttributeDefinitionName).Editable(false);

          })
                .Create(update => update.Action("Create", "AttributeSourceSE"))
                .Update(update => update.Action("Update", "AttributeSourceSE"))
                .Destroy(update => update.Action("Destroy", "AttributeSourceSE"))
                .Read(read => read.Action("Read", "AttributeSourceSE", new { attributeSourceDatabaseID = @Request["AttributeSourceDatabaseID"] }))
    )

)

@(Html.Kendo().Window()
    .Name("AttDef")
    .Title("Attribute Definition")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Content(
        Html.ModalGrid<Core.Data.Models.AttributeDefinitionModel>()
        .Name("attgrid")
        .Events(events => events.Change("Grid_OnRowSelect"))
        .Columns(columns =>
        {
            columns.Bound(p => p.Name);
            columns.Bound(p => p.AttributeReportingGroupName);
            columns.Bound(p => p.AttributeHeaderName);
            columns.Bound(p => p.AttributeDefinitionID).Hidden(true);
        })
        .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Batch(true)
          .Events(events => events.Error("error_handler"))
          .Model(model =>
          {
              model.Id(p => p.AttributeDefinitionID);
          })
        .Read(read => read.Action("ReadNameOnly", "AttrDef", new { AttributeReportingGroupID = @Request["AttributeReportingGroupID"] }))
        )

        .ToHtmlString()
    )
    .Width(500)
    .Height(500)
    )



    <script type="text/javascript">

        function pickAttribute(e) {
        window.grid = $("#grid").data("kendoGrid");
        window.dataItem = window.grid.dataItem($(event.srcElement).closest("tr"));

        var wnd = $("#AttDef").kendoWindow({
        title: "Attribute Definition",
                actions: ["Minimize", "Maximize", "Close"],
                visible: false,
                modal: true,
                close: onClose
              }).data("kendoWindow");

        wnd.center();
        wnd.open();
        resizeGrid();
        }

        Grid_OnRowSelect = function (e) {
            alert('onChange');
        }

        function onClose()
        {
            alert('close');
        }

        function resizeGrid() {
            var gridElement = $("#attgrid");
            var dataArea = gridElement.find(".k-grid-content");
            var newHeight = gridElement.parent().innerHeight() - 2;
            var diff = gridElement.innerHeight() - dataArea.innerHeight();
            gridElement.height(newHeight);
            dataArea.height(newHeight - diff);
        }


    </script>

It is working up to the point where the window opens, but I cannot click on the child grid to return values to the parent grid.

The columns on the parent grid are read only. How do I update them in javascript?

 

 

[Informed Sources]

The 2 issues I am still having are;

- The client event on clicking the second grid is not firing. I found some documentation and tried a few different things, but it still wouldn't work.

- The javascript to copy values from the selected row of the child grid into the selected row of the parent grid

 

Bonus Question: is there a way to format a column to include text and a button. The current button column looks a bit ugly. 

[Dimo]

Hello Adam,

Here are some guidelines related to the provided information.

1) Currently the Kendo UI Window is initialized twice - once due to the existence of server wrapper widget declaration, and once due to the existence of your own client-side initialization. Please use only one of the two initialization techniques.

http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization
 
2) The code in the resizeGrid() function is obsolete and a simpler version should be used.

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#set-a-100-height-and-auto-resize
 
http://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages#customization

3) The Grid in the Window does not fire its change event, because it is not selectable.

http://demos.telerik.com/aspnet-mvc/grid/selection

4) A column can include any arbitrary content (e.g. text and a button) if you use a column template. In this case you will need to take care of attaching any required event handlers. The template content is already rendered in the Grid's dataBound event.

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration#clienttemplate

5) In order to update some data item values in the parent Grid, you can use the following API:

- obtain a data item by a table row
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

- obtain a data item by its ID via the DataSouce instance
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-dataSource
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-get

- update a data item (Kendo UI Model)
http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-set
http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-set

- sync the changes to the remote datasource via the DataSource instance
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sync
or via the Grid instance
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveChanges

Regards,
Dimo
Telerik

[Informed Sources]

I got it working using the following code;

The values are returning to the parent grid. Unfortunately, I cannot set them as read only, or it does not set.

Another issue I am having is that clicking the button on the parent grid doesn't automatically select the row with the button

1. How do I set columns that are read only? I also tried using  this.closeCell(); on the editcell event, it works but I can't tell which cell fired the event.

2. How do I make the button press select the row that the button is in?

 

Grid_OnRowSelect = function (e) {

            var childGrid = $("#attgrid").data("kendoGrid");
            var childSelectedItem = childGrid.dataItem(childGrid.select());

            var parentGrid = $("#grid").data("kendoGrid");
            var parentSelectedItem = parentGrid.dataItem(parentGrid.select());

            parentSelectedItem.set("AttributeDefinitionID", childSelectedItem.AttributeDefinitionID);
            parentSelectedItem.set("AttributeDefinitionName", childSelectedItem.Name);
            parentSelectedItem.set("AttributeHeaderName", childSelectedItem.AttributeHeaderName);
            parentSelectedItem.set("AttributeReportingGroupName", childSelectedItem.AttributeReportingGroupName);

            var wnd = $("#AttDef").data("kendoWindow");
            wnd.close();
        }

[Dimo]

Hello Adam,

The edit event provides a reference to the edit container, i.e. the table cell. Thus, you can find which column it belongs to.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

Buttons do not trigger row selection by design. You can select a row programmatically in the button's click handler, after getting the table row element via standard DOM traversal from the event target.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select

Regards,
Dimo
Telerik