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

Grid ClientTemplate URL to Open Window with LoadContentFrom

4 Answers 1569 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 21 Apr 2014, 09:18 PM
I've got a grid and I would like to have one of the grid fields be a link which will open a Window widget.  But the widget needs to load a partial view using LoadContentFrom.  This will need to be a controller method and pass a parameter which is also available in the grid.

The normal grid ClientTemplate column would look like this:
columns.Bound(m => m.Proposal_Title).ClientTemplate("<a href='/Proposal/Index/#= Proposal_ID #'>" + "#= Proposal_Title #" + "</a>").Title("Title");


But I need that to maybe be a javascript call which will load a Window with a partial view and open it?

The normal LoadContentFrom would look like this:
.LoadContentFrom("Index", "Proposal", new { id = "22893" })

But I need those links to be created on the grid and the id to be the Proposal_ID as shown above.

Thanks in advance....






4 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 23 Apr 2014, 02:52 PM
Hello Stephen,

Dynamically changing the URL of a Window is currently not supported, however this behavior could be achieved by building the target URL in a custom attribute, leaving the href as "#" and subscribing to link's click event. Once the link has been clicked you can get the URL, use it as src for the Window's iframe and open the Window. For example:  
columns.Bound(m => m.Proposal_Title).ClientTemplate("<a class='openWindow' url='/Proposal/Index/#= Proposal_ID #' href='\\#'>" + "#= Proposal_Title #" + "</a>").Title("Title");
...
<script>
    $(".openWindow").click(function (e) {
        var wdw = $("#window").data("kendoWindow"), //get the instance of the already initialized window.  
            url = $(e.target).attr("url");
        wdw.element.find("iframe").attr("src", url);
        wdw.open();
    });
</script>

Regards,
Alexander Popov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 23 Apr 2014, 05:57 PM
Ok that makes sense.  I must have another issue though with the way my view is setup because the click event is not firing.  I have tried putting that javascript call inside document.ready as well and it makes no difference.

Here is my view, maybe you can see the problem:

@{
    ViewBag.Title = "Resource Reviews";
}
 
<h2>Resource Reviews</h2>
 
@Html.Partial("LastViewedResource")
 
<div class="filter">
    <label class="filter-label" for="filter">Filter:</label>
    @(Html.Kendo().DropDownList()
        .Name("Filter")
        .DataTextField("Text")
        .DataValueField("Value")
        .Events(e => e.Change("onChange"))
        .BindTo(new List<SelectListItem>() {
            new SelectListItem() {
                Text = "Pending Reviews",
                Value = "N"
            },
            new SelectListItem() {
                Text = "Complete Reviews",
                Value = "Y"
            }
        })
    )
</div>
 
<br class="clear" />
<br />
 
@(Html.Kendo().Grid<PASSAdmin.ViewModels.ResourceReviewer.ResourceReviewViewModel>()
    .Name("ResourceReviews")
    .Columns(columns =>
    {
        columns.Command(command => { command.Edit(); }).Width(50);
        columns.Bound(m => m.Proposal_ID).Title("Proposal ID");
        columns.Bound(m => m.Proposal_Title).ClientTemplate("<a class='proposalWindow' url='/Proposal/Index/#= Proposal_ID #' href='\\#'>" + "#= Proposal_Title #" + "</a>").Title("Title");
        columns.Bound(m => m.PI_BNL_ID).Title("PI");
        columns.Bound(m => m.Date_Submitted).Title("Date Submitted");
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ResourceReviewer/ResourceReview").Window(window => window.Width(700)))
    .Pageable()
    .Sortable()
    .Events(e => e.Edit("onEdit"))   
    .AutoBind(true)
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(m => m.Beamtime_Request_ID);
            model.Field(m => m.Beamline_Request_ID);
        })
        .Read(read => read.Action("GetResourceReviews", "ResourceReviewer").Data("additionalData"))
        .Update(update => update.Action("AddResourceReview", "ResourceReviewer"))     
    )
 )
 
@(Html.Kendo().Window()
    .Name("Proposal")
    .Title("Proposal")
    .Iframe(true)
    .Visible(false)
    .Draggable()
    .Resizable()
)
 
 
<script type="text/javascript">
$('.proposalWindow').click(function (e) {
    var window = $('#Proposal').data('kendoWindow');
    var url = $(e.target).attr('url');
    window.element.find('iframe').attr('src', url);
    window.open();
});
 
function onEdit(e) {
    $(e.container).parent().css({
        width: '700px',
        height: '350px'
    });
    $(e.container.find(".k-edit-buttons.k-state-default")).css("width", "660px");
}
 
function additionalData(e) {
    var value = $('#Filter').data('kendoDropDownList').value();
    return { reviewComplete: value };
}
 
function onChange() {
    $('#ResourceReviews').data('kendoGrid').dataSource.read();
}
</script>

0
Stephen
Top achievements
Rank 1
answered on 24 Apr 2014, 03:25 PM
columns.Bound(m => m.Proposal_Title).ClientTemplate("<a href='\\#' onclick='proposalWindow(#= Proposal_ID #)'>" + "#= Proposal_Title #" + "</a>").Title("Title");  
 
<script type="text/javascript">
function proposalWindow(proposalID) {
    var url = "/Proposal/Index/" + proposalID;
    var window = $("#Proposal").kendoWindow(
        {
            iframe: true,
            width: "980px",
            height: "400px",
            actions: ["Pin", "Maximize", "Minimize", "Close"],
            content: url,
            type: "GET"
        });
    window.data("kendoWindow").open();
}
</script>

I was able to make it work but I had to make the ClientTemplate a javascript function call and actually create the Window in javascript like this:




Not sure why id didn't work the other way...may you have an idea?
0
Alexander Popov
Telerik team
answered on 25 Apr 2014, 10:38 AM
Hello Stephen,

This might be related to when the click event handler is attached. Try attaching the click event handler to the body and use the ID as a filter, for example: 
$("body").on("click", ".openWindow", function (e) {

Regards,
Alexander Popov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Stephen
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Stephen
Top achievements
Rank 1
Share this question
or