URGENT: Preparing Observable Collection from remote resources

[Shiva]

Hi Team,

I want to prepare an observable collection which will be populated from remote resources. I tried so many ways to do so using your web demos and other help but failed in all corner.

Here is what I want to do:

I want to have an observable collection somewhat like:

var viewModel = kendo.observable({
            gridSource: [
// Grid Data
                        ],
            cityDataSource: [
// City dropdown data
                            ]
});

In above code, both gridSource and cityDataSource will be populated by remote web service which will return data in JSON format.

After that, I want to bind my viewModel to my view.

I tried doing so in so many ways but all in vain.

My web service method looks like:

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public ADVBrokerList[] GetADVBrokerList()
        {
            try
            {
                string jsonData = string.Empty;

                objService = new SourceDataServices();
                ADVBrokerList[] data = objService.GetADVBrokerList();

                return data;
            }
            finally
            {
                objService = null;
            }
        }

Although I'm able to populate a single data source using below code:

var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        // the remote service url
                        url: "http://localhost/WebServices/MyWebService.asmx/GetADVBrokerList",
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        dataType: "json"
                    }
                }, // -- END OF TRANSPORT
                // describe the result format
                schema: {
                    data: "d"
                },
                change: function () { // subscribe to the CHANGE event of the data source
                    $("#main").html(kendo.render(template, this.view()));
                }
            }); // -- END OF DATASOURCE BLOCK

            dataSource.read();

But when I try to put this datasource inside an observable collection, it fails.

Can you please urgently share complete working code with me on how to achieve the above said functionality? Please share a sample code. This is really urgent and I'm really short of time.

Please please help me.

Thanks,
Shiva 

[Shiva]

Dear Community,

Please reply to my query. I need it to be resolved urgently. I can' get it done using online demos. Please help me with a solution which includes a web service as well if you wish so that I can verify what am I doing wrong with it.

Please help me.

Best Regards,
Shiva 

[Alexander Valchev]

Hi Shiva,

I already answered to your support ticket on the same subject. I will paste my reply here as well so the other users, who encounter similar problems, would be able to read it.

Since you said that your service is returning a valid Json and you are able to populate the dataSource, I do not think that the problem is related to the web method. Most probably there is something wrong with the binding declarations, but unfortunately you did not provided the code that is used to bind the widgets to the viewModel, so I cannot tell you where the issue comes from.

In order to achieve the described functionality you need to indicate the viewModel field that represents the dataSource and state its role through a data attributes:

<div data-role="grid"
    data-columns='["ProductName", "QuantityPerUnit", "Discontinued"]'
    data-bind="source: gridSource">
</div>

For convenience I made an example that shows a sample implementation of your scenario. In addition I would suggest to take a look at these online demos ( link 1, link 2 ) as they illustrate similar functionality.


Greetings,
Alexander Valchev
the Telerik team