Binding json webservice to menu - menu not populating

16 posts, 0 answers
  1. Henk Jelt
    Henk Jelt avatar
    19 posts
    Member since:
    Jun 2012

    Posted 23 May 2012 Link to this post

    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
  2. Wirusiux
    Wirusiux avatar
    2 posts
    Member since:
    Apr 2012

    Posted 23 May 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 23 May 2012 Link to this post

    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!
  5. Henk Jelt
    Henk Jelt avatar
    19 posts
    Member since:
    Jun 2012

    Posted 23 May 2012 Link to this post

    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
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 May 2012 Link to this post

    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!
  7. Henk Jelt
    Henk Jelt avatar
    19 posts
    Member since:
    Jun 2012

    Posted 25 May 2012 Link to this post

    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
  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 May 2012 Link to this post

    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!
  9. Henk Jelt
    Henk Jelt avatar
    19 posts
    Member since:
    Jun 2012

    Posted 25 May 2012 Link to this post

    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
  10. Jeff
    Jeff avatar
    18 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    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
  11. mikel
    mikel avatar
    3 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2012 Link to this post

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


  12. Henk Jelt
    Henk Jelt avatar
    19 posts
    Member since:
    Jun 2012

    Posted 09 Jul 2012 Link to this post

    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
  13. mikel
    mikel avatar
    3 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2012 Link to this post

    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! =)
  14. Henk Jelt
    Henk Jelt avatar
    19 posts
    Member since:
    Jun 2012

    Posted 09 Jul 2012 Link to this post

    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
  15. mikel
    mikel avatar
    3 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2012 Link to this post

    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! =)
  16. Jeff
    Jeff avatar
    18 posts
    Member since:
    Jun 2012

    Posted 11 Jul 2012 Link to this post

    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
  17. Dave
    Dave avatar
    17 posts
    Member since:
    Jan 2009

    Posted 11 Oct 2012 Link to this post

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


Back to Top
Kendo UI is VS 2017 Ready