How to open a window when click in kendo grid cell

[york]

I want to open a kendo window when click in kendo grid cell. The code is

                columns.Bound(s => s.HasComments)
                    .HeaderHtmlAttributes(new { title = "Comments"})
                    .ClientTemplate("<div class='sprite sprite-note' onclick='openCommentWindow('ResourceSport', '<#= ResourceSportId #>', '<#= SportName #>', '" + Model.Editable + "', 'true');'></div>")
                    .Width(100);

openCommentWindow is jquery function. But onclick does not respond at all. I want to know what is the problem and how to do this. Thanks.

[Dimiter Madjarov]

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

[york]

 Hi Dimiter,

I have another post that you may be able to solve, go to http://www.telerik.com/forums/cookielocalizationmodule-is-not-working.

[Dimiter Madjarov]

Hello york,

Me and my colleagues will handle the question in the appropriate time frame. Thanks for the understanding.

Regards,
Dimiter Madjarov
Telerik

[york]

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?

[Dimiter Madjarov]

Hello york,

Since the second level Grids are inside the master Grid, you could again only attach the click handler to the Sports Grid.
E.g.

$("#Sports").on("click", ".commentDisciplineWindow", function (e) {
     ...
});​

Let me know if this information helps.

Regards,
Dimiter Madjarov
Telerik

[york]

Hi Dimiter,

After changing to $("#Sports").on("click", ".commentDisciplineWindow", function (e), it still can not find it when click on 2nd level Grids.

[Dimiter Madjarov]

Hello york,

The click handler is working as expected on my end, so I am not sure what is causing the problem on your side. If it is still persisting, you could send us a runnable example to check and assist further.

Regards,
Dimiter Madjarov
Telerik

[york]

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.

 

[Dimiter Madjarov]

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

[york]

Thanks a lot, Dimiter, it is working.

One more question:

What is the version of Kendo for <span class="t-add t-icon"> in Telerik ​Extension MVC? I guess it be <​div class="​k-add ​k-icon">, but seems not true.

[Dimiter Madjarov]

Hello york,

If you are referring to the "Add" button icon code, it is indeed

<span class="k-icon k-add"></span>

You could assure this in our demo.

Regards,
Dimiter Madjarov
Telerik

[york]

Hi Dimiter,

I use the following code to create a button. But I don't know how to change size of it. Please help. Thanks.

        <div style="float:left; margin:10px 10px 5px 0px;" class="k-button k-state-default" id="SaveBenchmarkTier">
            <div class='k-icon k-add' ><div class='button-span' ><%: Shared.MaintenanceStrings.MaintainBenchmarks_AddBenchmarkTierButton %></div></div>
        </div>

​

[Dimiter Madjarov]

Hello york,

Since the topic of this thread got shifted away from it's initial one, please post the current problem in a separate thread or support ticket. Thanks in advance.

Regards,
Dimiter Madjarov
Telerik

[york]

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.

[Dimiter Madjarov]

Hello york,

My colleague Boyan will cover the questions in the other forum thread in the appropriate time span.

Regards,
Dimiter Madjarov
Telerik