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

Binding json webservice to menu - menu not populating

15 Answers 480 Views

Data Source

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

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

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

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

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! =)

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

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Binding json webservice to menu - menu not populating

15 Answers, 1 is accepted