Grid ClientTemplate URL to Open Window with LoadContentFrom

5 posts, 0 answers
  1. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 21 Apr 2014 Link to this post

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






  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 23 Apr 2014 Link to this post

    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.

     
  3. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 23 Apr 2014 in reply to Alexander Popov Link to this post

    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>

  4. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 24 Apr 2014 in reply to Alexander Popov Link to this post

    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?
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 25 Apr 2014 Link to this post

    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.

     
Back to Top