Set contentURL on a click event

Thread is closed for posting
19 posts, 0 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 28 Sep 2011 Link to this post

    How do I change the contentUrl on a splitter pane...on an event, so the splitter is already defined, I want to change it based on a click event.

    So the idea is the splitter pane is collapsed and not resizable on load...click an item, it becomes expanded, changes to resizable and collapsable, and gets a contentURL set based on the value passed in.

    (also API lists contentURL as a Bool?)
    contentUrl: Boolean(default: true)
  2. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 29 Sep 2011 Link to this post

    Ok, so I've found how to change the data item...but it doesn't DO anything :)

    var editPaneData = $("#editPane").data();
    editPaneData.pane.contentUrl = baseContentNavURL + username.toLowerCase();

    ..as in doesnt refresh the pane
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 29 Sep 2011 Link to this post

    **EDIT**

    No not working, ajaxRequest doesn't change the contentURL, it pulls in content async into that pane.

    I need to rock a contentURL iframe

    Am I literally just manually putting an iframe in the div and then setting the src?  Or is this type of iframe feature on the roadmap?

    $("#edituser-frame").attr("src",baseContentNavURL + username.toLowerCase());
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 04 Oct 2011 Link to this post

    Hello Steve,

    > Am I literally just manually putting an iframe in the div and then setting the src?
    Yup, that's totally going to work. We haven't scheduled to implement an automatic way to do it for the official release, but I've logged it internally for consideration.

    Best wishes,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 05 Oct 2011 Link to this post

    Yeah, I think at this point, I'm going to have to (sadly) rip out kendo and put back in the RadSplitter for this nested iframe area...right now I'm just getting really undesirable results (see the other new post on events) :/
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 12 Oct 2011 Link to this post

    Hey Steve,

    The attached build contains the updated contentUrl implemntation. If you set a remote URL (say, http://kendoui.com), it will appear in an iframe and the resizing will function properly.

    All the best,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 12 Oct 2011 Link to this post

    That was WAY faster than I expected....I can now yank out the RadSplitter, thanks!
  9. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 12 Oct 2011 Link to this post

    Hey Alex, thanks much for this...just working on implimentation now

    1) if you don't set the contentUrl in the definition, you can't seem to add\change it later (by design?)
    2) Setting the URL to about:blank has a perma loading icon?

    How do I go about using it? :D

    ?
    function onUserGrid_RowClick(sender, args) {
        var splitter = $("#ece-content-splitter").data("kendoSplitter");
        //var detailspane = $("#ece-user-details-pane");
     
        var username = args.getDataKeyValue("UserName");
        if (username != null) {
            splitter.panes[1].contentUrl = "completionstatus_details.aspx?selecteduser=" + username;
            splitter.expand("#ece-user-details-pane");
        }
    }

    I can't seem to find a demo\doc which references a pane AFTER initalization

    I mean there's things like this
    splitter.ajaxRequest("#Pane1", "/Home/Pane1Content.html");

    ...but I can't seem to get that up for contentUrl

    **EDIT**
    Ok so this changes the pane value, but I assume it's not the proper way to do it as nothing happend
    var splitter = $("#ece-content-splitter").data("kendoSplitter");
                var detailspane = $("#ece-user-details-pane").data();
     
                var username = args.getDataKeyValue("UserName");
                if (username != null) {
                    detailspane.pane.contentUrl = "completionstatus_details.aspx?selecteduser=" + username.toLowerCase();
     
                    //splitter.panes[1].contentUrl = "completionstatus_details.aspx?selecteduser=" + username;
                    splitter.expand("#ece-user-details-pane");
                }

  10. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 13 Oct 2011 Link to this post

    Sorry be be a bother, but I need to show this to my PM fairly soon...can you let me know how I can change it?
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 14 Oct 2011 Link to this post

    Hi Steve,

     The contentUrl setting is taken under consideration only during initialization. Setting it afterwards requires you to also call the ajaxRequest method in order to reload the pane. Can't you just call the ajaxRequest method with the new url value? Setting contentUrl would have the exactly same effect.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 14 Oct 2011 Link to this post

    @Atanas
      I just can't get this to work at all...

    This is the definition
    //Subsplitter init
                $("#ece-content-splitter").kendoSplitter({
                    orientation: "horizontal",
                    panes: [
                        { collapsible: false, resizable: true }, //Filter pane
                        {collapsible: true, resizable: true, collapsed: true, contentUrl: "about:blank", size: "35%"} // Details pane
                    ]
                });

    and this is the click event

    function onUserGrid_RowClick(sender, args) {
                var splitter = $("#ece-content-splitter").data("kendoSplitter");

                var username = args.getDataKeyValue("UserName");
                if (username != null) {
                    splitter.ajaxRequest("#ece-user-details-pane", "completionstatus_details.aspx?selecteduser=" + username.toLowerCase());

                    splitter.expand("#ece-user-details-pane");
                }
            }

    From inspecting with firebug...I'm not getting any iFrame action at all, it's just filling the details pane with the raw html.
  13. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 14 Oct 2011 Link to this post

    Hi Steve,

     For the time being the splitter creates an iframe only when the url is not local. The url which you are passing to the ajaxRequest method is local url (does not have a protocol) and as a result the splitter loads the content via ajax and appends it instead of using an iframe. Here is the actual implementation:

    ajaxRequest: function(pane, url, data) {
               pane = $(pane);
     
               var that = this,
                   paneConfig = pane.data(PANE);
     
               url = url || paneConfig.contentUrl;
     
               if (url) {
                   pane.append("<span class='k-icon k-loading k-pane-loading' />");
     
                   if (kendo.isLocalUrl(url)) {
                       $.ajax({
                           url: url,
                           data: data || {},
                           type: "GET",
                           dataType: "html",
                           success: function (data) {
                               pane.html(data);
     
                               that.trigger(CONTENTLOAD, { pane: pane[0] });
                           }
                       });
                   } else {
                       pane.removeClass("k-scrollable")
                           .html("<iframe src='" + url + "' frameborder='0' class='k-content-frame'>" +
                                   "This page requires frames in order to show content" +
                               + "</iframe>");
                   }
               }
           },

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 14 Oct 2011 Link to this post

    Okie dokie, so hardcoding the URL in there seems to give me my iframe :) 

    Many thanks

    splitter.ajaxRequest("#ece-user-details-pane", "http://admin.medportal.ca/evaluations/ece/completionstatus_details.aspx?selecteduser=" + username.toLowerCase());
  15. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 02 Nov 2011 Link to this post

    Hey there, just realized I don't have a loading icon, is that a bug or side-effect of using the iframe?
  16. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 04 Nov 2011 Link to this post

    Indeed, this is a side-effect of using the iframe. Adding a loading icon that gets hidden on the iframe load event seems possible, but will work only once -- subsequent navigation in the iframe will not get to show it. Does it make sense to implement it only for the first load?

    Greetings,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 04 Nov 2011 Link to this post

    No it doesn't :) Spend your time elsewhere, if it could be there on every load, I guess that's another story
  18. Kyle
    Kyle avatar
    1 posts
    Member since:
    Nov 2011

    Posted 25 Nov 2011 Link to this post

    Steve,

    I'm essentially looking to do the same thing... use Ajax to load a different URL on another pane.. I, however, am having great difficulty getting this to work.

    Here I specify the contentUrl for the #horizontal <div>.
    $("#horizontal").kendoSplitter({
    panes: [{ collapsible:
    true, size: "20%" , contentUrl: "tree.php"}
                                { collapsible:
    false, size: "50%" },
                                { collapsible:
    true, size: "20%" }
                            ]
                        });

    And a function for the actions that will take place when the ComboBox is closed.
    function onClose() {
                            splitter.ajaxRequest("#horizontal", "logic.php");
                            //alert("Hello.");
                        }

    And the function is called here. (NOTE: The function IS working (see the commented "Hello" line above).
    $("#titles").kendoComboBox({
                            index: 0,
                            dataTextField: "Name",
                            dataValueField: "Id",
                            filter: "contains",
                            dataSource: {
                                type: "odata",
                                severFiltering: true,
                                serverPaging: true,
                                pageSize: 20,
                                transport: {
                                    read: "http://odata.netflix.com/Catalog/Titles"
                                }
                            },
                            close: onClose
                        });


    My questions:

    1. How do you successfully implement pane loading from a control on a different frame?
    2. How do you specify the specific frame you want to load using Ajax? There are 2 frames in the #horizontal <div> so how do you specify a specific one?
    Someone please share their source code!!


    Thanks in advance,

    Kyle





  19. Greffin
    Greffin avatar
    9 posts
    Member since:
    Jan 2012

    Posted 31 Jan 2012 Link to this post

    HI all,

    I have same problem with Kyle, can anyone  show us an example on how to load a pane controls from other pane like on select event. 

    Thank you.
  20. charan
    charan avatar
    29 posts
    Member since:
    May 2012

    Posted 02 Aug 2012 Link to this post

    hi,
    I too have the same problem,
    I am using three pane vertical splitter.
    In my center-pane I have a button,when i click on the button the details of that particular id have to load in the right-pane.


    can any one help me..........
Back to Top
Kendo UI is VS 2017 Ready