Trouble with Grid in Partial View using JS .load() method

[Russ]

Context: MVC 4 in VS 2102 with Update 3.  Kendo Version: 2013.1.319

I'm developing a Query Wizard web-page. The Index method of the "WorkOrder" controller generates the initial page with the search Criteria (partial view) showing standard filter parameters and a Search button. The search button activates JS which then uses the parameters in the Criteria to download a QueryInfo object (using getJSON). This object represents a stored query in our database. The business layer caches this QueryInfo object in the Session cache. Then, the JS loads the Kendo Grid by loading a partial view into an empty div element (using .load()).

Here is the .cshtml for the Grid:

@model AssetPoint.TabWare.Central.Query.QueryInfo

@(Html.Kendo().Grid<System.Data.DataRowView>()
    .Name("QwGrid")
    .HtmlAttributes(new { style = "height:430px;" })
    .Pageable(pager => pager.Messages(messages => messages.Empty("No data")))
    .Sortable()
    .Scrollable()
    .Filterable()
    .Columns(columns =>
    {
        foreach (AssetPoint.TabWare.Central.Query.IQwInquiryColumn column in Model.ColumnsUsed)
        {
            var gridCol = columns.Bound(column.Name)
                .Title(column.LabelText)
                .Width(InquiryColumn.ComputeWidth(column));
            if (InquiryColumn.HasFormat(column))
                gridCol.Format(InquiryColumn.GetFormat(column));
        }
    })
    .Resizable(b => b.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read
            // Set the action method which will return the data in JSON format
            .Action("GetResultsData", "WorkOrder", new { area = "QueryWizard" }) 
            // Specify the JavaScript function which will return the parameter data
            .Data("getParameters") 
        )
        .ServerOperation(true)
    )
)

As you can see, from the dataSource, we have a GetResultsData method which returns the resulting DataTable as a Json object. My plan was to the call the 'refresh()' method on the kendoGrid object's dataSource in the load success function.

My first problem was the when I accessed the 'QwGrid' element after the load, it was not a kendoGrid object, so I tried calling the kendoGrid() method on the element. This does transform the <div>  element into a kendoGrid object

Here is pertinent JS which is located in the very last element before the </body> element, in a
<script type="text/javascript"> $(document).ready(function () {}); </script> block :

function fillGrid()
{
    // get grid definition for currently selected query
    $('#QwResults').load('@Url.Action("Grid","WorkOrder", new { area = "QueryWizard" } )', 
     function (response, status, xhr)
     {
        if (status == "error")
        {
              alert("An error occurred while loading the Grid control.");
        }
        else
        {
            alert("A Grid definition was returned.");

            // bind data to grid
            var grid = $('#QwGrid').kendoGrid();
    
            if (grid != undefined)
            {
                grid.dataSource.fetch();
            }
        }
    });

    window.Parameters = {
        WorkOrder: $("#WorkOrder").val(),
        Description: $("#Description").val(),
        Equipment: $("#Equipment").val(),
        InquiryName: queryInfo.InquiryName,
        Query: queryInfo.Name,
        Criteria: {}
    };

    if (queryInfo.AskAtExecution)
    {
        //    Walk down the inputs in the window, grabbing their names
        //    and values to provide as criteria.  
        $('#window input[data-QW-field]').filter(function () {
            var x = $(this);
            window.Parameters.Criteria[x.attr("data-QW-field")] = x.val().toString();
        });
    }
}

function getParameters(data)
{
     return window.Parameters;
}

Console Errors (in Chrome):
1. Uncaught ReferenceError: getParameters is not defined
2. Uncaught TypeError: Cannot call method 'fetch' of undefined WorkOrder:261

Questions:
1. Why is the getParameters method that I am providing not found?

2. Why is the datasource undefined in the kendoGrid object?

3. Is there a better way to do this? Note: Each query has it's own set of columns and the results are delivered in a DataTable.

Thanks,
Russ

[Atanas Korchev]

Hello Russell,

 The provided code looks OK and we are not sure why it didn't work as expected. Could you please open a formal support ticket and attach a runnable subset of your project? We would like to run it locally in order to troubleshoot. Once we reproduce the issue at our side we would get back with a solution.

Looking forward to your reply!

Regards,
Atanas Korchev
Telerik