MVVM with DataSource to REST url

[Dennis]

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: "",

    baseUrl: 'http://www.websitecom/api/MemberSongs?format=json&memberid=@ViewBag.ProfileID',

    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

    })

});

[Dennis]

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

    

[Alexander Valchev]

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

[Dennis]

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

[Alexander Valchev]

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

[Dennis]

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

[Alexander Valchev]

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

[Dennis]

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

[Dennis]

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

[Atanas Korchev]

Hello, 

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

Regards,
Atanas Korchev
the Telerik team

[Dennis]

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

[Kevin]

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?

[Alexander Valchev]

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

 

 

[Kevin]

Alexander, I've started a new thread here.

kd