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

Binding json webservice to menu - menu not populating

15 Answers 438 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Henk Jelt
Top achievements
Rank 1
Henk Jelt asked on 23 May 2012, 12:54 PM
Hi

I am trying to implement Kendo on my webpage, with dynamically loaded menu's.
I have one menu up and running, which is generated on the server-side and then rendered by Kendo.
This works ok.

Now I am trying to retrieve the same data via a json webservice (WCF Rest) and populate the menu via the datasource.
Since there is no sample code for this, I am cutting and pasting from other samples, but I cannot get this to work.

My code is
"
            <ul id="k-menu2"></ul>
			
            <script type="text/javascript">
			    $(document).ready(function() 
                {
                    $("#k-menu2").kendoMenu(
                    {
                        dataTextField: "Name",
                        dataValueField: "Id",
                        dataSource: 
                        {
                        type: "json",
                        transport: 
                            {
                                read: "http://jason.platform4telecom.com/JsonTest/GetRoles/henkjelt/simpel/1/58/1"
                            }
                        }
                     });
                });
"

If I look in the browser via Firebug I see the following:
"
<ul id="k-menu2" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal"></ul>
"
 and

"
<script type="text/javascript">
   $(document).ready(function() 
                {
                    $("#k-menu2").kendoMenu(
                    {
                        dataTextField: "Name",
                        dataValueField: "Id",
                        dataSource: 
                        {
                        type: "json",
                        transport: 
                            {
                                read: "http://jason.platform4telecom.com/JsonTest/GetRoles/henkjelt/simpel/1/58/1"
                            }
                        }
                     });
                });
</script>
"

If I test the json call via a browser I get the following output:
"
[{"Id":1,"Name":"superuser"},{"Id":3,"Name":"VNO"},{"Id":4,"Name":"Partner"},{"Id":5,"Name":"Gebruiker"}] 
"

the menu should be populated with 4 roles, but this is not happening.

Where is the pitfall?

Thanks for all help!

KR

Henk Jelt

15 Answers, 1 is accepted

Sort by
0
Wirusiux
Top achievements
Rank 1
answered on 23 May 2012, 03:49 PM
1) Make sure returned data is of type json, not string or xml. (Content-Type: application/json; charset=utf-8 )
2) Are you trying to get result from remote webservice? If yes, then you need jsonp not json.
0
Iliana Nikolova
Telerik team
answered on 23 May 2012, 06:10 PM
Hello guys,

Currently the Kendo UI Menu widget does not support a DataSource binding. The good news is that such feature is planned for our next official release.

Greetings,

Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Henk Jelt
Top achievements
Rank 1
answered on 23 May 2012, 07:31 PM
Wirusiux: thanks for your answer. wrt the contenttype: that has ok. wrt jsonp: didn't know about this. will dig into it, and see what needs to be changed in the code. 

@ Iliana: that is a pity, but it clears a lot of confusion on my side. I thought this way of retrieving data via a remote datasource would be the usp of Kendo, but apparently it is only supported in a few cases.
I need to find a work-around for this. When do you expect to have full support over all widgets for this type of communication?

KR

Henk Jelt
0
Atanas Korchev
Telerik team
answered on 25 May 2012, 10:09 AM
Hello,

 We can't commit with a deadline when data source binding will be available across all widgets. We plan to add support for data source binding for the treeview in the upcoming release. If time permits we would do so for the menu and panelbar as well.

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
Henk Jelt
Top achievements
Rank 1
answered on 25 May 2012, 10:26 AM
Hi Atanas

Would it be an idea to make clear in your documentation which widget is supported by datasource binding and which is not?
This prevents people like me searching for hours to find a solution which is not there.
I spent a lot of time combining snippets of code to make it work, without result.
This is costly for me, and also annoying, and not making me a big supporter of your great solution.
I have found a work around now, but it would have been helpful if the documentation would have been more clear about this.

KR

Henk Jelt
0
Atanas Korchev
Telerik team
answered on 25 May 2012, 10:30 AM
Hi,

 Is there any documentation saying that the menu supported data source binding? We usually don't include documentation for unsupported features - only for supported ones.

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
Henk Jelt
Top achievements
Rank 1
answered on 25 May 2012, 11:04 AM
I have not found any documentation.
However, the samples you provide, are just illustrations.
A developer wants to achieve something, he picks up the snippets of code, and tries to make it work.
The documentation is not clear about what is supported and what not.
This means that - at least in my case - I combined the snippets of various samples to populate the menu using datasource binding.
I spent a lot of time implementing a json webservice, and trying to make it work.
If the documentation of the menu would clearly have stated that this is not supported, I would not have spent that much time to make it work.
Do not regard my comments as negative, since your product is great.
I am just indicating that with a little effort from your side you could have saved me (and possibly others) a lot of time, and make my experience with Kendo much more positive.
It is a suggestion to improve the implementation potential of Kendo.
I have got it working now, and will wait for your indication that datasource binding is possible for the menu.
I will start now to implement grids and charts, hopefully with datasource binding.
If it will not work, I at least now know the workaround.

KR

HJ
0
Jeff
Top achievements
Rank 1
answered on 21 Jun 2012, 03:04 PM
Atanas - the problem with this assumption is that it assumes all of the documentation is complete.  Not specifying this keeps us guessing because I'm finding a decent amount of documentation that currently isn't in place (somewhat to be expected).  Clearly stating where these standard framework pieces aren't currently supported would be very helpful.

Thanks,
Jeff
0
mikel
Top achievements
Rank 1
answered on 09 Jul 2012, 07:58 AM
Hi Henk Jelt!

If you would mind helping, can you please share some hints (or code snippets) as to how to populate the menu using datasource binding? I am having a hard time on this too. And I also badly need this for our project.   Have you also found a workaround on treeview? As far as I know, both TreeView and Menu KendoUI widgets currently do not support dynamic JSON loading. Do you have a temporary fix that allows us to continue working until the KendoUI Team provides the solution? Looking forward for your reply.

Thank you so much for your time and help! =)


0
Henk Jelt
Top achievements
Rank 1
answered on 09 Jul 2012, 08:29 AM
Hi Mikel

I have not been able to bind menu or treeview to a json datasource.

I use the very basic method as indicated by Kendo:
I create a control with a unique id, I prepare its contents serverside, and print it on the screen and have Kendo render it.

For the menu this results in the following:
                <ul id="k-menu" class="k-content">
                    <li><%: Html.ActionLink("Home""Index""Home")%></li>
                    <%If Session("userid") > 0 Then%>
                    <li><%: Html.ActionLink(Session("accountname").ToString, "Closed""Account")%>
                    <ul>
                    <% Dim selected As String = ""
                        Dim accountarr = Session("accountarr")
                        For iCnt = 0 To accountarr.length / 3 - 1
                            Dim accountname = accountarr(1, iCnt).ToString%>
                            <li ><%: Html.ActionLink(accountname, "Closed""Account"New With {.id = Nothing, .accountid = iCnt}, Nothing)%></li>
                        <%Next%>
                    </ul>
                    </li>
                    <%End If%>
                    </ul>
			<script type="text/javascript">
			    $(document).ready(function () {
			        $("#k-menu").kendoMenu();
			    });
			</script>

The dynamic part is in this piece of code:
                    <ul>
                    <% Dim selected As String = ""
                        Dim accountarr = Session("accountarr")
                        For iCnt = 0 To accountarr.length / 3 - 1
                            Dim accountname = accountarr(1, iCnt).ToString%>
                            <li ><%: Html.ActionLink(accountname, "Closed""Account"New With {.id = Nothing, .accountid = iCnt}, Nothing)%></li>
                        <%Next%>
                    </ul>

I prepare an array in code-behind, and store it in a session parameter.
Then in the screen I retrieve the content of the session parameter, and loop through it, populating part of the <ul>.
At the end the <ul> is rendered by the KendoMenu function.

I am in a process to prepare the list also backend so that I do not have to do the looping front-end.

At this moment I am starting to work with the treeview, but I basically use the same method.

Hope I had the ability to help you a step further.

KR

Henk Jelt
0
mikel
Top achievements
Rank 1
answered on 09 Jul 2012, 09:40 AM
Thank you so much Henk Jelt for your speedy response! Yours is a beautiful idea. I'll try implementing your suggestion. Meantime, I was thinking of using $.ajax GET  jQuery data call to load the Menu or TreeView and used the string results to bind to the widget and then populate it. However, whenever the loaded data change,  I suppose they won't be reflected in the widget. You have to load again the widget with JSON data, which is quite unwieldy, especially when dealing with large amounts of data. If the KendoUI team can now add support for data source binding, this won't be the case.  Meantime, how do we find a quick workaround to achieve such dynamic functionality? Thanks in advance! =)
0
Henk Jelt
Top achievements
Rank 1
answered on 09 Jul 2012, 10:27 AM
Hi Mikel

I agree with you that loading the data via JSON in this situation is not to be preferred.
It would mean creating a "local" datasource via a  JSON array in a function, 
The only way I see at the moment is to refresh them via a postback to the server (as far as my knowledge goes).

KR
Henk Jelt
0
mikel
Top achievements
Rank 1
answered on 09 Jul 2012, 10:44 AM
Thanks a lot Henk Jelt! So we just need to be careful to keep the widget data source and json data in sync with each other. I suppose that while this temporary workaround is functional, it is not maximizing the full power of DataSource though. I do hope that the KendoUI team will address this issue the soonest. Otherwise, customers won't be happy and would tend not to use KendoUI at all. But I am quite hopeful that the team would deliver such feature in their next release. Until then, and Thank you again for your time! =)
0
Jeff
Top achievements
Rank 1
answered on 11 Jul 2012, 05:41 PM
Here's a work around for the controls that do not support dataSource (that should).

        var dataSource = new kendo.data.DataSource({
            type: (dataType != null) ? dataType : null,
            transport: {
                read: {
                    url: dataSourceUrl,
                    // dataSourceCallback is used to fix the name of the JSONP call back so that it's not randomized (thereby nullifying any caching or 304ability
                    jsonpCallback: (dataSourceCallback != null) ? dataSourceCallback : ""
                }
            }
        });
        dataSource.fetch(function (data) {
            //alert(JSON.stringify(data.sender._pristine));
            // control is a dropdown that you want to bind to the remote data.  dataSelector is a property off of your JSON that you'd like to directly bind to.
            control.kendoDropDownList({
                autoBind: true,
                dataTextField: dataText,
                dataValueField: (dataValue != null) ? dataValue : dataText,
                template: (template != null) ? kendo.template($(template).html()) : null,
                dataSource: (dataSelector != null) ? eval("data.sender._pristine." + dataSelector) : data.sender._pristine
            });
        });

HTH,
Jeff
0
Dave
Top achievements
Rank 1
answered on 11 Oct 2012, 09:22 PM
Jeff got me thinking and this is how I implemented using a databsource, JSON

View code:
var menuDataSource = new kendo.data.DataSource({
      transport: { read: { url: "/Home/GetMenu", dataType: "json" } },
            schema: { data: "Data"}
       });
       
 menuDataSource.fetch(function (data) {
            //alert(JSON.stringify(data.sender._pristine));
            $("#menu2").kendoMenu({
                dataSource: data.sender._pristine.Data
            });
        });

Controller:
public class menu
{
public string text { get; set; }
public string url { get; set; }
public string imageUrl { get; set; }
public List<menu> items { get; set; }
}


public JsonResult GetMenu([DataSourceRequest] DataSourceRequest request)
{
List<menu> menu = new List<menu>();
menu menu1 = new menu();

menu1.text = "Menu Item Top 1";
List<menu> items = new List<menu>();
items.Add(new menu() { text = "subitem1" });
items.Add(new menu() { text = "subitem2" });
items.Add(new menu() { text = "subitem3" });
menu1.items = items;

menu.Add(menu1);

menu menu2 = new menu();
menu2.text = "Menu Item Top 2";
List<menu> items2 = new List<menu>();
items2.Add(new menu() { text = "subitem1" });
items2.Add(new menu() { text = "subitem2" });

menu submenu1 = new menu() {text = "subitem3"};
submenu1.items = new List<menu>();
submenu1.items.Add(new menu(){ text = "subsubitem1" });

items2.Add(submenu1);

menu2.items = items2;

menu.Add(menu2);

return Json(menu.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}


Tags
Data Source
Asked by
Henk Jelt
Top achievements
Rank 1
Answers by
Wirusiux
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Henk Jelt
Top achievements
Rank 1
Atanas Korchev
Telerik team
Jeff
Top achievements
Rank 1
mikel
Top achievements
Rank 1
Dave
Top achievements
Rank 1
Share this question
or