Modal Window with Grid

5 posts, 0 answers
  1. Adam
    Adam avatar
    17 posts
    Member since:
    Jan 2009

    Posted 09 Mar Link to this post

    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?

     

     

  2. Adam
    Adam avatar
    17 posts
    Member since:
    Jan 2009

    Posted 10 Mar Link to this post

    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. 

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 11 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Adam
    Adam avatar
    17 posts
    Member since:
    Jan 2009

    Posted 14 Mar in reply to Dimo Link to this post

    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();
            }

  6. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 16 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready