GRID in popup

4 posts, 1 answers
  1. Andrey
    Andrey avatar
    49 posts
    Member since:
    Jul 2014

    Posted 11 Sep 2018 Link to this post

    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.

     

     

  2. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2495 posts

    Posted 13 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Andrey
    Andrey avatar
    49 posts
    Member since:
    Jul 2014

    Posted 13 Sep 2018 in reply to Viktor Tachev Link to this post

    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.

  4. Andrey
    Andrey avatar
    49 posts
    Member since:
    Jul 2014

    Posted 13 Sep 2018 in reply to Andrey Link to this post

    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!

Back to Top