Problems with the Window

[Raian]

Hello, good morning / good afternoon / good night,
I'm doing an application in Asp.Net Core that uses the Windows to call the contents of Actions, but my problem is this, my application when clicking on a menu item will call an action with a data gid, after open, I want to select an item from the grid, and clicking a button, will open another window on top so you can register and / or change this item (I do not want to use the grid popup method ) because on specific buttons I want to open a window with options for staging a new window, for example, one with a report template. When writing the changes or canceling, I want to close the window through a button that comes from the Action itself (as in the WebForms Windows models), however, I am facing problems, because if I try to do a method with more than one window using the methods provided in the document, I can not find results.

Could you help me about this, if necessary, I left an attachment to the template I'm trying to do.

NOTE: I am using the latest testing version of Devexpress UI for ASP.NET Core for testing.

Thanks in advance for your help and I await your response.

[Veselin Tsvetanov]

Hi Raian,

May I ask you to prepare and send us a small isolated runnable sample project reproducing the issue faced? Please remove any external dependencies and database calls from the sample, so it could be fully runnable locally. Also, could you please, explain a bit in details what exactly is the problem faced in this scenario?

Regards,
Veselin Tsvetanov
Progress Telerik

[Raian]

Sorry for the delay to answer, most of the problem I have already solved using some methods here of the forum itself, however, I was left with a doubt, I am doing a function when clicking on a menu item, it gets the menu id, will open in the case by the id of this item a window, but the problem is:
Is there a way I can set the window name and resolution according to the input case?
Here is the template I'm creating:

01.<nav class="navbar navbar-expand menu_fundo">
02.    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Mostrar Menu">
03.        <span class="navbar-toggler-icon"></span>
04.    </button>
05.
06.    <div class="collapse navbar-collapse" id="navbarSupportedContent">
07.        <ul class="navbar-nav mr-auto">
08.                    <li class="nav-item dropdown">
09.                        <a class="nav-link dropdown-toggle texto_laranja" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
10.                            Dropdown
11.                        </a>
12.                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
13.                                    <a class="dropdown-item texto_laranja" onclick="aoClicar('3')" href="#">
14.                                        Item1
15.                                    </a>
16.                                    <a class="dropdown-item texto_laranja" onclick="aoClicar('6')" href="#">
17.                                        Item2
18.                                    </a>
19.                                    <a class="dropdown-item texto_laranja" onclick="aoClicar('7')" href="#">
20.                                        Item3
21.                                    </a>
22.                        </div>
23.                    </li>
24.        </ul>
25.    </div>
26.</nav>
27.
28.@(Html.Kendo().Window()
29.    .Name("janelaGrid")
30.    .Iframe(true)
31.    .Resizable()
32.    .Draggable()
33.    .Content("Carregando...")
34.    .Visible(false)
35.    .Modal(true)
36.)
37.
38.<script>
39.    function aoClicar(idItem) {
40.        switch (idItem) {
41.            case "3":
42.                var wnd = $("#janelaGrid").getKendoWindow().center().open();
43.                wnd.refresh({
44.                    url: "/Ambiente/Index"
45.                })
46.                break;
47.            case "6":
48.                var wnd = $("#janelaGrid").getKendoWindow().center().open();
49.                wnd.refresh({
50.                    url: "/Profissao/Index"
51.                })
52.                break;
53.            case "7":
54.                var wnd = $("#janelaGrid").getKendoWindow().center().open();
55.                wnd.refresh({
56.                    url: "/Cobranca_Projetos/Index"
57.                })
58.                break;
59.            default:
60.                alertify.error('Essa janela não está disponivel no momento.');
61.        }
62.    }
63.</script>

I also noticed something, when closing the window that has a frame, there is a method of killing (cleaning) this frame, I ask this why in this case of the menu, if you close the window after clicking a menu item, and in sequence , click on another, it still appears the iframe of the other item for a few moments and then updates to what I wish.

Thanks in advance for your support and I await your response

[Ivan Danchev]

Hello Raian,

Could you elaborate more on what you mean by "set the window name and resolution"? The Window's name for example "janelaGrid":

@(Html.Kendo().Window()
.Name("janelaGrid")
.Iframe(true)
.Resizable()
.Draggable()
.Content("Carregando...")
.Visible(false)
.Modal(true)
)

is rendered as id in the Window and is used to get a reference to the widget.

As for resolution, if you refer to setting the Window's height and width, these can be set with the setOptions method as demonstrated here.

With regard to the Window showing the previous content, could you try refreshing it and then opening it as shown below:

var wnd = $("#janelaGrid").getKendoWindow();
wnd.refresh({
    url: "/Ambiente/Index"
});
wnd.center().open();

Regards,
Ivan Danchev
Progress Telerik

[Raian]

When I mentioned the name of the window, I wanted to say the Title, sorry for this error, regarding refresh, it worked.
Sorry for my bad English, this is not my native language, but in the link you sent the method using jQuery worked, basically what I wanted to do was basically like this example (This is a method only for representing what I was trying to do) :

01.Case "1":
02.       url = "Controller / Action",
03.       title = "Controller Grid",
04.       width = 1000px,
05.       height = 600px
06.Case 2:
07.       url = "Controller2 / Action2",
08.       title = "Controller Grid 2",
09.       width = 900px,
10.       height = 500px
11....

I did not know that I could use the method of other versions like the one of JQuery in the Core, then it had been kind of in doubts, so I decided to open the ticket

I have only one more doubt, in the case, as I do if I want to close this window through the conclusion of an action of a controller

01.[HttpPost]
02.        public async Task<IActionResult> Create(AmbienteViewModel ambienteViewModel)
03.        {
04.            if (ModelState.IsValid)
05.            {
06.                AmbienteModel ambienteModel = new AmbienteModel();
07.                ambienteModel.DescAmbiente = ambienteViewModel.DescAmbiente;
08.                ambienteModel.Amb_situacao = ambienteViewModel.Amb_situacao.Equals(true) ? "A" : "D";
09.                ambienteModel.usr_cod_criacao = Convert.ToInt16(Services.Token.strCod_Usuario);
10.                ambienteModel.usr_dt_hr_criacao = DateTime.Now.Date;
11.                ambienteModel.Emp_codigo = Services.Token.strEmp_codigo;
12.
13.                var UrlApi = "api/Ambiente/Create";
14.                Uri BaseAdress = Services.Token.BaseAdress;
15.                string strToken = Services.Token.strToken;
16.                using (HttpClient httpClient = new HttpClient())
17.                {
18.                    httpClient.BaseAddress = BaseAdress;
19.                    httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", strToken);
20.                    httpClient.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("Application/Json"));
21.                    var stringContent = new StringContent(JsonConvert.SerializeObject(ambienteModel), Encoding.UTF8, "application/json");
22.
23.                    using (HttpResponseMessage response = await httpClient.PostAsync(UrlApi, stringContent))
24.                    {
25.                        response.EnsureSuccessStatusCode();
26.                        return Content("<script>parent.fecharJanela()</script>");
27.                    }
28.                }
29.            }
30.            else
31.                return View(ambienteViewModel);
32.        }

This is a template I am doing, when registering the user and everything is Ok, it returns the Script that closes the window (shown in line 26), however, in doing this test, the content of line 26 returns as if it were a text on the screen, is something wrong?
Here is the script to close the window:

<script>
    function fecharJanela() {
        $("#janelaGrid").data("kendoWindow").close();
    }
</script>

Thanks in advance for your help and I await your response.

[Ivan Danchev]

Hi Raian,

The MVC and ASP.NET Core wrappers of the widgets can use the same API methods (for example setOptions) as the Kendo UI for jQuery widgets.

As for calling a JavaScript function directly from the controller, this cannot be done as shown in the code snippet you posted. A possible approach you could consider using is sending an ajax request to the action and in the success callback calling the respective js function. So for example your Action2 action could return "close" content when the Window needs to be closed:

return Content("close");

In the view you can send a request to the controller and depending on the returned data close the Window:

$.ajax({
    url: '@Url.Action("Action2", "Controller2")',
    success: function (data) {
        if (data == "close") {
            //call the function here:
            fecharJanela();
        }
    }
});

Another way to execute js based on the data returned by the action is to save the data in the ViewBag, store it in a js variable and call your function based on that value (see this stackoverflow thread where this approach is discussed).

Regards,
Ivan Danchev
Progress Telerik