This is a migrated thread and some comments may be shown as answers.

Wrong row expanded when add/editing record in sub grid

9 Answers 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lei
Top achievements
Rank 1
Lei asked on 04 May 2020, 03:36 AM

Hello,

I tried to add/edit data in dynamically added grids of a main grid. See code below.  When I added a new record in sub grid, the selected row in parent grid was collapsed and the first row was expanded. You can see screen captures in attached pdf file. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/_content/Plat.Core.UI.RazorComponent//Lib/Kendo/css/kendo.common-bootstrap.min.css">
    <link rel="stylesheet" href="/_content/Plat.Core.UI.RazorComponent//lib/kendo/css/kendo.bootstrap.min.css">
    <script src="/_content/Plat.Core.UI.RazorComponent/Lib/jquery/jquery-3.3.1.js"></script>
    <script src="/_content/Plat.Core.UI.RazorComponent/Lib/jquery/jquery-migrate-3.0.1.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/Lib/KendoNew/js/kendo.all.min.js"></script>
    
    <title></title>
    
</head>
<body>
    <div id="divMain">
       <div id="dsgrid" class="grid"
                             data-role="grid"
                             data-sortable="true"
                             data-toolbar="['create']"
                             data-detail-init="viewModel.dsgrid_detailInit"
                             data-bind="source: dsSource, events: { dataBound: ds_dataBound }"
                             data-editable='{"mode": "popup" }'
                             data-columns='[
                                 {"field":"Name","title":"Name"},
                                 {"field":"Title","title":"Title"},
                                 {"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"}
                                 ]'
                             data-detail-template='dssubgrid'
                             data-scrollable="false">

        </div>
    </div>

    <script>
        
        var viewModel;
        $(document).ready(function () {
            var reobj = {};
            reobj.Sources = [];

            viewModel = kendo.observable({
                dsSource: new kendo.data.DataSource({
                    data: reobj.Sources,
                    schema: {
                        model: {
                            id: "Name",
                            fields: {
                                Name: { validation: { required: true } },
                                Title: { validation: { required: true } },
                                TableName: { editable: true },
                                GetDataUrl: { editable: true },
                                TextField: { editable: true },
                                ValueField: { editable: true }
                            }
                        }
                    }
                }),

                dsgrid_detailInit: function (e) {
                    if (!e.data.Values) e.data.Values = [];
                    var ds = new kendo.data.DataSource({
                        data: e.data.Values,
                        schema: {
                            model: {
                                id: "Text",
                                fields: {
                                    Text: { editable: true, validation: { required: true } },
                                    Value: { editable: true, validation: { required: true } }
                                }
                            }
                        }
                    });
                    e.detailRow.find(".grid").kendoGrid({
                        dataSource: ds,
                        editable: "popup",
                        toolbar: ['create'],
                        columns: [{
                            title: "Value",
                            field: "Value"
                        }, {
                            title: "Text",
                            field: "Text"
                        }, {
                            command: ["edit", "destroy"]
                        }
                        ]
                    });
                },


                ds_dataBound: function (e) {
                    e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
                },


            });

            kendo.bind($("#divMain"), viewModel);
        });

    </script>
    <script id="dssubgrid" type="text/x-kendo-template">
        <div class='grid'></div>
    </script>
  </body>
</html>

How can I solve this issue?

Thanks

Lei

 

 

 

9 Answers, 1 is accepted

Sort by
0
Lei
Top achievements
Rank 1
answered on 04 May 2020, 08:14 AM
I found the reason of the issue. It's caused by the code of dataBound. Remove it and it works properly.
0
Lei
Top achievements
Rank 1
answered on 04 May 2020, 08:27 AM

Sorry. After removing the dataBound, the sub grid cannot keep data. So it should expand current row not the first one. But how can I get the current row expanded?

Thanks

0
Martin
Telerik team
answered on 05 May 2020, 05:04 PM

Hello Lei,

Thank you for the provided resources. 

Unfortunately I am not sure I understood the scenario entirely. Could you please modify this Dojo example to replicate the issue you are experiencing and provide some additional information about it? I will then happily assist you.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Lei
Top achievements
Rank 1
answered on 07 May 2020, 12:15 AM

Hello Martin,

Thanks for your response. 

You can see the issue in this Dojo example: http://dojo.telerik.com/egemIqIb/5. As you can see, I can add rows to both master and detail grids successfully. The issue is when I add a new item into a detail grid, the first row of master grid is expanded. I hope the current row of master keep expanded. 

Hope I make it clear.

Thanks

Lei

 

0
Martin
Telerik team
answered on 08 May 2020, 04:24 PM

Hello Lei,

Thank you for the example.

The reason for the behavior is because the first master row is being expanded each time the dataBound event triggers. That would occur every time a new row is added. To prevent that from happening, you can use the code from the dataBound event in the save event as well as in the edit event, if the event is triggered due to a new row.

Here is the modified example for reference.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Lei
Top achievements
Rank 1
answered on 09 May 2020, 02:17 PM

Hello Martin,

Thanks for your reply.

It's much better. But there are strill some issues. First, the master row is collapsed when I click "Add new row" (or edit) of detail grid. Can it keep the current master row expanded? Second, when I expand a master row and then collapse it, there is an error:

VM6364 kendo.all.min.js:29 Uncaught TypeError: n is not a function
    at init.handlers.<computed> (VM6364 kendo.all.min.js:29)
    at init.trigger (VM6364 kendo.all.min.js:25)
    at HTMLAnchorElement.<anonymous> (VM6364 kendo.all.min.js:61)
    at HTMLTableElement.dispatch (jquery-1.12.3.min.js:3)
    at HTMLTableElement.r.handle (jquery-1.12.3.min.js:3)

Regards

 

Lei

0
Martin
Telerik team
answered on 13 May 2020, 05:58 AM

Hello Lei,

The error is caused because I have removed the event handler for the detailCollapse event:

data-bind="source: dsSource, events: { detailCollapse: onDetailInit, edit: onEdit , save:onSave}"

If you remove it, the error will not occur.

I am currently reviewing how to keep the master row expanded. I will get back to you when I have some more information to share.

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Accepted
Martin
Telerik team
answered on 13 May 2020, 09:11 AM

Hello Lei,

The master row is getting collapsed because the dataBound event is trigger. Thus, the Grid is re-rendered and the rows are collapsed. In order to prevent that, you can refer to this How-To article which demonstrates how to persist expanded state after the dataBound event is triggered.

Let me know if you have any questions.

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Lei
Top achievements
Rank 1
answered on 14 May 2020, 11:43 PM

Hello Martin,

Thanks! It works now.

Best Regards,

Lei

 

Tags
Grid
Asked by
Lei
Top achievements
Rank 1
Answers by
Lei
Top achievements
Rank 1
Martin
Telerik team
Share this question
or