How to open a window when click in kendo grid cell

16 posts, 2 answers
  1. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 27 Aug 2015 Link to this post

    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.

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 28 Aug 2015 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 02 Sep 2015 in reply to Dimiter Madjarov Link to this post

     Hi Dimiter,

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

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 03 Sep 2015 Link to this post

    Hello york,

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

    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
  6. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 19 Sep 2015 in reply to Dimiter Madjarov Link to this post

    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?
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 23 Sep 2015 Link to this post

    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
    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
  8. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 23 Sep 2015 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

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

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 25 Sep 2015 Link to this post

    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
    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
  10. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 28 Sep 2015 in reply to Dimiter Madjarov Link to this post

    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.

     

  11. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 30 Sep 2015 Link to this post

    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
    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
  12. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 30 Sep 2015 in reply to Dimiter Madjarov Link to this post

    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.

  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 01 Oct 2015 Link to this post

    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
    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
  14. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 03 Oct 2015 in reply to Dimiter Madjarov Link to this post

    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>

  15. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 Oct 2015 Link to this post

    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
    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
  16. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 14 Oct 2015 in reply to Dimiter Madjarov Link to this post

    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.

  17. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 15 Oct 2015 Link to this post

    Hello york,

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

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready