I have a partial view that contains a TabStrip and each that contains a grid. The view works, it's currently in a different page and I'd like to move it to a kendo window.
I've moved it to a kendo window and the window displays great.
Here's the code that generates my window (please note the variable names have been changed for this).
var window = $(
"#window"
).kendoWindow({
content: {
url:
"/Case/CaseDetail"
,
data: {
Daid: Daid,
CaseID: CaseID,
RecordID: RecordID,
CanUserView: cuv,
OffenseCount: OffenseCount,
CoDefendantCount: CoDefendantCount,
VWCount: VWCount,
InternalProcessCount: InternalProcessCount,
ChargeDispositionCount: ChargeDispositionCount,
SentenceCount: SentenceCount,
OtherCaseCount: OtherCaseCount
}
},
actions: [
"Pin"
,
"Minimize"
,
"Maximize"
,
"Close"
],
// close: onClose
});
window.kendoWindow().data(
"kendoWindow"
).center().open()
The window appears and the tabs are visible, the content of the 1st tab is loaded via an AJAX call that is never executed (so no content) and none of the tabs are functional when I click on it.
When I look at the page source I can see that the window was rendered as text and all associated javascript is actual text and not, all the scripts related seem to be escaped, here's an example of some rendered content:
<
script
type
=
"text/javascript"
>
function ProcessErrorO(args) {
ProcessError(args, 'O_grid_' + '#= RecordID #');
}
<\/script>
Any help would be appreciated.
Thanks
telerik mvc window: change the url of window when iframe is set to true
My goal is to have a set of windows for a page and for the content to not be loaded until the first time the window is opened.
Each window has a maximize, minimize, and refresh button.
Here is the script to load a window.
var w = $(id).data('kendoWindow');
var url = $(id).data('url');
var loaded = $(id).data('load');
if (loaded == null) {
w.refresh({
url: url
});
w.setOptions({
contentUrl: url,
});
$(id).data('load', 'false');
}
However, with this approach, the "refresh" button on the window seems to have no effect after the content loads.
How can I maintain the URL so the window'scontent can be loaded programmatically and the refresh button reload the content?
windowObject.refresh({
url:
"/feedbackForm"
});
Yo, so im using the trail version of Telerik and doing some R&D to check if the telerik controls would suit our dev environment.
I have a mvc grid on a view, the grid has an additional action button column using the ClientTemplate(), in this column i render image button which has javascript function linked to the click event which also passes the Grid Id as a parameter. and depending on an active status bound to the grid this also decides what image buttons are displayed.
@(Html.Kendo().Grid<
Presentation.AccountGridViewModel
>()
.Name("Grid")
.Columns(columns =>
{
columns.Select().Width(31);
columns.Bound(o => o.Id).Groupable(false).Visible(false);
columns.Bound(o => o.Name);
columns.Bound(o => o.LastUpdated);
columns.Bound(o => o.Active);
columns.Bound(o => o.Id).ClientTemplate("<
img
class
=
'grid-button gb-update'
src
=
'../Images/icons/update.png'
onclick
=
'update(#=Id#)'
title
=
'Update'
/>" +
"#if(Active){#<
img
class
=
'grid-button gb-delete'
src
=
'../Images/icons/delete.png'
onclick
=
'deactivate(#=Id#)'
title
=
'Delete'
/>#}#")
.Width(100)
.Title("Actions")
.Filterable(false);
})
.Pageable(pager => pager.AlwaysVisible(true).ButtonCount(5).PageSizes(new List<
object
> { 5, 10, 20, 100 }))
.Sortable()
.Filterable()
.Scrollable()
.PersistSelection()
.Events(ev => ev.Change("onChange"))
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height: 500px;margin-top:40px;" })
.DataSource(d => d
.Ajax()
.Model(a => a.Id(p => p.Id))
.Read(read => read.Action("CustomAjaxBinding_Read", "Setting"))
.PageSize(20)
))
I have also instantiated a very basic window on the page and the rest i control via javascript.
@(Html.Kendo().Window()
.Name(
"window"
)
.Width(650)
.Height(500)
.Visible(
false
)
.Actions(actions => actions.Maximize().Close())
.Draggable())
When the grid button is clicked the javascript function i have opens the window with out any issue,sets the title and centers the window. the problem i am having is how do i dynamically render a MVC partial view inside of the window. loading static content is no issue. is there a javascript equivalent to LoadContentFrom() for the MVC control?
The request should pass the Id parameter from the javascript function to a MVC PartialViewResult action and render the partial view within the Telerik window.
function
update(Id) {
$(
"#window"
).data(
"kendoWindow"
)
.center()
.title(
'Update Account'
)
.content(
"your current ID is : "
+ Id)
// .LoadContentFrom("Test", "Setting")
.open();
}
The end goal here is to display a form within the window that will allow me to update the record and close the window once the save button is clicked and the grid will also be refreshed to display the updated values.
Thanks in advance
Hi,
I've just upgraded to the version 2018.2.620. I noticed that window.title no longer displays special characters correctly. For example:
In previous version, setting the title to finnish: "Viesti Phoenixistä" rendered correctly "Viesti Phoenixistä". Now the translation of ä character does not work anymore.
Are there any solutions to this?
Thanks and regards,
Viktor
Hi I have a hidden div that is initiated as a popup window.
The window works fine - dynamically changed title, centre and opens. Unfortunately despite it being set as modal: true it does not display the overlay or behave as a modal.
Below is a html file that demonstrates my problem... Where have I gone wrong?
<!DOCTYPE html>
<
html
lang
=
"en"
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
></
title
>
<
link
href
=
"http://localhost/DCHR_MVC/Content/bootstrap.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"http://localhost/DCHR_MVC/Content/font-awesome.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"http://localhost/DCHR_MVC/Content/kendo/2018.2.516/kendo.common.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"http://localhost/DCHR_MVC/Content/kendo/2018.2.516/kendo.common-bootstrap.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"http://localhost/DCHR_MVC/Content/kendo/2018.2.516/kendo.mobile.all.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"http://localhost/DCHR_MVC/Content/kendo/2018.2.516/kendo.bootstrap.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"http://localhost/DCHR_MVC/CSS/SiteStyles.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"http://localhost/DCHR_MVC/Scripts/jquery-3.3.1.min.js"
></
script
>
<
script
src
=
"http://localhost/DCHR_MVC/Scripts/umd/popper.js"
></
script
>
<
script
src
=
"http://localhost/DCHR_MVC/Scripts/bootstrap.min.js"
></
script
>
<
script
src
=
"http://localhost/DCHR_MVC/Scripts/respond.js"
></
script
>
<
script
src
=
"http://localhost/DCHR_MVC/Scripts/kendo/2018.2.516/jszip.min.js"
></
script
>
<
script
src
=
"http://localhost/DCHR_MVC/Scripts/kendo/2018.2.516/kendo.all.min.js"
></
script
>
<
script
src
=
"http://localhost/DCHR_MVC/Scripts/kendo/2018.2.516/kendo.aspnetmvc.min.js"
></
script
>
<
script
src
=
"http://localhost/DCHR_MVC/Scripts/kendo.modernizr.custom.js"
></
script
>
</
head
>
<
body
>
<
div
class
=
"btn-group"
>
<
button
id
=
"btnCapacity"
type
=
"button"
class
=
"btn btn-info"
data-toggle
=
"tooltip"
onclick
=
"approveDCHR('Capacity')"
>Capacity Approval</
button
>
<
button
id
=
"btnTechnical"
type
=
"button"
class
=
"btn btn-secondary"
data-toggle
=
"tooltip"
onclick
=
"approveDCHR('Technical')"
>Technical Approval</
button
>
<
button
id
=
"btnOverall"
type
=
"button"
class
=
"btn btn-primary"
data-toggle
=
"tooltip"
onclick
=
"approveDCHR('Overall')"
>Overall Approval</
button
>
</
div
>
<
div
id
=
"approvalWindow"
style
=
"display:none;"
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>Comments <
i
class
=
"fa fa-info-circle"
data-toggle
=
"tooltip"
title
=
"Approval Comments (mandatory)"
></
i
></
div
>
<
div
class
=
"card-body"
>
<
textarea
id
=
"nApprovalComments"
class
=
"form-control w-95"
placeholder
=
"Please enter comments"
></
textarea
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>Approved By <
i
class
=
"fa fa-info-circle"
data-toggle
=
"tooltip"
title
=
"Approved By (cannot be changed)"
></
i
></
div
>
<
div
class
=
"card-body"
>
<
input
id
=
"nApprovalBy"
class
=
"form-control w-95"
readonly />
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>Date <
i
class
=
"fa fa-info-circle"
data-toggle
=
"tooltip"
title
=
"Date approved (cannot be changed)"
></
i
></
div
>
<
div
class
=
"card-body"
>
<
input
id
=
"nApprovalDate"
class
=
"form-control w-95"
readonly />
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"btn-group justify-content-between"
>
<
button
class
=
"btn btn-info w-25"
onclick
=
"approvalClose()"
>Cancel</
button
>
<
button
class
=
"btn btn-warning w-25"
onclick
=
"approvalClear()"
>Clear</
button
>
<
button
class
=
"btn btn-success w-25"
onclick
=
"approvalSave()"
>Save</
button
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
<
script
>
var approvalWindow = $("#approvalWindow");
function approveDCHR(stage) {
// reset the appovals window to default values
approvalClear();
//set window title and open centered on screen
var wnd = approvalWindow.kendoWindow().data("kendoWindow");
console.log(wnd);
wnd.title(stage + " Approval");
wnd.refresh();
wnd.center();
wnd.open();
//make texarea autogrow - requires jquery.ns-autogrow - https://github.com/ro31337/jquery.ns-autogrow
//$('#nApprovalComments').autogrow({ vertical: true, horizontal: false });
}
function approvalClose() {
approvalWindow.kendoWindow().data("kendoWindow").close();
}
function approvalClear() {
// reset the appovals window to default values
$('#nApprovalComments').val("");
$('#nApprovalBy').val("");
$('#nApprovalDate').val(new Date());
}
function approvalSave() {
approvalWindow.kendoWindow().data("kendoWindow").close();
}
$(document).ready(function () {
//initiate popup window
approvalWindow.kendoWindow({
width: "570px",
title: "Approval",
actions: "",
modal: true,
visible: false
}).data("kendoWindow").close();
});
</
script
>
Hi, i'm working with Telerik MVC controls (not Kendo controls) as this is an old application and it's been very difficult trying to get any documentation for it as everythings for Kendo now.
I'm trying to get partial views working with this window and using the .refresh() accompanied with the .open() method but i can't get the correct behaviour for this to work.
The URL has been set to one of the methods in the controller and it's not being hit at all and the window is just rendering blank with no items inside it.
Initially this screen was made dynamically using jquery as an iframe - which is why i've updated it to use a static Telerik window (not iframe) and using the .refresh() method but to no avail.
The window looks like the below:
01.
@(Html.Telerik().Window()
02.
.Name("detailWindow")
03.
.Title("Edit Window")
04.
.Modal(true)
05.
.Draggable(true)
06.
.Width(200)
07.
.Height(100)
08.
.Visible(false)
09.
)
And the jquery to perform the refresh looks as follows:
01.
var
abc= $(
"#detailWindow"
).data(
"tWindow"
);
02.
abc.refresh({
03.
url: url, ==>
this
is a valid URL but controller isn't being hit
04.
title:
"wat"
,
05.
data: {
06.
id: 1,
07.
id2: 2
08.
},
09.
});
10.
abc.center().open();
Is there some file that i'm missing or an issue with the above code?
Thanks
function
WindowToCenter() {
var
window = $(
'#windowEditArticle'
).data(
"kendoWindow"
);
window.center();
}
Hello,
Since the last update, the custom window action icons in our project are not working anymore. Also on the demos on the website they seem not to be working.
Please check the demos at the following links:
https://docs.telerik.com/kendo-ui/controls/layout/window/how-to/use-custom-action-icons
https://demos.telerik.com/kendo-ui/window/actions#
Thank you,
Iuliana