[Solved] Jquery Undefined for Telerik grid

[Manoj]

 am getting javascript error "JQuery undefined" for telerik grid implementation, I dont understand the reason for the same. I did include all the possible JQuery files but still getting the Javascript error.

Below is the sample code I have implemented.

<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script> 
 
@(Html.Telerik().Grid(Model.Employee) 
                                                    .HtmlAttributes(new { style = "width:100%;" }) 
                                                .Name("Employee") 
                                                .DataKeys(keys => 
                                                { 
                                                    keys.Add(m => Id); 
 
                                                }) 
 
                                                .Columns(columns => 
                                                { 
 
                                                    columns.Bound(p => p.Name).Title("Name") 
                                                        .HeaderHtmlAttributes(new { width = "110px", style = "text-align:center;font-weight:bold;height:auto" }) 
                                                    .HtmlAttributes(new { width = "110px", style = "text-align:left;height:auto" }); 
                                                    columns.Bound(p => p.ReportedStatus).ClientTemplate("<#= ReportedStatus(data) #>").Title("Reported") 
                                                         .HeaderHtmlAttributes(new { width = "130px", style = "text-align:center;font-weight:bold;height:auto" }) 
                                                    .HtmlAttributes(new { width = "130px", style = "text-align:center;height:auto" }); 
                                                    columns.Bound(p => p.status).Title("status").ClientTemplate("<#=status(data) #>") 
                                                        .HeaderHtmlAttributes(new { width = "130px", style = "text-align:center;font-weight:bold;height:auto" }) 
                                                    .HtmlAttributes(new { width = "130px", style = "text-align:center;height:auto" }); 
                                                    columns.Bound(p => p.Hrs).Title("Hrs") 
                                                        .HeaderHtmlAttributes(new { width = "150px", style = "text-align:center;font-weight:bold;height:auto" }) 
                                                    .HtmlAttributes(new { width = "150px", style = "text-align:center;height:auto" }); 
                                                    columns.Bound(l => l.Location).ClientTemplate("<#= Location(data) #>").Title("Location") 
                                                         .HeaderHtmlAttributes(new { width = "200px", style = "text-align:center;font-weight:bold;height:auto" }) 
                                                    .HtmlAttributes(new { width = "200px", style = "text-align:center;height:auto" }); 
                                                    columns.Bound(l => l.Role).ClientTemplate("<#= Role(data) #>").Title("Role") 
                                                        .HeaderHtmlAttributes(new { width = "150px", style = "text-align:center;font-weight:bold;height:auto" }) 
                                                    .HtmlAttributes(new { width = "150px", style = "text-align:center;height:auto" }); 
 
                                                }).Footer(false) 
                                                                          ) 
<script type="text/javascript" src="@Url.Content("~/Scripts/telerik.common.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/telerik.textbox.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/telerik.grid.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/telerik.draganddrop.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/telerik.window.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/telerik.grid.editing.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/telerik.upload.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/telerik.menu.js")"></script> 
 
@(Html.Telerik().ScriptRegistrar() 
                 .jQuery(false) 
                 .DefaultGroup(group => group 
                 .Add("telerik.examples.min.js") 
                 .Add("telerik.grid.js") 
                 .Compress(false) 
                 .Combined(true)) 
                 .OnDocumentReady( 
                 @<text> prettyPrint(); 
</text>) 
) 

Please let me know what wrong I am doing out here for this JQuery error.

[Pedro]

The Telerik javascript files are usually inside Script/{Version Number}/

for example:

<script src="@Url.Content("~/Scripts/2012.1.419/jquery-1.7.1.js")" type="text/javascript"></script>

Try to see if you're pointing your javascript to the right location.

[Manoj]

Path for jquery-1.7.1.js file is under "Scripts" folder only. I dont have any folder named "2012.1.419" in my application. However this grid works on other pages, but I dont know why its not working on this particular page.

I have other jquery and telerik files included my "template" file which are used for other pages. The list of files are given as below
<script src="@Url.Content("~/Scripts/jquery-1.4.1.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jquery-ui-1.8.5.custom.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/telerik.examples.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.mouse.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.dialog.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.draggable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.mouse.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.position.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.resizable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/Toggle.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.src.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.blockUI.js")" type="text/javascript"></script
    <link href="../../Content/Telerik/telerik.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Telerik/telerik.vista.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Telerik/telerik.vista.min.css" rel="stylesheet" type="text/css" />*@
    <link href="@Url.Content("~/Content/Telerik/telerik.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Telerik/telerik.vista.min.css")" rel="stylesheet" type="text/css" />

[Manoj]

This gird works on other pages of the application which uses a layout page. The layout page uses below .js files. Even if I use below files then too I am getting the same error.

I dont have any specific folder to hold jquery files. All the jquery files are placed directly under "Script" folder.

<script src="@Url.Content("~/Scripts/jquery-1.4.1.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jquery-ui-1.8.5.custom.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/telerik.examples.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.mouse.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.dialog.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.draggable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.mouse.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.position.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.resizable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/Toggle.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.src.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.blockUI.js")" type="text/javascript"></script
    <link href="../../Content/Telerik/telerik.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Telerik/telerik.vista.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Telerik/telerik.vista.min.css" rel="stylesheet" type="text/css" />*@
    <link href="@Url.Content("~/Content/Telerik/telerik.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Telerik/telerik.vista.min.css")" rel="stylesheet" type="text/css" />