MVVM Grid in a Dialog

[Tobe]

I am attempting to use a MVVM grid in a div that is marked as role="dialog" and has the aria-hidden set to true.  The div is tied to a button using the data-target attribute on a button.  The basic setup of the MVC Razor page is that button is in one div block and the grid is in another div block.

<div class="...." id="view">
  <div class="row>
     <div class="col-md-3">
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myGridDiv" data-bind="click: onMyButtonPressed">View</button>
     </div>
      ......
  </div>
</div>

<div class="modal fade" id="myGridDiv" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" data-role="content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">View</h4>
            </div>
            <div class="modal-body">
                <div id="myGrid"
                     data-role="grid"
                     data-columns='[
                        { field: "Col1", title: "Col 1", width: "15%" },
                        { field: "Col2", title: "Col 2", width: "20%"},
                        { field: "Col3", title: "Col 3", width: "20%"},
                        { field: "Col4", title: "Col 4", width: "15%"},
                        { field: "Col5", title: "Col 5", width: "15%"},
                        { field: "Col6", title: "Col 6", width: "15%" } ]'
                     data-bind="source: myGridDataSource, visible: true">
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    var myGridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        async: false,
                        url: '/api/GridData/GetData?id=1',
                        dataType: "json"
                    },
                },
                serverPaging: true,
                pageSize: 10,
                filter: { field: "Id", operator: "eq", value: 1 },
                schema: {
                    model: { id: "Id" },
                    total: function(data) {
                        return data.length;
                    }
                },
                error: function(result) {
                    alert(result);
                }
            });


            var myModel = kendo.observable({
                isVisible: false,
                isEnabled: false,
                dataSource: myGridDataSource,
                onViewHistoryButtonPressed: function (e) {
                    var grid = $('#myGrid').data("kendoGrid");
                    if (null != grid) {
                        grid.dataSource.read();
                        grid.refresh();
                    } else {
                        console.log("failed to find grid");
                    }
                 }
            });
            kendo.bind($("#view"), myModel);
}


So the probably I am running into is that the above does not seem to populate the grid with any data.  When I click the button I see it hit my click method and the dialog does display, but there is not grid data being displayed.  The grid does not even attempt to hit my WebApi controller.

I am not sure what I am doing wrong on this since I have been able to use this same grid logic on other pages without issue.  The only difference here is that the grid is being displayed in a dialog and must be refreshed each time the dialog is loaded.

[Tobe]

Since I have received no responses to my question I have to assume it is either unclear, no one has ever attempted to do this, or this type of usage is unsupported.  I will look at a different toolkit to see if I can find one that will support the functionality that I need.

[Alexander Valchev]

Hello Tobe,

First of all let me apologize for the late reply.
You are right, the scenario you described is a bit unclear. My assumption is that you are bootstrap dialog and the modal dialog mark-up is not child of the #view element. Since you are calling kendo.bind for the #view element the binding process will not evaluate the data attributes of elements that are not children of this container.

kendo.bind($("#view"), myModel); //will bind only elements located inside the #view container

Please make sure that the Grid element is child of the bounded container at the time when kendo.bind is called.

I hope the information will help. In case I misunderstood your scenario please provide a small but runnable test page that demonstrates it so I can examine it and advice you accordingly.

Regards,
Alexander Valchev
Telerik

 

 

[Tobe]

Thank you for the reply.  I did move the grid inside of the #view element, but I am still having problems with the

onViewHistoryButtonPressed: function (e) {
                    var grid = $('#myGrid').data("kendoGrid");
                    if (null != grid) {
                        grid.dataSource.read();
                        grid.refresh();
                    } else {
                        console.log("failed to find grid");
                    }
                 }

Code working.  This block of code still fails to retrieve the kendoGrid from the #myGrid element.  When I run it under chrome debugger I see that grid is undefined.  I guess I will need to work up an example that has the problem and share that working example with you.

[Alexander Valchev]

Hello Tobe,

Yes I will appreciate if you could provide a small example. Most probably you are hitting a timing issue - e.g. the onViewHistoryButtonPressed function is executed before binding process is finished but without a runnable example I cannot be sure what exactly is going wrong. Please provide such sample and I will check it right away.

Regards,
Alexander Valchev
Telerik