CODEWITHSUNDEEP
jqueryhtmlajaxknockout.js
James
James

Reputation: 1945

Knockout loading data very slowly

I am calling WCF service to load data via jquery ajax calls. WCF service returns data very fast but knockout is loading that data very slowy. Below is my call to wcf service using jquery ajax

 function loadData(id) {
        var input =
            {
                Id: id
            };


        $.ajax({
            url: "../Service/Table/TableData",
            type: "PUT",
            contentType: 'application/json',
            processData: false,
            data: JSON.stringify(input),
            error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert(errorThrown);
            },
            success: function (allData) {
                var mappedData= $.map(allData, function (item) {

                    return new TableData(item);
                });
                self.TableDataList(mappedData);



            }
        });

    }

Below is my view

<div  style="overflow: hidden;margin-top: 30px;margin-left: 10px;float:left;" >

            <table style="width: 100%" >

                <colgroup>
                    <col   />
                    <col  />

                    <col/>
                </colgroup>

                <thead><tr>

                           <th style="padding: 0px">Id </th>
                           <th style="padding: 0px">Name</th>

                       </tr>

                </thead>

            </table>
            <div style="overflow: auto;height: 490px;">
                <table id ="Table1" class="Hover" style="width: 100%;" >
                    <colgroup>
                        <col   style="width: 20px"/>
                        <col style="width: 80px"/>

                        <col/>
                    </colgroup>
                    <tbody data-bind="foreach: TableDataList">

                        <tr>

                            <td style="padding: 0px;text-align: left" data-bind="text: Id"  ></td>
                            <td style="padding: 0px;" data-bind="text: Name "></td>

                        </tr>   


                    </tbody>
                </table>
            </div>

I am loading about 20000 records and it takes 2 min to load page. How to avoid this?

UPDATE1

Will using jquery template solve the issue or need to do paging?

UPDATE2

Here is my code for TableData class

 function TableData (data) {
        this.Id = ko.observable(data.Id);
        this.Name = ko.observable(data.Name);
        this.LastName = ko.observable(data.LastName );
        this.DateOfBirth = ko.observable(data.DateOfBirth );
        this.Age= ko.observable(data.Age);


    }

Upvotes: 3

Views: 831

Answers (2)

Damien
Damien

Reputation: 8987

Can we see the code of TableData class ? I think you create a lot of observables for each property in this class.

As the view does't contain any input field I guess you don't want modify the data.

That's what I thought. TableData class is what slow down your code. The TableData class is useless because you don't have any computed in it. And because you don't want to modify the data, you don't need observables for TableData properties.

Try to replace the success function by this one.

success: function (allData) {
    self.TableDataList(allData);
}

See fiddle

Upvotes: 1

vendettamit
vendettamit

Reputation: 14687

Paging is the best solution for this as @nemesv. Processing 20000 records on client side will have its own cost in terms of performance while rendering the content on page so it's not knockout framework which is performing slow. So you can also use on demand loading "onScreenscroll" or something like that to get your page speedup.

Upvotes: 3

Related Questions