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?
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();
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.
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());
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

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
PratikShah111Author Commented:
got it. issue resolved. thanks for your help Leakim
leakim971PluritechnicianCommented:
it was the data right?
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

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
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.