on adding items to the datasource the filter textboxes resets

[Dennis]

Hi,

i fill a grid step by step with many data from a database.

on load the grid is empty. an javascript fills the grid with a result of an ajax-request.

while he is loading the items every "tick" of inserting new items to the datasource, the grid lost the user-written text in the filters, so the user have to rewrite it.

you also lost the selecection of an row.

it looks like the grid will be rebuild in the DOM every time i add an item.

is there any mechanic to prevent this?

thats my grid:

@(Html.Kendo().Grid<Object>().Name("KomplettabbzuegeGrid")

    .ToolBar(toolBar => toolBar.Custom()

                               .Text("<i class='icon-download'></i>Exportieren")

                               .HtmlAttributes(new { id = "export" })

                               .Url(Url.Action("Export", "Vorbereitung", new { page = 1, pageSize = "~", filter = "~", sort = "~", initGruppenId = ViewBag.CurrKompfGrp }))

            )

    .Columns(columns =>

    {

        columns.Bound("Vfnr").Title("VFNR").Filterable(true);

        columns.Bound("Betriebsname").Title("Betrieb").Filterable(true);

        columns.Bound("Ort").Title("Ort").Filterable(true);

        columns.Bound("HochgeladenAmDatum").Format("{0:dd.MM.yyyy hh:mm}").Title("Hochgeladen am").Filterable(false);

        columns.Bound("Status").Title("Status")

            .ClientTemplate("#= (Status == 2 ? 'offen': " +

                            "(Status == 3 ? 'akzeptiert':" +

                            "(Status == 4 ? 'abgelehnt': 'unbekannt'" +

                            "))) #")

                            .Filterable(false);

        columns.Bound("Terminstellung").Title("Terminstellung")

            .ClientTemplate("#= (Terminstellung == 'A' ? 'Welle 1': " +

                            "(Terminstellung == 'B' ? 'Welle 2':" +

                            "(Terminstellung == 'C' ? 'Welle 3': 'unbekannt'" +

                            "))) #")

                            .Filterable(false);

    })

    .Sortable(x => x.Enabled(true))

    .Pageable(x => x.Enabled(true))

    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

        .Events(c => c.DataBound("function (e) {CollapseAllRows('#KomplettabbzuegeGrid');}").DataBound("onDataBound"))

    .Filterable()

    .Resizable(c => c.Columns(true))

    .Groupable()

    .DataSource(dataSource => dataSource

        .Ajax()

        .ServerOperation(false)

        .Sort(sort => sort.Add("HochgeladenAmDatum").Descending())

           ))

and thas the javascript wich adds the lines:

function loadGridData(gridDataSource, url, data)

{

    if(typeof data['skip'] === "undefined" || typeof data['take']  === "undefined")

        return;

     

        if(grpId != data["initGruppenId"]) {

            return;

        }

    $.ajax(

    {

        type: 'POST',

        url: url,

        dataType: 'json',

        data: data,

        success: function (result)

                 {

                    if(grpId != data["initGruppenId"])

                        return;

                 

                    if (result.Data == null)

                        return;

             

                    for (var i = 0; i < result.Data.length; i++)

                    {

                        gridDataSource.add(result.Data[i]);

                    }

                    data['skip'] = data['skip'] + data['take'];

                    loadGridData(gridDataSource, url, data);

                 },

        error: function (result)

               {

                   return;

               }

    });

}

Thanks