This is a migrated thread and some comments may be shown as answers.

Ajax binding not working, client side events not firing

3 Answers 155 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Chris
Top achievements
Rank 1
Chris asked on 21 Mar 2012, 11:19 PM
I have installed the latest telerik MVC controls via nuget.  
When I navigate to the view, the client side events never fire and
the select action on the controller is never called.  I can't figure out what I'm doing wrong.



_layout.cshtml
@using Telerik.Web.Mvc.UI
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
     
     
        <link href="@Url.Content("~/Content/telerik.common.min.css")" media="all" rel="stylesheet" type="text/css"/>
        <link href="@Url.Content("~/Content/telerik.rtl.min.css")" media="all" rel="stylesheet" type="text/css"/>
        <link href="@Url.Content("~/Content/telerik.windows7.min.css")" media="all" rel="stylesheet" type="text/css"/> 
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" media="all" rel="stylesheet" type="text/css"/>
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.dialog.css")" media="all" rel="stylesheet" type="text/css"/>
     
     
 
</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
    @{
                Html.Telerik().ScriptRegistrar()
                    .DefaultGroup(group => group.Add("telerik.grid.min.js").Add("telerik.common.min.js").Add("jquery.validate.min.js").Add("telerik.grid.editing.min")
                    .Add("telerik.grid.filtering.min.js").Add("jquery-1.7.min.js").Add("telerik.calendar.min.js").Add("telerik.datepicker.min.js")
                    .Add("telerik.textbox.min.js").Add("telerik.draganddrop.min.js").Add("telerik.grid.grouping.min.js").Add("telerik.grid.resizing.min.js")
                    .Add("telerik.grid.reordering.min.js").Add("telerik.window.min.js").Compress(true));
            }
</body>
</html>


Controller:
namespace TestTelerik.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {           
            return View();
        }
 
        private List<Dummy> GetDummies()
        {
            var du = new List<Dummy> { new Dummy { FirstName = "tom", LastName = "Jackson", ID = 1 }, new Dummy { FirstName = "Jim", LastName = "Smith", ID = 2 } };
            return du;
        }
 
        [GridAction]
        public ActionResult SelectDummies()
        {
            var du = GetDummies();      
            return View(new GridModel { Data = du, Total = du.Count });
        }
 
        [AcceptVerbs(HttpVerbs.Post)]
        [GridAction]
        public ActionResult UpdateAjaxRoom(int id)
        {
            var du = GetDummies();
            return View(new GridModel { Data = du, Total = du.Count });
        }
 
        public ActionResult TestGrid()
        {
            return View();
        }
 
        public ActionResult About()
        {
            return View();
        }
    }

View:
@using Telerik.Web.Mvc.UI
@using TestTelerik.Classes
@{
    ViewBag.Title = "TestGrid";
}
 
<script type="text/javascript">
 
    function Grid_onLoad(e) {
        alert("onLoad");
    }
     
</script>          
 
 
<div>
    @(Html.Telerik().Grid<Dummy>()
                        .Name("Grid")
                        .DataKeys(keys => keys
                            .Add(c => c.ID)                           
                            )
                        .ClientEvents(events =>
                        {
                            events.OnLoad("Grid_onLoad");                           
                        })
                        .DataBinding(dataBinding =>
                            dataBinding.Ajax()
                                    .Select("SelectDummies", "Home")                                   
                        )
                        .Columns(columns =>
                        {
                            columns.Bound(r => r.FirstName);
                            columns.Bound(r => r.LastName);                           
                        })
                        .Editable(editing => editing.Mode(GridEditMode.InLine))
                        .Pageable()
                        .Scrollable()
                        .Sortable()                        
                )           
</div>




3 Answers, 1 is accepted

Sort by
0
Accepted
Dadv
Top achievements
Rank 1
answered on 22 Mar 2012, 02:34 PM
Try to add in the head : 

    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

and 

Html.Telerik().ScriptRegistrar()
 .jQuery(false)...  before the </body>


and tell us if the behavior still there ?
0
Chris
Top achievements
Rank 1
answered on 22 Mar 2012, 03:40 PM
That worked.  Thank you.

0
Dadv
Top achievements
Rank 1
answered on 22 Mar 2012, 04:25 PM
Edit : Ok :)
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Dadv
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Share this question
or