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

[Solved] kendoWindow, need to change the title or bind to an html text field

4 Answers 2341 Views

Window

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

robert asked on 10 Jul 2018, 12:06 PM

Hello, i'm trying to change the "title" value for a popup kendoWindow and it works for the first iteration, but when i try to change the title based on user data values, the "title" doesn't change and from what i've read, the "title" isn't a dynamic value, so i've tried a bunch of different solutions i've found on forums, but no luck so far.

I also tried to add just a text html value bound to what i know is a populated field "employeeViewModel.ssn", but the binding doesn't seem to show the data, so thanks for any pointers ect!

<!DOCTYPE html>

<html>

<head>

<title>New Employee</title>

</head>

<body>

<div id="employeeWin" style="margin:5px;padding:5px;">

<table class="bip-table" cellpadding="0" cellspacing="0">

<tr>

<td width="60%">

<input class="k-textbox" type="text" disabled="disabled" style="width:100%" data-bind="value:

employeeViewModel.ssn" />

</td>

</tr>

...................

</html>

onEmployeeUpdateSSN: function (e) {

var ssn = e.data.employeeViewModel.ssn;

var dob = e.data.employeeViewModel.dateOfBirth;

var lastName = e.data.employeeViewModel.lastName;

var firstName = e.data.employeeViewModel.firstName;

var title = lastName +","+firstName+ " SSN: " + ssn + " DOB: " + dob;

$('#winAddNew').kendoWindow({

actions: {},

width: '400px',

height: '300px',

title: title,

animation: {

open: {

effects: "fade:in",

durration: 1000

},

close: {

effects: 'fade:out',

duration: 1000

}

},

content: Bip.Common.bipWebPath() + 'templates/EmployeeUpdateSSNWin.html',

modal: true,

iframe: true,

resizable: false,

scrollable: false,

close: function () {

var data = $('#employeeData').val();

if (data.length > 2) {

var jObj = JSON.parse(data);

if (jObj.isSaved === true) {

var eItem = that.get('employeeItemDs').get(jObj.ssn);

//if (eItem) {

// alert('Emloyee ' + jObj.firstName + ' ' + jObj.lastName + ' already

existed'); //wrkipjames

//}

//else {

//that.setNewEmployeeData(jObj);

that.setNewEmployeeSSN(jObj);

//}

}

$('#employeeData').val('');

}

});

$('#winAddNew').data('kendoWindow').open();

$('#winAddNew').data('kendoWindow').center();

//$('.k-window-title').text(title);

//$('employeeWin').text(title);

//$('employeeWin').prev().find(".k-window-title").text(title);

//$('employeeWin').prev().find(".k-window-title").setOptions({

// title: "Notes on " + title,

// width: "60%"

//});

//window.element.find(".k-window-title").text(title);

//e.container.kendoWindow("title", title);

//$(e.container).parent().find(".k-window-title").text(title); works for the initial title, but doesn't change

//var dataItem = $('#cFoo', this.element)[0].kendoBindingTarget.source;

//var tHis = this;

//dataItem.bind('set', function (pEvent) {

// if (pEvent.field == 'Foo')

// tHis.setOptions({ title: 'Editing ' + title });

//});

//$('#winAddNew').data.setOptions({ title: title });

},

4 Answers, 1 is accepted

answered on 12 Jul 2018, 08:34 AM

Hello Robert,

The title text of the Window widget could be changed dynamically by using the title() option:

<script>

var window = $('#winAddNew').data('kendoWindow');

window.title("my custom title");

</script>

Alternatively, you could also use the setOptions() method as follows:

<script>

var window = $('#winAddNew').data('kendoWindow');

window.setOptions({ title: "my custom title"});

</script>

Regards,
Dimitar
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 12 Jul 2018, 11:15 AM

kendowindow.zip

Hi Dimitar, yes that worked great many thanks and so now I’m trying to prepopulate the “kendoWindow” popup current/existing SSN, DOB values assoicated with the their input boxes.

For example, when the kendoWindow pops up, I would like to prepopulate the SSN: and the DOB: input box values because in a number of cases, they only have to add a leading 0 to the existing SSN or change the day/month/year of the DOB and they don’t want to reenter the whole value again.

So I tried the following code example where I am using the value 1234567989 as the current SSN and trying to show this value in the “password” input box when the kendoWindow pops up initially:

content: {

url: Bip.Common.bipWebPath() + "templates/EmployeeUpdateSSNWin.html",

data: {ssn: 123456789}

And I also tried the options approach, but when the kendoWindow pops up, the SSN password input box is still not prepopulated with 123456789, for example:

var window = $('#winAddNew').data('kendoWindow');

window.setOptions({ title: "options"+title, ssn: ssn});

many thanks again Dimitar!

<!DOCTYPE html>

<html>

<head>

<title>Update SSN</title>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link href="../css/kendoQ12016/kendo.common.min.css" rel="stylesheet" />

<link href="../css/kendoQ12016/kendo.default.min.css" rel="stylesheet" />

<link href="../css/bip_styles.css" rel="stylesheet" />

<script src="../scripts/jquery-2.2.3.min.js"></script>

<script src="../scripts/kendoQ12016/kendo.all.min.js"></script>

<script src="../scripts/bip_common.js"></script>

<script src="../scripts/bip_new_employeeSSN.js"></script>

</head>

<body>

<div id="employeeWinSSN" style="margin:5px;padding:5px;">

<table class="bip-table" cellpadding="0" cellspacing="0">

<tr>

<td width="100%" colspan="2">

<table calls="bip-table" cellpadding="0" cellspacing="0">

<tr>

<td width="20%">SSN:</td>

<td width="28%">

<input type="password"

class="k-textbox"

maxlength="9"

onkeypress="return event.charCode >= 48 && event.charCode <= 57"

data-bind="value: ssn, events: {change: onSsnChanged}"

style="width:100%;" />

</td>

<td width="24%">Retyped SSN:</td>

<td width="28%">

<input type="password"

class="k-textbox"

maxlength="9"

onkeypress="return event.charCode >= 48 && event.charCode <= 57"

data-bind="value: ssn2, events: {change: onSsn2Changed}"

style="width:100%;" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td width="20%" class="lbl-text">DOB:</td>

<td width="80%">

<input data-role="datepicker" class="k-datepicker"

type="date"

style="width:100%;"

data-format="{0:MM/dd/yyyy}"

data-bind="value: dateOfBirth " />

</td>

</tr>

<tr>

<td colspan="2" width="100%">

<button class="bip-btn k-button" data-bind="click: onOkay" style="margin-right:10px;">

<img data-bind="attr: {src: saveImgUrl}" style="vertical-align:middle;" />

<span style="font-weight:bold;">Okay</span>

</button>

<button class="bip-btn k-button" data-bind="click: onCancel" style="margin-left:10px;">

<img data-bind="attr: {src: cancelImgUrl}" style="vertical-align:middle;text-align:left;" />

<span style="font-weight:bold;">Cancel</span>

</button>

</td>

</tr>

</table>

</div>

</body>

</html>

onEmployeeUpdateSSN: function (e) {

e.preventDefault();

var that = this;

var item = that.get('selEmployeeItem');

var ssn = 123456789;

if (item != null) {

$('#winAddNew').kendoWindow({

actions: {},

width: '400px',

height: '300px',

title: title,

animation: {

open: {

effects: "fade:in",

durration: 1000

},

close: {

effects: 'fade:out',

duration: 1000

}

},

content: {

url: Bip.Common.bipWebPath() + "templates/EmployeeUpdateSSNWin.html",

data: {ssn: 123456789}

},

modal: true,

iframe: true,

resizable: false,

scrollable: false,

close: function () {

var data = $('#employeeData').val();

if (data.length > 2) {

var jObj = JSON.parse(data);

if (jObj.isSaved === true) {

var eItem = that.get('employeeItemDs').get(jObj.ssn);

that.setNewEmployeeSSN(jObj);

}

$('#employeeData').val('');

}

});

$('#winAddNew').data('kendoWindow').open();

$('#winAddNew').data('kendoWindow').center();

var window = $('#winAddNew').data('kendoWindow');

window.setOptions({ title: "options"+title, ssn: ssn});

}

},

answered on 16 Jul 2018, 08:16 AM

Hello Robert,

The setOptions() method works for dynamically setting the Window widget configuration options. The available options are described in the API Reference:

Window API Reference.

For setting the content of the Window dynamically, I would suggest using the content option to specify a remote url from where the data will be retrieved. This will also allow you to setup a template for the content of the widget, which could be populated with the data received from the remote service:

<script>

$("#window").kendoWindow({

content: {

url: "/userDetails",

dataType: "json",

data: { myParam: "test param"},

iframe: false,

template: "User name: #= data.username #"

}

});

</script>

The data option in the above snippet is used to send additional parameters with the request that retrieves the data from the service. For example, you could send a unique id, which will be used to query a database and find the corresponding entity. Then, there are two possible approaches to return the data back to the client:

1) Build the required HTML on the server and return it to the client side. If the content.dataType option is not configured explicitly, the Window widget expects to receive HTML from the remote service.

2) Send the queried data object back to the client as JSON and populate the Window template. To achieve this. the content.dataType option has to be set to "json" accordingly. Additional information regarding the special hash syntax(#= data.username #) that can be used with templates to output the record data is available in the Templates Overview Article.

Regards,
Dimitar
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.