Telerik Forums / Kendo UI for jQuery Forum / Splitter /

Set contentURL on a click event

Kendo UI
Resources Buy Try

Thread is closed for posting

19 posts, 0 answers

Steve

1888 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)
Steve

1888 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
Steve

1888 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());
Alex Gyoshev
Admin

2527 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!
Steve

1888 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) :/
Alex Gyoshev
Admin

2527 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!

KendoUI-2011-2-1012.zip
Steve

1888 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!
Steve

1888 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"); }
Steve

1888 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?
Atanas Korchev
Admin

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!
Steve

1888 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.
Atanas Korchev
Admin

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!
Steve

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

1888 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?
Alex Gyoshev
Admin

2527 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!
Steve

1888 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
Kyle

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:

How do you successfully implement pane loading from a control on a different frame?

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

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

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

Set contentURL on a click event

Alex Gyoshev

Alex Gyoshev

Atanas Korchev

Atanas Korchev

Alex Gyoshev

Kyle

Greffin

charan