Grid ClientTemplate URL to Open Window with LoadContentFrom

[Stephen]

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....

[Alexander Popov]

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

 

 

[Stephen]

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>

[Stephen]

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?

[Alexander Popov]

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