Embedded Grid in Grid Column

3 posts, 0 answers
  1. John
    John avatar
    16 posts
    Member since:
    Jul 2016

    Posted 18 Apr Link to this post

    I'm trying to achieve what was done in this example: http://stackoverflow.com/questions/25439340/how-do-i-display-kendo-grid-inside-kendo-grid-cell

    I can in fact achieve the grid within a cell using the 1st concept where I have a grid column defined like this:

     columns.Template(o => "").Width(460).Title("QA").ClientTemplate("#= buildInquiryGrid(data) #");

    This does work, and each item related to the main grid is displayed along with a button where I try to find the row detail of button click but nothing seems to work.

    This the current attempt, but other suggestion on how to do this on standard html table works.  Everything always comes back undefined. It seems to me that the HTML table is re-formatted to something else and therefore not find able through standard methods. 

    function addResponse(id) {
                var $row = $(this).parents("tr");
                var name = $(this).closest("div").find(".theQuestion").text();
                alert(name);

    }

    Ideally, I'd like to use this:

    columns.Template(o => "").Width(460).Title("QA").ClientTemplate(
                                (Html.Kendo().Grid<Domain.Entities.AIMS.Inquiry>()
                                    .Name("ActionItems_#=ActionItemId#")
                                    .Columns(c =>
                                    {
                                        c.Bound(e1 => e1.Question).Width(200);
                                       c.Bound(e1 => e1.AskedBy).Width(60);
                                        c.Bound(e1 => e1.Asked).Width(80).Format("{0:MM/dd/yyyy}");
                                        c.Bound(e1 => e1.Response).Width(200).Title("Answer");

                                    })
                                    .AutoBind(true)
                                    .DataSource(source1 => source1
                                    .Ajax()
                                    .PageSize(5)
                                   .Read(read1 => read1.Action("GetInquiries", "AIMS", new { id = "#=ActionItemId#" }))
                                    )
                                    .ToClientTemplate()
                                    .ToHtmlString()

                                    ));

     

    This will display an empty grid with header row inside each row column whether I have the event called or not. 

    .Events(e => e.DataBound("onGridDataBound"))

    function onGridDataBound(e) {
                $('#ActionItems script').appendTo(document.body);
            }

    Adding this has no affect and I did debug and stop on the line to ensure the event was in fact being called and it was.

    The GetInquiries Ajax call to the controller never gets called and I don't see any errors in the console to indicate why. The method does work as I use in the 1st approach.

    For completeness here is the Controller Method, 

    // Approach #1 Works

    public JsonResult GetInquiries( int id)
            {
                var model = _aimsService.GetInquiries(id);
                return Json(model, JsonRequestBehavior.AllowGet);
            }

    // Approach #2

    public ActionResult GetInquiries( [DataSourceRequest] DataSourceRequest request,int id)
            {
                var model = _aimsService.GetInquiries(id);
                var result = model.ToDataSourceResult(request);
                return Json(result);
            }
    Maybe the method signature is not appropriate?

    I prefer to get the 2nd way working, but will use the 1st method if that can be figured out.  

    Best Regards,

     

     

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2055 posts

    Posted 20 Apr Link to this post

    Hi John,

    The main problem is the that the scripts for initializing widgets in ClientTemplate will not be evaluated, so you need to do this manually. I have tested the following approach and it seems to initialize the nested Grid correctly:
    function onGridDataBound(e) {
        var scripts = $('#ActionItems  script');
        for (var i = 0; i < scripts.length; i++) {
            eval(scripts[i].innerHTML);
        }
    }


    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. John
    John avatar
    16 posts
    Member since:
    Jul 2016

    Posted 21 Apr in reply to Konstantin Dikov Link to this post

    Thanks Konstantin!  That worked as expected, much appreciated.
Back to Top