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

Kendo window not working

4 Answers 314 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Candice
Top achievements
Rank 1
Candice asked on 02 May 2020, 02:14 PM

 

 

 

 

 

 

 

this.taskGridOptions = {
        data: self.tasks,
        scrollable: false,
        sortable: true,
        persistSelection: true,
        selectable: "row",
        change: function (grid) {
            console.debug("Change grid...");
            self.checkForCheckedRows();
        },
        dataBound: function () {

            this.table.find(".checked-row").click(function () {
                var checked = this.checked;
                var grid = $("#taskGrid").data("kendoGrid");
                // Find the row that was checked
                row = $(this).closest("tr"),

                    // Set the data item's IsSelected property
                    dataItem = grid.dataItem(row);
                dataItem.IsSelected = checked;

                var realItem = ko.utils.arrayFirst(self.tasks(), function (item) {
                    if (item.Id() == dataItem.Id) {
                        return true;
                    }
                });

                // And set it's IsSelected property (this field isn't bound)
                if (realItem)
                    realItem.IsSelected = checked;

                // Update the text alerting how many have been checked
                self.checkForCheckedRows();

                // debug
                console.debug(JSON.stringify(self.tasks()));
            });
        },
        noRecords: {
            template: "<div class='no-grid-data'> 'No records found, please refine your search.'</span>"
        },
        pageable: {
            pageSize: 20
        },
        columns: [
            {
                headerTemplate: "<input id='check-all-box', type='checkbox', class='check-box' />",
                field: "IsSelected",
                type: "boolean",
                width: 45,
                sortable: false,
                template: "<input type='checkbox' class='checkbox checked-row' />",
            },
            { field: "Id", title: "Task Id" },
            { field: "TicketId", title: "Ticket Ref" },
            { field: "LeadId", title: "Lead Id" },
            {
                field: "UserId", title: "User",
                template: function (data) {
                    return self.getUsernameByUserId(data.UserId);
                }
            },
            {
                field: "ResultCodeId", title: "Result Code",
                template: function (data) {
                    return self.getResultcodeById(data.ResultCodeId);
                }
            },
            {
                field: "DueDate", title: "Due Date",
                template: function (data) {
                    return parseJsonDate(data.DueDate).toLocaleString();
                }
            },

            {
                field: "Status", title: "Task Status",
                template: function (data) {
                    if (data.Status == InteractionStatusType.Closed)
                        return "Closed";
                    else if (data.Status == InteractionStatusType.InProgress)
                        return "In Progress";
                    else if (data.Status == InteractionStatusType.Open)
                        return "Open";
                }
            },
            {
                field: "ChannelType", title: "Channel Type",
                template: function (data) {
                    if (data.ChannelType == InteractionTypes.Call)
                        return "Call";
                    else if (data.ChannelType == InteractionTypes.Email)
                        return "Email";
                    else if (data.ChannelType == InteractionTypes.Chat)
                        return "Chat";
                }
            },
            {
                command: { text: "View Details", click: showDetails, title: " ", width: "180px" },
            }
        ]
    }
    
    function wnd() {
        $("#details")
        .kendoWindow({
            title: "Customer Details",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
        }).data("kendoWindow");
    }
    detailsTemplate = kendo.template($("#template").html());

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

 

<script id="template" type="text/x-kendo-template">
    <div id="taskInfo-dialog">
        <label class="form-label">
            Subject:
            <span>#=Description#</span>
        </label>
        <label class="form-label">
            Notes:
            <span>#=Notes#</span>
        </label>
    </div>
</script>

4 Answers, 1 is accepted

Sort by
0
Candice
Top achievements
Rank 1
answered on 02 May 2020, 02:16 PM
The kendo window is not opening on click at all, keep getting console errors? 
0
Accepted
Plamen Mitrev
Telerik team
answered on 05 May 2020, 09:32 AM

Hello Candice,

I assume that you have explored the Custom command example on our site and you are adapting it to your scenario. The sample shows how to include a command column in the grid to render a button, which calls a function. It opens a window with a template content that gathers the data from the table row.

I analyzed your sample code and I noticed that you have defined wnd as function, instead of a variable that holds the Window widget reference. This Window widget should be defined once and then reused and updated with different content. Later on in the showDetails(e) function, the code uses the wnd variable correctly, however, due to the incorrect initialization of the Window widget, you observed some console errors. Please refer to the above mentioned example as a guideline and try to adjust the code to match your scenario and requirements.

In case you continue to experience any troubles, please share the full updated code and details about the console errors. That will allow me to continue my investigation and advise you further.

Thank you for your cooperation in advance.

Regards,
Plamen Mitrev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Candice
Top achievements
Rank 1
answered on 05 May 2020, 09:46 AM

Thanks fo rgetting back to me, I assume what you meant was to turn the 'wnd' function into a variable = function? I tried that and got this console error, Also, apologies in advance as I really have never used a kendoWindow or its functionality before. 

here is the updated code 
    this.taskGridOptions = {
        data: self.tasks,
        scrollable: false,
        sortable: true,
        persistSelection: true,
        selectable: "row",
        change: function (grid) {
            console.debug("Change grid...");
            self.checkForCheckedRows();
        },
        dataBound: function () {

            this.table.find(".checked-row").click(function () {
                var checked = this.checked;
                var grid = $("#taskGrid").data("kendoGrid");
                // Find the row that was checked
                row = $(this).closest("tr"),

                    // Set the data item's IsSelected property
                    dataItem = grid.dataItem(row);
                dataItem.IsSelected = checked;

                var realItem = ko.utils.arrayFirst(self.tasks(), function (item) {
                    if (item.Id() == dataItem.Id) {
                        return true;
                    }
                });

                // And set it's IsSelected property (this field isn't bound)
                if (realItem)
                    realItem.IsSelected = checked;

                // Update the text alerting how many have been checked
                self.checkForCheckedRows();

                // debug
                console.debug(JSON.stringify(self.tasks()));
            });
        },
        noRecords: {
            template: "<div class='no-grid-data'> 'No records found, please refine your search.'</span>"
        },
        pageable: {
            pageSize: 20
        },
        columns: [
            {
                headerTemplate: "<input id='check-all-box', type='checkbox', class='check-box' />",
                field: "IsSelected",
                type: "boolean",
                width: 45,
                sortable: false,
                template: "<input type='checkbox' class='checkbox checked-row' />",
            },
            { field: "Id", title: "Task Id" },
            { field: "TicketId", title: "Ticket Ref" },
            { field: "LeadId", title: "Lead Id" },
            {
                field: "UserId", title: "User",
                template: function (data) {
                    return self.getUsernameByUserId(data.UserId);
                }
            },
            {
                field: "ResultCodeId", title: "Result Code",
                template: function (data) {
                    return self.getResultcodeById(data.ResultCodeId);
                }
            },
            {
                field: "DueDate", title: "Due Date",width: "150px",
                template: function (data) {
                    return parseJsonDate(data.DueDate).toLocaleString();
                }
            },

            {
                field: "Status", title: "Task Status", width: "100px",
                template: function (data) {
                    if (data.Status == InteractionStatusType.Closed)
                        return "Closed";
                    else if (data.Status == InteractionStatusType.InProgress)
                        return "In Progress";
                    else if (data.Status == InteractionStatusType.Open)
                        return "Open";
                }
            },
            {
                field: "ChannelType", title: "Channel Type", width:"35px",
                template: function (data) {
                    if (data.ChannelType == InteractionTypes.Call)
                        return "Call";
                    else if (data.ChannelType == InteractionTypes.Email)
                        return "Email";
                    else if (data.ChannelType == InteractionTypes.Chat)
                        return "Chat";
                }
            },
            {
                command: { click: showDetails, width: "30px", template: kendo.template($("#summary-button").html()) },
            }
        ]
    }

    var wnd= function () {
        $("#details")
        .kendoWindow({
            title: "Customer Details",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
        }).data("kendoWindow");
    }
    detailsTemplate = kendo.template($("#template").html());

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

0
Plamen Mitrev
Telerik team
answered on 06 May 2020, 10:59 AM

Hi Candice,

Thank you for sharing the updated code and details about the issue.

The variable wnd is actually the Window widget and it should be properly initialized. This is done with the following code that calls the kendoWindow() method and here you can apply the necessary customization. Please check the sample code below.

wnd = $("#details").kendoWindow({
          title: "Your Title",
          modal: true,
          visible: false,
          resizable: false,
          width: 300
}).data("kendoWindow");

I prepared a short runnable sample grid that has the above mentioned functionality. Please find it here and explore it on your end. You can make changes and experiment with the code in the linked sample and apply the same logic to your application.

If you encounter any issues, please replicate the behavior in the linked sample page and share the unique link that is generated with your changes. That way I will be able to run the code, analyze it and advise you further.

Thank you for your continuous cooperation in this discussion.

Regards,
Plamen Mitrev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Candice
Top achievements
Rank 1
Answers by
Candice
Top achievements
Rank 1
Plamen Mitrev
Telerik team
Share this question
or