GRID in popup

[Andrey]

Hello,

I am having a strange problem and cannot find any solution. I have a simple grip in popup:

<script>
function createDepositsTable() {
$("#depositsTable").kendoGrid({
height: 200,
scrollable: true,
dataSource: {
data: depositdata
},
resizable: true,
columns: [
{
field: "TransactionDate",
title: "Date",
type: "date",
headerAttributes: { style: "vertical-align: top;white-space: normal" },
format: "{0:MM-dd-yyyy}",
attributes: { class: "text-left" }
}, {
field: "Value",
title: "Amount",
headerAttributes: { style: "vertical-align: top;white-space: normal" },
format: "{0:c2}",
attributes: { class: "text-right" }
}],
});
console.log(depositdata);
var grid = $("#depositsTable").data("kendoGrid");
grid.bind();
}

Another dropdown selects an account and gets the data. Initially 9 records populated in datasource for grid and they displayed fine. If I select another account, 2 records populated and I can see them in console.log(depositdata); => 2 records, but the grid will display the old ones plus new = 11. Any other selection will just add new records to the end of the grid. I did try re-bind: grid.bind();

re-create:

$(document).ready(createDepositsTable);
$(document).bind("kendo:skinChange", createDepositsTable);

refresh, but nothing helped. Do you have any idea what could be done here?

Thanks.

 

 

[Viktor Tachev]

Hi Andrey,

From the provided description I guess that the createDepositsTable method is called when an option in an external dropdown is selected. The method will create a Grid widget every time it is called. Thus, the second time a new Grid will be created over the existing widget and that can produce unexpected results. 

If you would like to just change the Grid data I would suggest creating the Grid outside the method. This will ensure that the Grid will be created only once. Setting the data can be done with the dataSource.data() method. 

Give the modification a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Andrey]

Hi Viktor,

Thanks for your answer. One question I have is, is there any way to clean up an existing grid or to remove all records from it?

Thanks.

[Andrey]

I've found a "fix" so please disregard my question. The solution was to remove "class="k-grid-content" from a DIV that holds the grid.

Thanks Viktor!