This is a migrated thread and some comments may be shown as answers.

Set contentURL on a click event

18 Answers 545 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Steve
Top achievements
Rank 2
Veteran
Steve asked on 29 Sep 2011, 03:26 AM
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)

18 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 2
Veteran
answered on 29 Sep 2011, 08:07 PM
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
0
Steve
Top achievements
Rank 2
Veteran
answered on 29 Sep 2011, 08:15 PM
**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());
0
Alex Gyoshev
Telerik team
answered on 04 Oct 2011, 04:06 PM
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!
0
Steve
Top achievements
Rank 2
Veteran
answered on 05 Oct 2011, 06:21 PM
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) :/
0
Alex Gyoshev
Telerik team
answered on 12 Oct 2011, 11:27 AM
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!
0
Steve
Top achievements
Rank 2
Veteran
answered on 12 Oct 2011, 03:49 PM
That was WAY faster than I expected....I can now yank out the RadSplitter, thanks!
0
Steve
Top achievements
Rank 2
Veteran
answered on 12 Oct 2011, 07:35 PM
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");
            }

0
Steve
Top achievements
Rank 2
Veteran
answered on 13 Oct 2011, 06:18 PM
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?
0
Atanas Korchev
Telerik team
answered on 14 Oct 2011, 09:32 AM
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!
0
Steve
Top achievements
Rank 2
Veteran
answered on 14 Oct 2011, 04:30 PM
@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.
0
Atanas Korchev
Telerik team
answered on 14 Oct 2011, 04:41 PM
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!
0
Steve
Top achievements
Rank 2
Veteran
answered on 14 Oct 2011, 04:51 PM
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());
0
Steve
Top achievements
Rank 2
Veteran
answered on 02 Nov 2011, 06:39 PM
Hey there, just realized I don't have a loading icon, is that a bug or side-effect of using the iframe?
0
Alex Gyoshev
Telerik team
answered on 04 Nov 2011, 09:56 AM
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!
0
Steve
Top achievements
Rank 2
Veteran
answered on 04 Nov 2011, 03:45 PM
No it doesn't :) Spend your time elsewhere, if it could be there on every load, I guess that's another story
0
Kyle
Top achievements
Rank 1
answered on 25 Nov 2011, 09:35 AM
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





0
Greffin
Top achievements
Rank 1
answered on 31 Jan 2012, 07:03 AM
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.
0
charan
Top achievements
Rank 1
answered on 02 Aug 2012, 06:29 AM
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..........
Tags
Splitter
Asked by
Steve
Top achievements
Rank 2
Veteran
Answers by
Steve
Top achievements
Rank 2
Veteran
Alex Gyoshev
Telerik team
Atanas Korchev
Telerik team
Kyle
Top achievements
Rank 1
Greffin
Top achievements
Rank 1
charan
Top achievements
Rank 1
Share this question
or