View Parsing the wrong grid row template

[David]

I'm running into a situation where a grid is getting it's template parsed during the rendering of another entirely different views grid.

Here's the rundown:

I have a datasource that is bound to two different grids (each on their own view).

That datasource get's read with some options that then return which view to render based on the results passed back from the server.

Initial rendering result A : Grid "List" is fine...
Initial rendering result B : Grid "Details" is fine as well...
now if I go back and search where the result will be scenario "A" again... the view still tries to parse the row templates for grid B. I don't know what I'm doing wrong. I'm positive I only have one instance of each Grid (they are unique IDs).

Here's my code to show the relevant parts of this:

My Two views that contain grids... (Note these templates referenced here only contain one div that is a container for a Grid instantiated in my model)...

I can attach my row templates in separate code to try and keep this from getting crazy messy.

var checkinSearchResultsListView = new kendo.View("#checkin-search-results-list-view-template",{
model: checkinSearchModel, init: checkinSearchModel.initSearchResultsListGrid, show: checkinSearchModel.onShowListGrid
});

var checkinSearchResultsDetailView = new kendo.View("#checkin-search-results-detail-view-template",{
model: checkinSearchModel, init: checkinSearchModel.initSearchResultsDetailGrid, show: checkinSearchModel.onShowDetailGrid
});

Here's my Datasource... Where I parse the response to determine the view, because I don't know which path the user will take upon their initial search.

getSearchResults : new kendo.data.DataSource({
            transport: {
                read:  {
                    url: function(options) {
                        return "/4DACTION/WEB_CheckinSearch/" + JSON.stringify(options);
                    },
                    type: 'POST',
                    dataType: "json",
                    complete: function(jqXHR) {
                        var response = dataGetComplete(jqXHR);
                        console.log(response.success);
                        if (response.success.resultsType == "0"){
                            // No results
                            checkinSearchModel.set('noResultsVisible', true);
                        }  else if (response.success.resultsType == "1") {
                            console.log('-----showing detail view-----');
                            // List of family members results
                            mainLayout.showIn("#checkin-content", checkinSearchResultsDetailView);
                        } else if (response.success.resultsType == "2") {
                            console.log('-----showing list view-----');
                            // List of families results ; multiple results
                            mainLayout.showIn("#checkin-content", checkinSearchResultsListView);
                        }
                    }
                }
            },
            schema: {
              data: function(response) {
                console.log(response.success);
                if(response.success.resultsType == "1"){
                    return response.success.resultsDetails;
                } else {
                    return response.success.resultsList;
                }
              },
              total: function (response) { return response.success.total; }
            },
            pageSize: 10
    }),

Here's Grid A's Init Code...

initSearchResultsListGrid : function(e){
    e.preventDefault();
    $("#search-results-list-grid").kendoGrid({
        dataSource: checkinSearchModel.get('getSearchResults'),
        rowTemplate: $('#checkin-search-results-list-row-template').html(),
        altRowTemplate: $('#checkin-search-results-list-row-alt-template').html(),
        selectable: "row",
        sortable: true,
        autoBind: true,
        pageable: {
          pageSizes: true,
          pageSizes: [10,25,50,100,500]
        },
        columns: [
                {
                    title: 'Name',
                    field: "lastName",
                    sortable: true
                }, {
                    title: 'Address',
                    hidden: false
                }]
    });
},

Here's Grid B's init code

initSearchResultsDetailGrid : function(e){

    e.preventDefault();

    $("#search-results-detail-grid").kendoGrid({

        dataSource: checkinSearchModel.get('getSearchResults'),

        rowTemplate: $('#checkin-search-results-detail-row-template').html(),

        altRowTemplate: $('#checkin-search-results-detail-row-template').html(),

        selectable: "row",

        pageable: {

          pageSizes: true,

          pageSizes: [10,25,50,100,500]

        },

        columns: [

                {

                    title: 'Name',

                    sortable: true

                }, {

                    title: 'Checking into'

                }, {

                    title: 'Currently in'

                }, {

                    title: ' ',

                    width: 85

                }, {

                    title: ' ',

                    width: 85

                }, {

                    title: ' ',

                    width: 85

                }]

    });

},




[David]

This is Solved...

I decided to separate out my initial server request into two separate dataSources by using .data() to add the responses to them.

This seemed to solve all my problems with the two grids rendering.