Close event access parent document

[Carlos]

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()
}

[Ianko]

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

[Carlos]

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()
}

[Ianko]

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

[Carlos]

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!

 

 

 

[Carlos]

Sorry, I forgot to attach the file

[Ianko]

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

[Carlos]

Yesss! It works! Thank you very much!!