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

[Solved] Ajax binding not working, client side events not firing

3 Answers 207 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 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 id="main">

@RenderBody()

</div>

<div id="footer">

</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

Accepted