Telerik Forums
UI for ASP.NET MVC Forum
1 answer
66 views

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

Martin
Telerik team
 answered on 29 Aug 2019
1 answer
649 views

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?

Marin Bratanov
Telerik team
 answered on 07 Jun 2019
3 answers
197 views
Is it possible to call an ActionResult in my controller in the refresh?

I need to pass the ID to my Controller to get back data.

windowObject.refresh({
    url: "/feedbackForm"
});
Marin Bratanov
Telerik team
 answered on 18 Jan 2019
3 answers
1.1K+ views

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

 

Ivan Danchev
Telerik team
 answered on 30 Oct 2018
3 answers
220 views

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&#228;" rendered correctly "Viesti Phoenixistä". Now the translation of &#228 character does not work anymore.

Are there any solutions to this?

Thanks and regards,
Viktor

Benedikt
Top achievements
Rank 1
 answered on 03 Sep 2018
1 answer
662 views

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/umd/popper.js"></script>
    <script src="http://localhost/DCHR_MVC/Scripts/respond.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>
Ivan Danchev
Telerik team
 answered on 25 May 2018
1 answer
326 views

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

Nencho
Telerik team
 answered on 08 Mar 2018
9 answers
912 views
Hi All,


I have created partial view which contain multiple dropdown list and I am rendering this partial view on different Window. 

When I opened this partial view on "xyz" window it will work as expected, but when I opened same partial view on another window (abc) all dropdownlist converted into textbox control.

Any thoughts?

Thanks-
Atul K
Dimo
Telerik team
 answered on 07 Mar 2018
3 answers
406 views
I have code on window :

.Events(events => events.Open("WindowToCenter"))

and javascript:

function WindowToCenter() {
 
        var window = $('#windowEditArticle').data("kendoWindow");
        window.center();
    }

Problem is that .center() working only first time. When I open window next time window position is total wrong.

Any idea?
Ivan Danchev
Telerik team
 answered on 23 Feb 2018
2 answers
128 views

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

Iuliana Maria
Top achievements
Rank 1
Iron
 answered on 29 Jan 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?