Set contentURL on a click event

[sitefinitysteve]

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)

[sitefinitysteve]

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

[sitefinitysteve]

**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());

[Alex Gyoshev]

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

[sitefinitysteve]

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) :/

[Alex Gyoshev]

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

[sitefinitysteve]

That was WAY faster than I expected....I can now yank out the RadSplitter, thanks!

[sitefinitysteve]

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");

            }

[sitefinitysteve]

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?

[Atanas Korchev]

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

[sitefinitysteve]

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

[Atanas Korchev]

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

[sitefinitysteve]

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());

[sitefinitysteve]

Hey there, just realized I don't have a loading icon, is that a bug or side-effect of using the iframe?

[Alex Gyoshev]

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

[sitefinitysteve]

No it doesn't :) Spend your time elsewhere, if it could be there on every load, I guess that's another story

[Kyle]

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

[Greffin]

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.

[charan]

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