Populating a Kendo UI Combobox with big JSON string

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

If you want to improve the response time, you can try this...

$(document).ready(function () {
    var clientiDataSource = new kendo.data.DataSource({
        pageSize: 20,
        transport: {
            read: {
                url: "/Clienti/",
                dataType: "json"
            }
        },
        schema: {
            data: "ClientiList"
        }
    });

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

Just add paging to your dataSource. I Have Combos with 20000+ rows and it works fantastic.

Answer 2

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!

Answer 3

Is the datasource's url correct? If you are using mvc, url should be /controller/view/. ie: url: "/Home/Clienti/"

--EDIT--

Here is a full example, project Url: 'http://localhost:52794/Home/ComboBox'

Controller: Home

View: ComboBox

ComboBox view code:

<input id="kendoCboClient" />

<script type="text/javascript">
    $(document).ready(function () {
        clientDS = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Home/JsonData/",  //Note the URL path!
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    fields: {
                        EmployeeId: { type: "number" },
                        name: { type: "string" }
                    }
                }
            }
        });

        $("#kendoCboClient").kendoComboBox({
            placeholder: "Select a name...",
            dataTextField: "Name",
            dataValueField: "EmployeeId",
            dataSource: clientDS
        });
    });
</script>

Model class:

public class Employee
{
    public int EmployeeId { get; set; }
    public string Name { get; set; }
}

Controllers:

public ActionResult ComboBox()
{
    return View();
}

public JsonResult JsonData()
{
    List<Employee> list = new List<Employee>();
    Employee employee = new Employee() { EmployeeId = 1, Name = "John Smith" };
    list.Add(employee);
    employee = new Employee() { EmployeeId = 2, Name = "Ted Teller" };
    list.Add(employee);
    return Json(list, JsonRequestBehavior.AllowGet);
}

-- EDIT --

Another way of returning json:

public ActionResult JsonData()
{
    List<Employee> list = new List<Employee>();
    Employee employee = new Employee() { EmployeeId = 1, Name = "John Smith" };
    list.Add(employee);
    employee = new Employee() { EmployeeId = 2, Name = "Ted Teller" };
    list.Add(employee);

    JavaScriptSerializer serializer = new JavaScriptSerializer();
    var output = serializer.Serialize(list);

    return Content(output); 
}

-- EDIT --

One last example of just a plain json string:

public ActionResult JsonData()
{
    String employeesJson = "[{\"EmployeeId\":1,\"Name\":\"John Smith\"},{\"EmployeeId\":2,\"Name\":\"Ted Teller\"}]";
    return Content(employeesJson);
}