Grid Hierarchy click to load a different view

[Shehab]

Hi,
I am trying to load a grid from a search button, and it is working great in my view. Then this grid has a nested grid. The nested grid should have a button that upon selected gets a column from the parent grid and a column from the child grid and redirect to a different view (controller action).

Parent grid:

@(Html.Kendo().Grid(Model.Names)
                        .Name("gridPatients")
                        .Columns(col =>
                        {
                            col.Bound(m => m.NAME_FIRST).Title("First Name");
                            col.Bound(m => m.NAME_LAST).Title("Last Name");
                            col.Bound(m => m.SEX).Title("SEX");
                            col.Bound(m => m.DOB).Title("DOB");
                            col.Bound(m => m.MRN).Title("MRN");
                            col.Bound(m => m.PERSON_ID).Title("Person ID").Hidden();

                        })
                        .Pageable()
                        .Sortable()
                        .ClientDetailTemplateId("TheVisits")
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(10)
                            .ServerOperation(false)
                            )
                    )

Child Grid:

@(Html.Kendo().Grid(Model.PatientVisitsModel.ENCOUNTERS)
                .Name("grid_#=PERSON_ID#")
                .Columns(col =>
                {
                    col.Bound(m => m.FIN).Title("FIN");
                    col.Bound(m => m.BEG_EFFECTIVE_DT_TM).Title("Admit Date");
                    col.Bound(m => m.LOCATION).Title("Location");
                    col.Bound(m => m.STATUS).Title("Status");
                    col.Command(c => c.Custom("Select").Click("DirectToPdfCreator(#=PERSON_ID#)"));
                })
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("_TheVisits", "PatientSearch", new { PERSON_ID = "#=PERSON_ID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )

The problem is whenever I click on the arrow to load child grid, it automatically calls the js function "DirectToPdfCreator" even though I didn't click on the select button in the child grid. Please advice and thanks in advance.

Shehab

[Shehab]

In the child grid if I use:

col.Command(c => c.Custom("Select").Click("DirectToPdfCreator(#=PERSON_ID#)"));

it redirects to this function even before the click.

But if I use:

col.Command(c => c.Custom("Select").Click("DirectToPdfCreator"));

it only calls the function when I click on the button.


How do I pass in a parameter from the parent grid?
Thanks,
Shehab

[Petur Subev]

Hello Shehab,

Using the Custom command click handler you cannot customize the parameters send to the function, however inside the function you can find the dataModel by using the dataItem method of the Grid and passing to it the closest "tr" element of the target.

e.g.

function DirectToPdfCreator (e) {
     var model = this.dataItem($(e.target).closest("tr"))
}

Kind Regards,
Petur Subev
Telerik

 

 

[Shehab]

Thank you for your reply Petur, I want to be able to pass the parent grid row ID as well. Is there anyway to do that?
Thanks,
Shehab

[Shehab]

Or is there another command like click command to be used to pass parameters?

[Petur Subev]

Hello Shehab,

There is no other command, however you can create your own button and use a delegated event to handle the click of such buttons.

Here is a small example:

http://trykendoui.telerik.com/@pesho/OJuY

I hope it helps.

Regards,
Petur Subev
Telerik