Embedded Grid in Grid Column

[John]

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,

 

 

 

[Konstantin Dikov]

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

[John]

Thanks Konstantin!  That worked as expected, much appreciated.