-1

I'm using Kendo UI version v2012.1.322 with Jquery 1.9.0 and the Kendo Grid trows a java script error trying to render the templates see: http://jsfiddle.net/rodneyhickman/bLSbQ/1/ Switch the jQuery frame work from 1.8.3 to 1.9.0 and click run to see the script error.

The error I get is: Uncaught TypeError: Object [object Object] has no method 'replace'

Any suggestions?

My mark-up

<div class="assignment-portal-gird-module">
<div class="row-templates">
    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr class="assignment-table-row1"> 
            <td class="assignment-table-points-column"><b>${ Points }</b></td>
            <td><b>${ ContactName }</b></td>
            <td><b>${ Title }</b></td>    
            <td><b>${ ProviderName }</b></td>
            <td><b>${ Phone }</b></td>
            <td><b>${ TimeZone }</b></td>
        </tr>
        <tr class="assignment-table-row2">
            <td></td>
            <td colspan="2">
                <span class="assignment-portal-note-label" >Latest Note</span><br/>
                <table  class="assignment-portal-note-table" >
                    <tr>
                        <td>${ LastNoteDate }</td> <td>${ LastNote }</td>
                    </tr>
                </table>
            </td>
            <td colspan="3">
                <span class="assignment-portal-note-label" >Exchange Level</span><br/>
                <b>Eval:</b> ${ HasEval } Touches: ${ Touches } Log-ins: ${ Sessions } ${ LastSessionDate }
            </td>
        </tr>
    </script>
    <script id="altRowTemplate" type="text/x-kendo-tmpl">
        <tr class="assignment-table-row1-alt"> 
         <td  class="assignment-table-points-column"><b>${ Points }</b></td>
            <td><b>${ ContactName }</b></td>
            <td><b>${ Title }</b></td>    
            <td><b>${ ProviderName }</b></td>
            <td><b>${ Phone }</b></td>
            <td><b>${ TimeZone }</b></td>
        </tr>
        <tr class="assignment-table-row2-alt">
            <td></td>
            <td colspan="2">
                <span class="assignment-portal-note-label" >Latest Note</span>
               <table class="assignment-portal-note-table" >
                    <tr>
                        <td>${ LastNoteDate }</td> <td>${ LastNote }</td>
                    </tr>
                </table>
            </td>
            <td colspan="3">
                <span class="assignment-portal-note-label" >Exchange Level</span><br/>
                <b>Eval:</b> ${ HasEval } Touches: ${ Touches } Log-ins: ${ Sessions } ${ LastSessionDate }
            </td>
        </tr>
    </script>
</div>
<div ID="gridAssignments"></div>

My script:

jQuery('#gridAssignments').kendoGrid({
    pageable: true,
    scrollable: false,
    rowTemplate: kendo.template($('#rowTemplate').html()),
    altRowTemplate: kendo.template($('#altRowTemplate').html()),
    sortable: true,
    dataSource: {
        data: [{
            Points: 888,
            KlasID: 14926,
            ContactName: 'John Johnson',
            Email: "test@test.com",
            Title: 'Chief Infomration Officer',
            ProviderName: 'West Coast Medical Center',
            ProviderId: 1143,
            Phone: '801-555-1234',
            TimeZone: '(E) 8:32 AM',
            LastNoteDate: '1/25/2013',
            LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st.',
            HasEval: 'Yes',
            Touches: 2,
            Sessions: '1',
            LastSessionDate: '1/23/2013  5:20 PM'
        }, {
            Points: 5,
            KlasID: 14926,
            ContactName: 'Jane Johnson',
            Email: "test@test.com",
            Title: 'Chief Infomration Officer',
            ProviderName: 'East Coast Medical Center',
            ProviderId: 1143,
            Phone: '801-555-4321',
            TimeZone: '(E) 8:32 AM',
            LastNoteDate: '1/15/2013',
            LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah ',
            HasEval: 'No',
            Touches: 3,
            Sessions: '1',
            LastSessionDate: '1/23/2013 8:45 AM'
        }, {
            Points: 18,
            KlasID: 14926,
            ContactName: 'John Doe',
            Email: "test@test.com",
            Title: 'Chief Infomration Officer',
            ProviderName: 'Florida Medical Center',
            ProviderId: 1143,
            Phone: '801-333-4321',
            TimeZone: '(E) 8:32 AM',
            LastNoteDate: '1/1/2013',
            LastNote: 'Sent Email - Requested to setup a call for Blah blah blah blah blah',
            HasEval: 'Yes',
            Touches: 4,
            Sessions: '1',
            LastSessionDate: '1/25/2013 12:04 PM'
        }],
        pageSize: 10
    },
    columns: [{
        width: 45,
        title: "P",
        field: "Points"
    }, {

        title: "Contact",
        field: "ProviderName"
    }, {

        title: "Title",
        field: "Title"
    }, {
        width: 300,
        title: "Provider",
        field: "ProviderName"
    }, {
        width: 120,
        title: "Phone",
        field: "Phone"
    }, {
        title: "Last Note",
        field: "LastNoteDate"
    }, {
        title: "Touches",
        field: "Touches"
    }, {
        width: 120,
        title: "Time Zone",
        field: "TimeZone"
    }]

});
Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
Rodney Hickman
  • 3,133
  • 11
  • 53
  • 83

1 Answers1

1

KendoUI v2012.1.322 officially supports only jQuery 1.7.1 and you should either downgrade jQuery to that version or upgrade KendoUI to the last version.

Vladimir Iliev
  • 1,871
  • 16
  • 26