Clear Kendo Window on Close

5 posts, 0 answers
  1. Joshua
    Joshua avatar
    12 posts
    Member since:
    Jul 2019

    Posted 29 Oct 2020 Link to this post

    Hello,

    I have kendo window that pops up at the click of a link as shown below. Inside the window I have an input box which when changed gets data from the server
    and displays the same on the kendo grid. The problem is, once I close the which and I re-open it, the previous data still shows. How can I clear the
    currently loaded data on the close of the Kendo window?

    Below is my Home/Index.vbhtml and Application/Index.vbhtml (which opens in a window as a partial view)

    Regards.

    Home/Index.vbhtml

    <a href="#" onclick='openWindow()'>Open Window</a>

    <div id="Window">@Html.Partial("~/Views/Application/Index.vbhtml")</div>

    <script>
        function openWindow() {
            $("#Window").kendoWindow({
                actions: ["Close"],
                width: 1290,
                height: 580,
                modal: true,
                title: "Loan Application",
                visible: false
            }).data("kendoWindow").center();
            $("#Window").data("kendoWindow").open();
        };
    </script>


    Application/Index.vbhtml

    <input autocomplete="off" id="TxtUserID" />

    <div id="grid"></div>

    <script>
        $(function () {
            $('#TxtUserID').change(function () {
                LoanDataGrid()
            })
        });
    </script>

    <script>
        function LoanDataGrid() {
            var UserID = $("#TxtUserID").val();

            $("#grid").kendoGrid({
                dataSource: {
                         transport: {
                            read: {
                                data: { UserID: UserID },
                                dataType: "json",
                                url: '@Url.Action("Grid", "Application")',
                            }
                        },
                        schema: {
                            model: {
                                fields: {
                                    Id: { type: "string" },
                                    Name: { type: "string" },
                                    Age: { type: "string" }
                                }
                            }
                    },
                    pageSize: 1
                },
                toolbar: ["search"],
                height: 205,
                scrollable: true,
                persistSelection: true,
                columns: [
                    { field: "Id", title: "Id", width: "50px" },
                    { field: "Name", title: "Name" },
                    { field: "Age", title: "Age" },
                ]
            });
        };
    </script>
  2. Martin
    Admin
    Martin avatar
    298 posts

    Posted 02 Nov 2020 Link to this post

    Hello Joshua,

    Thank you for the provided code snippet. 

    Could you please review this forum thread that discusses a similar issue? It suggests using the refresh method before closing the Window.

    Let me know if that would resolve the problem.

    Regards,
    Martin
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Joshua
    Joshua avatar
    12 posts
    Member since:
    Jul 2019

    Posted 11 Nov 2020 in reply to Martin Link to this post

    Hello, I looked at the suggested links. the issues has been resolved

     

    thanks.

  4. Joshua
    Joshua avatar
    12 posts
    Member since:
    Jul 2019

    Posted 11 Nov 2020 in reply to Joshua Link to this post

    However, I have another issue,,, the code below successfully initializes the kendo date picker. But I want the input field to have the value of today's current date or a date from the server rather than just a blank field. How can I successfully archive that?

    Regards

    <input id="TodaysDate">

    $("#TodaysDate").kendoDatePicker();

  5. Martin
    Admin
    Martin avatar
    298 posts

    Posted 13 Nov 2020 Link to this post

    Hello Joshua,

    You can use the value configuration to change the component's value.

    Let me know how if you have any further questions.

    Regards,
    Martin
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top