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

How to open a window when click in kendo grid cell

15 Answers 2945 Views

Grid

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

15 Answers, 1 is accepted

Accepted

answered on 28 Aug 2015, 09:26 AM

Hello york,

In order to overcome the complex client template syntax with onclick handler, I would suggest to add a CSS class to the div elements and attach the click handler via jQuery outside the Grid.
E.g.

.ClientTemplate("<div class='sprite sprite-note myCustomClass'></div>")

$("#Grid").on("click", ".myCustomClass", function (e) {

var grid = $("#Grid").data("kendoGrid");

var model = grid.dataItem($(e.target).closest("tr"));

var SportName = model.SportName;

...

});

I hope this information helps. Have a great day!

Regards,
Dimiter Madjarov
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 19 Sep 2015, 06:44 AM

Hi Dimiter,

I run into another problem to open a kendo window when clicking in kendo grid cell. Now I want to open a kendo window after clicking in kendo grid cell, but grid is in 2nd tier, which is displayed after clicking arrow on 1st grid row. But it can't open window for gird in 2nd tier. Here is the code:

1st Kendo Grid
        <% Html.Kendo().Grid<MaintenanceSportsGridSportViewModel>()
            .Name("Sports")
           .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(a => a.SportId))
                    .ServerOperation(true)
                    .Read(read => read.Action("MaintenanceSportsAjax", "Maintenance"))
                    .Update(update => update.Action("UpdateMaintenanceSports", "Maintenance").Data("onUpdateMaintenanceSports"))
                    .Events(a => a.RequestEnd("onMaintenanceSportsGridRequestEnd"))
                )
...
            .ClientDetailTemplateId("DisciplinesTemplate")
            .Columns(columns =>
            {
                columns.Bound(s => s.HasComments)
                       .ClientTemplate("<div class='sprite sprite-note myCustomClass'></div>")

.Width(100);

...
}).Render();
%>

2nd Grid
        <%: Html.Kendo().Grid<MaintenanceSportsGridDisciplineViewModel>()
            .Name("Disciplines_#=SportId#")
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(a => a.DisciplineId))
                    .ServerOperation(false)
                    .Events(e => e.RequestEnd("onMaintenanceDisciplinesRequestEnd"))
                    .Create(create => create.Action("InsertMaintenanceDisciplines", "Maintenance", new { parentSportId = "#=SportId#" }))
                    .Read(read => read.Action("MaintenanceDisciplinesAjax", "Maintenance", new { sportId = "#=SportId#" }))
                    .Update(update => update.Action("UpdateMaintenanceDisciplines", "Maintenance").Data("onUpdateMaintenanceDisciplines"))
                    .Destroy(destroy => destroy.Action("DeleteMaintenanceDisciplines", "Maintenance").Data("onUpdateMaintenanceDisciplines"))
                )
...
            .Columns(columns =>
            {
                       .ClientTemplate("<div class='sprite sprite-note commentDisciplineWindow'></div>")
                       .Width(70);
...
            })
           .ToClientTemplate()
      %>

Jquery functions to open window in 1st grid

$("#Sports").on("click", ".myCustomClass", function (e) {
    var grid = $("#Sports").data("kendoGrid");
    var model = grid.dataItem($(e.target).closest("tr"));
    var SportName = model.SportName;
    ...
});

This is working fine.

Jquery functions to open window in 2nd grid

$("#Disciplines_#=SportId#").on("click", ".commentDisciplineWindow", function (e) {
            var grid = $("#Disciplines_#=SportId#").data("kendoGrid");
            var model = grid.dataItem($(e.target).closest("tr"));
            var disciplineId = model.DisciplineId;
            var sportCode = model.SportCode;    ...
});

This is not working because it can not find id for 2nd grid $("#Disciplines_#=SportId#") and thus can't run the code. How to solve this problem, i.e. find 2nd grid?

answered on 28 Sep 2015, 11:37 PM

mvc_controls_kendo.zip

Hi Dimiter,

I attach a sample project to show the problem. You can run it and find out where
the problem is. Because the size limit, I remove the package in the
project. The package include, Kendo MVC (2015.1.429.440.Trial), MVC 4
and many others. The simplest way to recreate the solution is to create
new Telerik MVC project (name: MVC_Controls_Kendo) and select .Net 4 and
ASPX (not razor), and add the source files attached.
After launching the project, just click on "Display Benchmarks Info", which
will go to Benchmarks.aspx. Then click on the note icon (in "Comments" column) immediate left to "Edit" button.

You will see on the 1st grid, after click on the note icon (in "Comments" column), it will display a Kendo window. But after click on the arrow to open the 2nd grid and click on the note icon (in "Comments" column) immediate left to "Edit" button, inside $("#Sports").on("click", ".commentDisciplineWindow", function (e), var grid = $("#Sports_#=SportId#").data("kendoGrid") is not working. So the problem is how to find the id for 2nd grid. #Sports_#=SportId# is the id for 2nd grid, but how to get SportId and find the 2nd grid with id of #Sports_#=SportId#? Thanks.

Accepted

answered on 30 Sep 2015, 05:37 PM

Hello york,

We tried to run the project on our end, by restoring the missing scripts and references, but opening the Benchmark view throws an error: "Cannot open server '...' requested by the login. Client with IP address '...' is not allowed to access the server.".

Nevertheless I reviewed the code for the two Grids, in which the 'Comment' section in the child Grid has the class "commentDisciplineWindow" which triggers the second click handler, in which:

var grid = $("#Sports_#=SportId#").data("kendoGrid");

cannot be retrieved, which should be the reason for the behavior. You could use something like:

var grid = $(this).closest(".k-grid").data("kendoGrid");

to retrieve the child Grid instance instead.

Regards,
Dimiter Madjarov
Telerik

answered on 15 Oct 2015, 04:13 AM

Hi Dimiter,

Can you look at the post http://www.telerik.com/forums/how-to-display-multiple-tier-grid-in-kendo#R6puZzFZ-UOD7ql745nxZQ? I attached 2 projects, "MVC_Controls_Kendo.zip" and "MVC_Controls_Kendo Database.zip".

Boyan solved the problem of displaying 3rd grid by replacing "TeamSport == true" and "ResourceTracking == true" with "data.TeamSport == true" and "data.ResourceTracking == true", but that actually disable the both fields.

Another problem is that the Benchmark and MedalEvent columns in the 3rd
grid always display icon even if they are unchecked after Edit. This
also happens to the Benchmark column in the 2nd grid.

Thanks.