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

Kendo window not working

4 Answers 1292 Views

Grid

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

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

4 Answers, 1 is accepted

Accepted

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.

answered on 05 May 2020, 09:46 AM

2020_05_05_10_43_00_developer_tools_task_admin_http_localhost_56418_taskadmin.png

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

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