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

Embedded Grid in Grid Column

2 Answers 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 18 Apr 2017, 09:18 PM

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 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 20 Apr 2017, 11:05 PM
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.
0
John
Top achievements
Rank 1
answered on 21 Apr 2017, 02:59 PM
Thanks Konstantin!  That worked as expected, much appreciated.
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
John
Top achievements
Rank 1
Share this question
or