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

Close event access parent document

7 Answers 572 Views
Window
This is a migrated thread and some comments may be shown as answers.
Carlos
Top achievements
Rank 1
Carlos asked on 14 Sep 2016, 07:09 AM

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

7 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 15 Sep 2016, 12:45 PM

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
0
Carlos
Top achievements
Rank 1
answered on 15 Sep 2016, 03:46 PM

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

0
Ianko
Telerik team
answered on 16 Sep 2016, 07:02 AM

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
0
Carlos
Top achievements
Rank 1
answered on 16 Sep 2016, 07:41 AM

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!

 

 

 

0
Carlos
Top achievements
Rank 1
answered on 16 Sep 2016, 07:42 AM
Sorry, I forgot to attach the file
0
Accepted
Ianko
Telerik team
answered on 17 Sep 2016, 06:06 AM

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
0
Carlos
Top achievements
Rank 1
answered on 19 Sep 2016, 08:10 AM
Yesss! It works! Thank you very much!!
Tags
Window
Asked by
Carlos
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Carlos
Top achievements
Rank 1
Share this question
or