MVVM with DataSource to REST url

14 posts, 0 answers
  1. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jun 2008

    Posted 07 Jul 2012 Link to this post

    I have a grid I'd like to populate that uses a viewmodel that has a datasource with a REST url that has parameters for filtering the data.  I'm trying to set the url parameters, but I'm unable to get at them from the nested datasource.

    How can I make the nestd url dynamically reflect the changes in the parent observable?  My viewmodel is below, and any help is appreciated!

    Thanks, Dennis

    var viewModel = kendo.observable({
        artistFilter: "",
        titleFilter: "",
        genderFilter: "",
        artistFilterUrl: function () {
            if (this.get("artistFilter") == "") {
                return "";
            }
            return "&artist=" + this.get("artistFilter");
        },
        titleFilterUrl: function () {
            if (this.get("titleFilter") == "") {
                return "";
            }
            return "&title=" + this.get("titleFilter");
        },
        Url: function () {
            return this.get("baseUrl") + this.artistFilterUrl() + this.titleFilterUrl();
        },
        gridSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: function () { return viewModel.Url() }, // this is where I'm having trouble
                    dataType: "jsonp",
                    async: false
                }
            },
            schema: {
                data: "songs",
                total: "count",
                model: {
                    fields: {
                        Artist: { type: "string" },
                        Title: { type: "string" },
                        Category: { type: "string" },
                        Gender: { type: "string" },
                        CatalogNumber: { type: "string" }
                    }
                }
            },
            page: 1,
            pageSize: 50,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        })
    });
  2. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jun 2008

    Posted 15 Jul 2012 Link to this post

    I think my original question wasn't clear enough, so I'll try and take another crack at explaining what I'm trying to achieve:

    I have a couple of text boxes that are going to be used as filters to a call a service via a url.  When I describe this in the viewmodel below, the url is correct if I output it to a 3rd text area, but the datasoure which is attached to a grid doesn't seem to get refreshed.

    I've updated to the recently released kendoui (Q2 2012), and noticed the following when using this model with a grid (with virtual scrolling that loads 50 records per page):

    1. the initial binding with no filtering shows all my records correctly
    2. If I filter (which changes the url parameters) after initializing the grid, it seems that the url gets updated, but the original rows aren't cleared.  I can see this because the number of records drops and the scroll bar changes to reflect the filtered number of records.

    If anyone has an idea about this, or possibly an example of setting up an MVVM for a REST url, that would be really helpful.

    Thanks, Dennis

        

  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 18 Jul 2012 Link to this post

    Hello Dennis,

    I am afraid your scenario is unclear. Actually when the filter fields are changed, the url is not supposed to update automatically. Could you please provide a jsFiddle or jsBin demo where I can observe the problem? Please send me such example and I will check it right away.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jun 2008

    Posted 20 Jul 2012 Link to this post

    Alex - I've posted a fiddle for you to take a look at here.

    What I'm trying to do is update the grid to use filters for name/title and rebind the grid to reflect the filter state.

    This demonstrates the issue best:
    1) Load the fiddle above, and type into the Artist field Elvis.
    2) Scroll the list down and you'll notice that songs by Elvis show only at the end, and that the scrollbar will resize after the next page comes back from the server.

    I really appreciate your help!

    Thanks, Dennis
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 25 Jul 2012 Link to this post

    Hi Dennis,

    Thank you for the provided example.

    The behaviour is caused by the fact that after the fields are changed and the URL is rebuild, the dataSource.read() method is not executed (that is expected). Since you have enabled the virtual scrolling the read method is called after you scroll down the grid and as a result the filtered data is fetched and the scrollbar resizes.

    In order to make your example work as expected I performed the following changes:
    • add readUrl: "" field to the viewModel
    • modified the url function
      Url: function() {
          console.log("ViewModel Url");
          this.set("readUrl", this.get("baseUrl") + this.artistFilterUrl() + this.titleFilterUrl());
          this.gridSource.read(); //invoke the read method
          return this.get("readUrl");
      },
    • removed the duplicated grid initialization - I left only the jQuery plug-in like syntax
    • added autoBind: false to the grid configuration in order to avoid unnecessary read requests

    Here is a link to the updated version of your fiddle. I hope this helps.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jun 2008

    Posted 25 Jul 2012 Link to this post

    Alex - thank you for taking a look at this, but your fiddle doesn't work for me (nothing shows up at all in the grid).

    Am I missing something?

    Thanks, Dennis
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 26 Jul 2012 Link to this post

    Hello Dennis,

    What browser are you using? It seems to be working as expected on my side.
    Please check the screen cast that I made.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jun 2008

    Posted 26 Jul 2012 Link to this post

    Alex - thanks for the screencast.

    I tried it again just now and it does work with Chrome, but I had run it previously with IE9, where it doesn't.  The Chrome version works very well and thanks for looking into this.

    I wonder what is wrong, or what the difference is that IE9 isn't working?

    Thanks again, Dennis
  10. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jun 2008

    Posted 12 Aug 2012 Link to this post

    Alex - I tried your fiddle in the latest versions of IE, Firefox, and Chrome, and of these 3 browsers, only Chrome displays the example as shown in your screencast.

    I think this is a bug, don't you?

    Thanks, Dennis
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Aug 2012 Link to this post

    Hello, 

    I tested the fiddle in IE and Firefox. In both browsers everything works as expected.

    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!
  12. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jun 2008

    Posted 13 Aug 2012 Link to this post

    Alex - thanks for taking the time to make the screencasts.  I see that you are able to get the correct display for both IE and Firefox (I just got the update to firefox 12 and now can also see the proper display there).

    I appreciate your excellent support, and hopefully I'll find the error on my end somehow (I'll try to check my version of IE and make sure that is in fact the latest).

    Thanks again, Dennis
  13. Kevin
    Kevin avatar
    26 posts
    Member since:
    Mar 2012

    Posted 22 Mar 2014 in reply to Alexander Valchev Link to this post

    Sorry for replying to an old post, but I haven't found a better thread about this.  So, Alexander, suppose you now want to remove the <input id="url"/> from your example, because no one would really want that url showing.  I realize you could just make it hidden, but surely there's a way to do this without having some element bound to this Url function, yes?
  14. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 25 Mar 2014 Link to this post

    Hello Kevin,

    If you remove the input the Url function of the ViewModel will not be executed, respectively the DataSource will not be read:
    Url: function() {
        console.log("ViewModel Url");
        this.set("readUrl", this.get("baseUrl") + this.artistFilterUrl() + this.titleFilterUrl());
        this.gridSource.read();
        return this.get("readUrl");
    },

    The input is specific to the example provided by Dennis. The same scenario can work without the input but requires more changes than just removing the HTML input element. I am not sure what exactly you would like to achieve. Does your scenario matches the one demonstrated by Dennis? In case not please open a new support thread for it and provide the needed details. This forum topic is 2 years old and probably is outdated.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Kevin
    Kevin avatar
    26 posts
    Member since:
    Mar 2012

    Posted 28 Mar 2014 in reply to Alexander Valchev Link to this post

    Alexander, I've started a new thread here.

    kd
Back to Top
Kendo UI is VS 2017 Ready