Need help with j-query

I am using kendo's "Expand and Collapse All Detail Rows in Grid" for one of my pages.  Here is the page that I am using as example : https://docs.telerik.com/kendo-ui/knowledge-base/grid-how-to-expand-and-collapse-details-rows.

Everything works as expected for me except expand and collapse button. I have made some changes to javascript in order to pull the data from my database. Pasted below is my code.

I am getting an error on this line when i click the expand button : this.expandRow(this.tbody.find("tr.k-master-row").first());
Error :  uncaught typeerror cannot read property 'find' of undefined

$(document).ready(function () {
    $("#startDate").kendoDatePicker();

    $("#endDate").kendoDatePicker();


          var element = $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "/Test/DashboardParentGrid",
                        type: "POST",
                        complete: function () { $(".k-grid-pager").show(); }
                    }
                
      },
                pageSize: 10,
                schema: {
                    model: {
                        fields: {
                           // isOfac: { type: "boolean" },
                           totalCases: { type: "number" },
                           avghandletime: { type: "int" },
                           team: { type: "string" },
                           qcpass: { type: "number" },
                           qcfail: { type: "number" },
                           caseTypeID: { type: "number" },
                           qcsuccesspetrcent: { type: "number" },
                            managerSID: { type: "string" },
                          
                        }
                    }
                },
      
      serverSorting: true
    },
    height: 600,
    sortable: true,
    pageable: true,
              detailInit: detailInit,
              dataBound: function () {
                  this.expandRow(this.tbody.find("tr.k-master-row").first());
              },
            
        columns: [
      {
                field: "team",
                title: "Team",
        width: "110px"
      },
      {
          field: "totalCases",
        title: "Total Cases",
        width: "110px"
      },
      {
          field: "avghandletime",
       title: "Average Handle Time (mins)",
        width: "110px"
      },
      {
          field: "qcpass",
        title: "QC Pass",
        width: "110px"
      },
            {
                field: "qcfail",
                title: "QC Fail",
                width: "110px"
            },
            {
                field: "qcsuccesspetrcent",
                title: "QC Fail%",
                width: "110px"
            }
     // {
          //field: "Status",
       // title: "QC Fail %",
       // width: "110px"
     // }
    ]
  });
});

function detailInit(e) {
   
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                        url: "/Test/DashboardChildGrid",
                        type: "POST",
                        data: { ManagerSID: e.data.managerSID },
                        }
                    },
                    pageSize: 10,
                    schema: {
                        model: {
                            fields: {
                                
                                totalCases: { type: "number" },
                                avghandletime: { type: "int" },
                                analyst: { type: "string" },
                                qcpass: { type: "number" },
                                qcfail: { type: "number" },
                                caseTypeID: { type: "number" },
                                qcsuccesspetrcent: { type: "number" },
                               userID: { type: "string" },

                            }
                        }
                    },

                    serverSorting: true
                },
                height: 400,
                sortable: true,
                pageable: true,
                
                columns: [
                   // { field: "OrderID", width: "110px" },
                    { field: "analyst", title: "Analyst", width: "110px", template: "<a href='/AnalystDashboard/Index?caseID=#=userID #'>#= analyst #</a>",},
                    { field: "totalCases", title: "Total Cases", width: "110px"},
                    { field: "avghandletime", title: "Avg Handle Time (mins)", width: "110px" },
                    { field: "qcpass", title: "QC Pass", width: "110px"},
                    { field: "qcfail", title: "QC Fail", width: "110px" },
                    { field: "qcsuccesspetrcent", title: "QC Fail%", width: "110px" },
                    
                ]
    });
    $('#expand').click(function (e) {
        var grid = $("#grid").data("kendoGrid");
        $(".k-master-row").each(function (index) {
            grid.expandRow(this);
        });
    })

        }



        $('#collapse').click(function(e){
          var grid = $("#grid").data("kendoGrid");
          $( ".k-master-row" ).each(function( index ) {
            grid.collapseRow(this);
        });
      })

Open in new window

PratikShah111Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
replace :
this.tbody.find("tr.k-master-row").first()
by :
$("tbody",this).find("tr.k-master-row").first();
or :
$(this).find("tr.k-master-row").first();
0
PratikShah111Author Commented:
Hi Leakim,

I tried the above suggestions but they dont work. Javascript is not throwing any errors but its also not expanding /collapsing rows.
0
PratikShah111Author Commented:
Hi Leakim,

I take it back , i do get an error

Uncaught TypeError: this.expandRow is not a function

this is what i have now

this.expandRow($("tbody", this).find("tr.k-master-row").first());
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

leakim971PluritechnicianCommented:
I tried your code and it worked fine on my side
work fine
but I don't have your code server side and your data. so maybe you're returning bad data
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PratikShah111Author Commented:
can i see your code please
1
PratikShah111Author Commented:
got it. issue resolved. thanks for your help Leakim
1
leakim971PluritechnicianCommented:
it was the data right?
0
leakim971PluritechnicianCommented:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.2.620/styles/kendo.blueopal.min.css" />
    <script src="http://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#startDate").kendoDatePicker();

            $("#endDate").kendoDatePicker();


            var element = $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "Test/DashboardParentGrid.php",
                            type: "POST",
                            complete: function () { $(".k-grid-pager").show(); }
                        }

                    },
                    pageSize: 10,
                    schema: {
                        model: {
                            fields: {
                                // isOfac: { type: "boolean" },
                                totalCases: { type: "number" },
                                avghandletime: { type: "int" },
                                team: { type: "string" },
                                qcpass: { type: "number" },
                                qcfail: { type: "number" },
                                caseTypeID: { type: "number" },
                                qcsuccesspetrcent: { type: "number" },
                                managerSID: { type: "string" },

                            }
                        }
                    },

                    serverSorting: true
                },
                height: 600,
                sortable: true,
                pageable: true,
                detailInit: detailInit,
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },

                columns: [
                    {
                        field: "team",
                        title: "Team",
                        width: "110px"
                    },
                    {
                        field: "totalCases",
                        title: "Total Cases",
                        width: "110px"
                    },
                    {
                        field: "avghandletime",
                        title: "Average Handle Time (mins)",
                        width: "110px"
                    },
                    {
                        field: "qcpass",
                        title: "QC Pass",
                        width: "110px"
                    },
                    {
                        field: "qcfail",
                        title: "QC Fail",
                        width: "110px"
                    },
                    {
                        field: "qcsuccesspetrcent",
                        title: "QC Fail%",
                        width: "110px"
                    }
                    // {
                    //field: "Status",
                    // title: "QC Fail %",
                    // width: "110px"
                    // }
                ]
            });
        });

        function detailInit(e) {

            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "Test/DashboardChildGrid.php",
                            type: "POST",
                            data: { ManagerSID: e.data.managerSID },
                        }
                    },
                    pageSize: 10,
                    schema: {
                        model: {
                            fields: {

                                totalCases: { type: "number" },
                                avghandletime: { type: "int" },
                                analyst: { type: "string" },
                                qcpass: { type: "number" },
                                qcfail: { type: "number" },
                                caseTypeID: { type: "number" },
                                qcsuccesspetrcent: { type: "number" },
                                userID: { type: "string" },

                            }
                        }
                    },

                    serverSorting: true
                },
                height: 400,
                sortable: true,
                pageable: true,

                columns: [
                    // { field: "OrderID", width: "110px" },
                    { field: "analyst", title: "Analyst", width: "110px", template: "<a href='/AnalystDashboard/Index?caseID=#=userID #'>#= analyst #</a>",},
                    { field: "totalCases", title: "Total Cases", width: "110px"},
                    { field: "avghandletime", title: "Avg Handle Time (mins)", width: "110px" },
                    { field: "qcpass", title: "QC Pass", width: "110px"},
                    { field: "qcfail", title: "QC Fail", width: "110px" },
                    { field: "qcsuccesspetrcent", title: "QC Fail%", width: "110px" },

                ]
            });
            $('#expand').click(function (e) {
                var grid = $("#grid").data("kendoGrid");
                $(".k-master-row").each(function (index) {
                    grid.expandRow(this);
                });
            })

        }

        $('#collapse').click(function(e){
            var grid = $("#grid").data("kendoGrid");
            $( ".k-master-row" ).each(function( index ) {
                grid.collapseRow(this);
            });
        })
    </script>
</head>
<body>
<div id="example">
    <button class="k-button" id="expand">Expand All</button>
    <button class="k-button" id="collapse">Collapse All</button>
    <div id="grid"></div>
</div>
</body>
</html>

Open in new window


parent :
<?php
header('Content-Type: application/json');
$arr = array(array("Team"=>"Gwadabikers","Total_Cases"=>"117","avghandletime"=>"10:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"),array("Team"=>"Gwadabikers","Total_Cases"=>"117","avghandletime"=>"10:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"),array("Team"=>"Gwadabikers","Total_Cases"=>"117","avghandletime"=>"10:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"),array("Team"=>"Gwadabikers","Total_Cases"=>"117","avghandletime"=>"10:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"),array("Team"=>"Gwadabikers","Total_Cases"=>"117","avghandletime"=>"10:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"));
echo json_encode($arr);

Open in new window


child :
<?php
header('Content-Type: application/json');
$arr = array(array("analyst"=>"1234","totalCases"=>"21090","avghandletime"=>"15:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"),array("analyst"=>"1234","totalCases"=>"21090","avghandletime"=>"15:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"),array("analyst"=>"1234","totalCases"=>"21090","avghandletime"=>"15:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"),array("analyst"=>"1234","totalCases"=>"21090","avghandletime"=>"15:10","qcpass"=>"gb","qcfail"=>"okil","qcsuccesspetrcent"=>"78%"));
echo json_encode($arr);

Open in new window

0
PratikShah111Author Commented:
no it was not the data. It was silly mistake on my side. the javascript brackets were not closed properly and so it was erroring out
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.