Question

I have a MVC3 ASP.NET Project in which I am using jQuery and KendoUI for the view. I have defined the combobox, a dataSource for it and I am getting results from the controller with the JSON string in correct format within the dataSource.

The data returned as JSON string is about 500kb and the combobox is not showing anything. It just shows the loading icon in the right side of it. I think the large amount of data really is a problem here…

Can anyone help?

Bellow is a snippet of my code:

<input id="kendoCboClienti" />

<script type="text/javascript">
    $(document).ready(function () {
        clientiDS = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Clienti/",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    fields: {
                        id: { type: "string" },
                        ragioneSociale: { type: "string" }
                    }
                }
            }
        });

        $("#kendoCboClienti").kendoComboBox({
            placeholder: "Sceglie il cliente",
            dataTextField: "RAGIONE_SOCIALE",
            dataValueField: "ID",
            dataSource: clientiDS
        });
    });
</script>

And the JSON string look similar to this:

[  
    {ID:429,RAGIONE_SOCIALE:"AUTOTRASP.PORETTO G."},
    {ID:430,RAGIONE_SOCIALE:"P.G. JOHNNY IMPORT EXPORT"},
    {ID:431,RAGIONE_SOCIALE:"CONFARTIGIANATO TREVISO"},
    .....    
]

In jsFiddle works, but it is very very slow, unresponsive and the browser crashes sometimes for that amount of data.

Thanks!

Edit 1: I’ve modified the amount of data sent to the dataSource (only 10 records) and still doesn’t work. Maybe it’s a problem with the dataSource?

Answer 1

Yep, the problem was with the JSON format I was sending from the controller. I am using a 3rd party web service (based on ServiceStack). In the controller I was ‘reading’ the web response in a string (which was a JSON string), and pass it further. The problem was that the JSON string returned was between ” “, and somehow the dataSource cannot handle it.

So, my solution was based on your example above: I created a model, a collection and I returned the collection.

Result: everything worked perfect. The JSON returned was no longer between ” ” and the dataSource object was initialized properly.

Here is the code:

ClientiController.cs

public class ClientiController : Controller
{            
        public JsonResult Index()
        {
            StreamReader sr = null;
            string json = string.Empty;

            try
            {
                WebRequest request = WebRequest.Create("urlGoesHere");

                using (WebResponse response = request.GetResponse())
                {
                    sr = new StreamReader(response.GetResponseStream(), true);
                    json = sr.ReadToEnd();
                }
            }
            catch { return Json("", JsonRequestBehavior.AllowGet); }

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            ClientiCollection collection = serializer.Deserialize<ClientiCollection>(json);

            return Json(collection, JsonRequestBehavior.AllowGet);
        }

}

Client.cs

public class Client
{
        public string ID { get; set; }
        public string RAGIONE_SOCIALE { get; set; }
}

ClientiCollection.cs

public class ClientiCollection
{
        public IEnumerable<Client> ClientiList { get; set; }
}

HTML

<input id="kendoCboClienti" />

<script type="text/javascript">
    $(document).ready(function () {
        var clientiDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Clienti/",
                    dataType: "json"
                }
            },
            schema: {
                data: "ClientiList"
            }
        });

        $("#kendoCboClienti").kendoComboBox({
            dataTextField: "RAGIONE_SOCIALE",
            dataValueField: "ID",
            dataSource: clientiDataSource,
        });
    });
</script>

However, I have ~8000 records to be displayed and the combobox it’s a bit slow (~1.5 sec on opening). I’m not sure if I could somehow improve the response of it, without modifying the server in any way.

P.S. Thanks a lot, Igorrious!