Kendo UI Grid Events in Partial view using @Ajax.ActionLink

3 posts, 0 answers
  1. Halina
    Halina avatar
    2 posts
    Member since:
    Sep 2012

    Posted 09 Aug 2013 Link to this post

    I am having the following issue when I’m using Kendo UI Grid in partial view loaded by Ajax.ActionLink.
    Sorting and everything works as long as I‘m not adding any events, but I need to use Change event in order to implement
     Master-Child grid.
    After I add the event, sorting stops working, event is not firing. My test code is
    Controller
    public class TestKendoAjaxController : Controller
        {
            public ActionResult Index()
            {           
               return View();
           }
            public ActionResult PartialGrid()
            {
                List<TestKendoAjaxModel> result = new List<TestKendoAjaxModel>();
                result.Add(new TestKendoAjaxModel { FirstName = "Test1", LastName = "test1Last" });
                result.Add(new TestKendoAjaxModel { FirstName = "test2", LastName = "test2Last" });
                Main nn = new Main();
                nn.blah = result;
                return PartialView("_TestPartial", nn.blah);
            }
              [HttpPost]
            public ActionResult Data_Read([DataSourceRequest]DataSourceRequest request)
            {
                List<TestKendoAjaxModel> result = new List<TestKendoAjaxModel>();
                result.Add(new TestKendoAjaxModel { FirstName = "test1", LastName = "test1Last" });
                result.Add(new TestKendoAjaxModel { FirstName = "test2", LastName = "test2Last" });
                return
    Json(result.ToDataSourceResult(request));
           }
       }

    View

    @model Johnson.OAT.MVC4.Models.Main
    @{
        ViewBag.Title = "Index";
    }

    <h2>Index</h2>

    <p>
    @Ajax.ActionLink("Load partial view", "PartialGrid", new AjaxOptions
    {
        OnSuccess = "updatePlaceholder",
        UpdateTargetId = "result"
    })
    </p>

     <div id="result"></div>
    <script type="text/javascript">
       function updatePlaceholder(context) {
            // the HTML output of the partial view
            var html = context.get_data();

            // the DOM element representing the placeholder
            var placeholder = context.get_updateTarget();

            // use jQuery to update the placeholder. It will execute any JavaScript statements
            $(placeholder).html(html);

            // return false to prevent the automatic update of the placeholder
            return false;
        }
    </script>

    Partial view

    @model IEnumerable<Johnson.OAT.MVC4.Models.TestKendoAjaxModel>

     @(Html.Kendo().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(o => o.FirstName).Format("{0:d}").Width(80);
                columns.Bound(o => o.LastName).Width(200);
               
                                 
            }).Sortable().Pageable(p => p.PageSizes(new[] { 20, 30, 50 })
            ).Filterable()
            .Selectable()
             .DataSource(datasource => datasource
               .Ajax()
               .Read(read=> read.Action("Data_Read","TestKendoAjax").Type(HttpVerbs.Post))
               
     )
     .Events(events => events.Change("change"))
     )


    <script>
        function change(e) {
           alert("")
        }
    </script>



     

    Thank you in advance!

     

    Halina
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 13 Aug 2013 Link to this post

    Hi Halina,

     
    I would suggest to move the Change event handler before the Grid code as when the Grid code is executed the handler is still not loaded:

    <script>
        function change(e) {
            alert("");
        }
    </script>
     
    @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Events(events => events.Change("change"))

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Halina
    Halina avatar
    2 posts
    Member since:
    Sep 2012

    Posted 14 Aug 2013 Link to this post

    Thank you! It helped.
Back to Top