View Parsing the wrong grid row template

2 posts, 0 answers
  1. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 14 Aug 2014 Link to this post

    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
                    }]
        });
    },


  2. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 15 Aug 2014 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
Back to Top