Close event access parent document

8 posts, 1 answers
  1. Carlos
    Carlos avatar
    11 posts
    Member since:
    Apr 2015

    Posted 14 Sep Link to this post

    HI!

    Hi have a page with multiple grids. When I click in one element a modal window (kendoWindow) opens and update info from the item (it's not create or edit popup).

    So when I close the kendoWindow I want to refresh the dataSource, but when I try to access to the specific grid it is undefined. How can I solve it?

    Here's the code from onClose event of the kendoWindow.

    Thanks!!!

    function onClose(e) {
        $("#undo").fadeIn();
        var grid = $("grid_" + zona).data("kendoGrid"); // <- undefined (grid's name is valid)
        grid.dataSource.read()
    }

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 15 Sep Link to this post

    Hello Carlos,

    I am afraid, with the information provided so far I can only make guesses why the returned instance is undefined. 

    Can you verify whether the $("grid_" + zona) returns you the actual grid's wrapper element. Note that it is the DOM element that is also important in order to get the proper instance. 

    Also, I am unaware what zone represents in this scope. If you can, try isolating the case in a very simple project and attach it here so that I can take a look at the problem locally.

    Regards,
    Ianko
    Telerik by Progress
    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. Carlos
    Carlos avatar
    11 posts
    Member since:
    Apr 2015

    Posted 15 Sep in reply to Ianko Link to this post

    Hii!

    Thanks for you answer. 

    Here's the code: 

    <h2>@ControlAPPCC.Resources.Label.ControlInElement</h2>
    @(Html.Kendo().PanelBar()
    .Name("panelbar")
    .ExpandMode(PanelBarExpandMode.Multiple)
    .Items(panelbar =>
    {
        foreach (ControlAPPCC.Models.Zone z in Model)
        {
            panelbar.Add().Text(@z.Name)
                .Expanded(true)
            .Content(@<div style="padding: 10px;">
                @(Html.Kendo().Grid<ControlAPPCC.Models.ViewModels.ControlElementViewModel>()
                .Name("grid_"+z.ZoneId)
                .Columns(columns =>
                {
                    columns.ForeignKey(e => e.ElementId, ((IEnumerable<ControlAPPCC.Models.ViewModels.SelectElementViewModel>)ViewData["elements"]).Where(e => e.ZoneId == z.ZoneId), "ElementId", "ElementName");
                    columns.ForeignKey(e => e.ControlId, (IEnumerable<ControlAPPCC.Models.ViewModels.SelectControlViewModel>)ViewData["controls"], "ControlId", "ControlName");
                    columns.Bound(e => e.RecurrentRule).ClientTemplate("<p>#=RRuleString(RecurrentRule)#</p>");
                    columns.Command(command =>
                    {
                        command.Edit();
                        command.Custom("Periodicity").Text("Periodicidad").Click("openRRuleGenerator").HtmlAttributes(new { type = "button", param = z.ZoneId });
                        command.Destroy();
                    });
                })
            .ToolBar(toolbar => toolbar.Create())
            .ClientDetailTemplateId("template-limit")
            .Editable(editable => editable.Mode(GridEditMode.InLine))
             
            .Selectable(
                selectable => selectable
                .Mode(GridSelectionMode.Single)
                .Type(GridSelectionType.Row)
            )
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Model(model =>
                {
                    model.Id(e => e.ElementId);
                    model.Id(e => e.ControlId);
                    model.Field(e => e.ElementId).Editable(false);
                    model.Field(e => e.ControlId).Editable(false);
                    model.Field(e => e.RecurrentRule).Editable(true);
                })
                .Events(events => events.Error("error_handler"))
                .Read(read => read.Action("ControlElements_Read", "Setup", new { Id = z.ZoneId }))
                .Create(create => create.Action("ControlElements_Create", "Setup", new { Id = z.ZoneId }))
                .Update(update => update.Action("ControlElements_Update", "Setup"))
                .Destroy(destroy => destroy.Action("ControlElements_Destroy", "Setup"))
            )
            .Pageable()
            .Editable()
            
    )
            </div>);
        }
     
    })
    )
     
    <div id="dialog"></div>
     
     
    .....

    var gridname;
    function openRRuleGenerator(e)
    {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
     
        gridname = this.element.context.id;
        var dialog = $("#dialog");
        dialog.kendoWindow({
            width: "690px",
            close: onclose,
            height: "200px",
            title: "RRule Generator",
            content: "RRuleGenerator?_Element="+dataItem.ElementId+"&_Control="+dataItem.ControlId+"&_RRule="+dataItem.RecurrentRule,
            actions: ["Refresh", "Close"],
        }).data("kendoWindow").center().open();
    }
     
    function onclose() {
        $("#dialog").kendoWindow({
            content: ""
        }).data("kendoWindow");
     
        var grid = $("#grid_16").data("kendoGrid"); // <- grid's name is valid

     //  var grid = $("grid_16").data("kendoGrid"); //

    console.log(grid); // undefined

        

      
        grid.dataSource.read()
    }

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 16 Sep Link to this post

    Hello Carlos,

    On a side note, in the first code pasted, the # character is missing from the jQuery selected. Therefore, surely, the proper DOM element is not retrieved. Using $("#grid_" + zona) might work properly. 

    As for the provided code, I have create a simple application based on it with a dummy model and data in order to try and reproduce the problem, but on my end everything is running fine. 

    Also, I found one issue with the code provided. In the onclose function, the Kendo Window is initialized again. This is an invalid operation and doing that may cause troubles with  the Kendo Window widget. You can check out this article: http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#get-widget-reference. In order to clear the content you should rather use  the content method.

    Regards,
    Ianko
    Telerik by Progress
    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. Carlos
    Carlos avatar
    11 posts
    Member since:
    Apr 2015

    Posted 16 Sep in reply to Ianko Link to this post

    Woww! Thanks you very much!!

    But the problem is still there! Now I found what's the problem. It just works when there isn't content (it's commented). When the content is loaded, the grid appears again as undefined.

    content: "RRuleGenerator?_Element=" + dataItem.ElementId + "&_Control=" + dataItem.ControlId + "&_RRule=" + dataItem.RecurrentRule,

    The content call a method of the controller and load a new page:

    Controller: 

    public ActionResult RRuleGenerator(int _Element, int _Control, string _RRule)
    {
        ControlElement ce = new ControlElement();
        ce.ElementId = _Element;
        ce.ControlId = _Control;
        ce.RecurrenceRule = _RRule;
        return View(ce);
    }

    View in attached files

     

    Thanks!

     

     

     

  7. Carlos
    Carlos avatar
    11 posts
    Member since:
    Apr 2015

    Posted 16 Sep in reply to Carlos Link to this post

    Sorry, I forgot to attach the file
  8. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 17 Sep Link to this post

    Hello Carlos,

    With the additional code provided and the Kendo Window configuration from your previous message, I am receiving errors regarding the loaded content, but none regarding the Kendo Grid. 

    However, all this is resolved just by using the iframe mode of the Kendo Window's content. Note  that, loading content with JavaScript functions in div elements leads to issues. In such cases it is preferred to use iframe or redesign the client-side logic of the view so that it does not fail when client-side logic is compiled by the browser.

    dialog.kendoWindow({
        width: "690px",
        close: onclose,
        height: "200px",
        title: "RRule Generator",
        content: "RRuleGenerator?_Element=" + dataItem.ElementId + "&_Control=" + dataItem.ControlId + "&_RRule=" + dataItem.RecurrentRule,
        actions: ["Refresh", "Close"],
        iframe: true
    }).data("kendoWindow").center().open();

    As I modified the sample project attached to this thread, please check it again and see if this solves the problem.

    If it does not, modify it further in order to show the problem with the sample and attach it to your message so that I can take a look at it further.

    Regards,

    Ianko

    Telerik by Progress

    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
  9. Carlos
    Carlos avatar
    11 posts
    Member since:
    Apr 2015

    Posted 19 Sep in reply to Ianko Link to this post

    Yesss! It works! Thank you very much!!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready