Telerik MVC Extension – Grid Loaded within Tabstrip doesn’t support clientEvents

I am facing serious problem while trying to work in clientevents provided with asp.net mvc telerik grid. Here’s the two different scenarios: When I am putting the following script in a view or partial view it works fine;

   <%= Html.Telerik().Grid<Plan>()
            .Name("Grid")
            .DataKeys(keys => keys.Add(p => p.StaffId))
            .ToolBar(commands => { commands.SubmitChanges();
                                     commands.Position(GridToolBarPosition.Bottom);
            }).PrefixUrlParameters(false)

            .DataBinding(dataBinding =>
                dataBinding.Ajax()
                        .Select("_SelectBatchEmployees", "Employee")
                    .Update("_SaveBatchEmployees", "Employee")
            )
            .Columns(columns =>
            {
        开发者_如何转开发        columns.Bound(p => p.FullName).Width(320).ReadOnly(true);
                columns.Bound(p => p.Title).Width(220).ReadOnly(true);
                columns.Bound(p => p.PerformanceRating).Title("Perf. Rating").Format("{0:n}").Width(80);
                columns.Bound(p => p.RecommendedIncreaseAmountFrom).Width(80);

            })
            .ClientEvents(events =>
                    events.OnDataBinding("Grid_onDataBinding").OnError("Grid_onError").OnEdit("onEdit").OnDataBound("onDataBound"))
            .Editable(editing => editing.Mode(GridEditMode.InCell))
            .Pageable(page => page.PageSize(40))
            .Scrollable()
            .Sortable()
            .Footer(true)

            %>


     <script type="text/javascript">
         function Grid_onError(args) {
             if (args.textStatus == "modelstateerror" && args.modelState) {
                 var message = "Errors:\n";
                 $.each(args.modelState, function (key, value) {
                     if ('errors' in value) {
                         $.each(value.errors, function () {
                             message += this + "\n";
                         });
                     }
                 });
                 args.preventDefault();
                 alert(message);
             }
         }
         function onDataBound(e) {
             //alert(e.dataItem);
         }

         function onEdit(e) {
             var dataItem = e.dataItem;
             var mode = e.mode;
             var form = e.form;
             var priceTextBox = $(form).find('#Grade');
             dataItem.RecommendedIncreaseAmountFrom = 10 * 5;

             e.preventDefault();


         }

         function Grid_onDataBinding(e) {
             var grid = $(this).data('tGrid');
             if (grid.hasChanges()) {
                 if (!confirm('You are going to lose any unsaved changes. Are you sure?')) {
                     e.preventDefault();
                 }
             }
         }

        </script>

But when I partially load view thru tabstrip on demand loading it don’t works. And when I removed the clientevents part it started working?? I don’t know what is the reason but I need to work, please help me and here’s my code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Edit.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
        Index
    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%=
                Html.Telerik().TabStrip()
                    .Name("planingTabs").HtmlAttributes(new {style = "overfloat:auto"})
                    .Items(parent => parent.Add() //.HtmlAttributes(new {style = "overfloat:auto"})
                                         .Text("Test")
                                         .LoadContentFrom("PlanGrid", "Employee").Selected(true))

            %>

    </asp:Content>

Below is controller code:

public ActionResult Index()
            {
                return View();
            }

            public ActionResult PlanGrid()
            {
                return PartialView();
            }

            [GridAction]
            public ActionResult _SelectBatchEmployees()
            {
                            return View(new GridModel { Data = _employeeRepository.GetAll()});
            }
            [AcceptVerbs(HttpVerbs.Post)]
            [CultureAwareAction]
            [GridAction]
            public ActionResult _SaveBatchEmployees([Bind(Prefix =
                "inserted")]IEnumerable<Plan> insertedProducts,
                [Bind(Prefix = "updated")]IEnumerable<Plan> updatedProducts,
                [Bind(Prefix = "deleted")]IEnumerable<Plan> deletedProducts)
            {

                //if (insertedProducts != null)
                //{
                //    foreach (var product in insertedProducts)
                //    {
                //        SessionProductRepository.Insert(product);
                //    }
                //}
                if (updatedProducts != null)
                {
                    foreach (var employee in updatedProducts)
                    {
                        var target = _employeeRepository.One(p => p.StaffId == employee.StaffId);
                        if (target != null)
                        {
                            //target.ProductName = product.ProductName;
                            //target.UnitPrice = product.UnitPrice;
                            //target.UnitsInStock = product.UnitsInStock;
                            //target.LastSupply = product.LastSupply;
                            //target.Discontinued = product.Discontinued;


                            _employeeRespository.Save();
                        }
                    }
                }
                //if (deletedProducts != null)
                //{
                //    foreach (var product in deletedProducts)
                //    {
                //        SessionProductRepository.Delete(product);
                //    }
                //}
                return View(new GridModel { Data = _employeeRespository.GetAll() });
            }

This is because the JavaScript files of the Grid are not loaded. The troubleshooting help topic explains this. The solution is to manually register the JavaScript files. There is a working project showing how to do this here.