Group not returning data

2 posts, 0 answers
  1. Rocio
    Rocio avatar
    28 posts
    Member since:
    Dec 2015

    Posted 25 Jul Link to this post

    Thank you in advance for any feedback!

    I got a table with a template binding, and I am using this table as a grid.

    I would like to be able to group the data, but when dragging column to group no data is being returned.

     

     

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <meta charset="utf-8" />

        <link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.min.css" />
        <link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.mobile.min.css" />

        <link rel="stylesheet" href="css/FHFAFlexApp.css"  />

        <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>
        <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>

        <script type="text/javascript" src="__vti_fhfa/environment.js"></script>
        <script type="text/javascript" src="scripts/FHFA/FHFAGlobals.js"></script>
        <script type="text/javascript" src="scripts/FHFA/fhfa.vm.js"></script>
        <script type="text/javascript" src="scripts/auditObjects.js"></script>
        <script type="text/javascript" src="scripts/VM/auditVM.js"></script>
        <script type="text/javascript" src="scripts/FHFA/fhfa.object.js"></script>

        <script type="text/javascript" src="scripts/Elements/splitterObj.js"></script>
        <script type="text/javascript" src="scripts/Elements/DragObj.js"></script>
        <script type="text/javascript" src="scripts/webServiceCalls.js"></script>
        <script type="text/javascript" src="scripts/workflowGlobals.js"></script>
        <script type="text/javascript" src="scripts/default.js"></script>
    </head>
    <body>
        <div id="app-main">
            <div id="vertical">
                <div>
                    <header>
                        Audit Logs
                        <div class="app-version">v. <span data-bind="text: appVersion"></span></div>
                    </header>
                </div>
                <div id="middlePane" style="width: 100%">
                    <div id="horizontal" style="height: 100%; width: 100%">
                        <div>
                            <div id="left-pane">
                                <p>
                                    Inner splitter :: left pane
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="vertical" style="height: 100%; width: 100%">
                                <div id="center-top">
                                    <div class="pane-content">
                                        <div>
                                            <table id="grid" class="app-list" cellpadding="0" cellspacing="0" style="width:100%">
                                                <colgroup>
                                                    <col />
                                                    <col />
                                                    <col />
                                                    <col />
                                                    <col />
                                                    <col />
                                                </colgroup>
                                                <thead>
                                                    <tr id="columns">
                                                        <th class="nowrap, column" ><a id="col1" class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditTypeID">Type</a></th>
                                                        <th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditDate">Date</a></th>
                                                        <th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="applicationName">Application</a></th>
                                                        <th class="nowrap, column" ><a id="col4" class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditUser">User</a></th>
                                                        <th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="iPAddress">IP Address</a></th>
                                                        <th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditDescription">Description</a></th>
                                                   </tr>
                                                </thead>
                                                <tbody data-bind="source: audit.items" data-template="loglist-row-template"></tbody>
                                            </table>
                                            <div data-bind="visible: audit.hasNone" class="app-noitems">There are no items to display.</div>
                                            <script id="loglist-row-template" type="text/x-kendo-template">
                                                <tr class="app-list-row app-list-hoverEnabled">
                                                    <td class="app-list-cell"><span data-bind="text: auditTypeID"></span></td>
                                                    <td class="app-list-cell"><span data-bind="datetimeText: auditDate"></span></td>
                                                    <td class="app-list-cell"><span data-bind="text: applicationName"></span></td>
                                                    <td class="app-list-cell"><span data-bind="text: auditUser"></span></td>
                                                    <td class="app-list-cell"><span data-bind="text: iPAddress"></span></td>
                                                    <td class="app-list-cell"><span data-bind="text: auditDescription"></span></td>
                                                </tr>
                                            </script>
                                        </div>
                                    </div>
                                </div>
                                <div id="center-bottom">
                                    <div class="pane-content">
                                        <table style="width: 100%">
                                            <tr>
                                                <th class="vHeading">AuditID:</th>
                                                <td class="app-list-cell"><span data-bind="text: auditID"></span></td>
                                            </tr>
                                            <tr>
                                                <th class="vHeading">Type:</th>
                                                <td class="app-list-cell"><span data-bind="text: auditTypeID"></span></td>
                                            </tr>
                                            <tr>
                                                <th class="vHeading">Date:</th>
                                                <td class="app-list-cell"><span data-bind="datetimeText: auditDate"></span></td>
                                            </tr>
                                            <tr>
                                                <th class="vHeading">Application:</th>
                                                <td class="app-list-cell"><span data-bind="text: applicationName"></span></td>
                                            </tr>
                                            <tr>
                                                <th class="vHeading">User:</th>
                                                <td class="app-list-cell"><span data-bind="text: auditUser"></span></td>
                                            </tr>
                                            <tr>
                                                <th class="vHeading">IP Address:</th>
                                                <td class="app-list-cell"><span data-bind="text: iPAddress"></span></td>
                                            </tr>
                                            <tr>
                                                <th class="vHeading">Description:</th>
                                                <td class="app-list-cell"><span data-bind="text: auditDescription"></span></td>
                                            </tr>
                                            <tr>
                                                <th class="vHeading">AdditionalInfo:</th>
                                                <td class="app-list-cell"><span data-bind="text: auditID"></span></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <p>
                        Outer splitter : bottom pane (non-resizable, non-collapsible)
                    </p>
                </div>
            </div>

            <script>
                    $(document).ready(function() {
     
                        splitterObj();      // split Web Page in sections

                        $("#grid").kendoGrid({
                            groupable: true,
                            reorderable: true,
                            sortable: true,
                            columns: [{
                                field: "auditTypeID",
                                title: "Type"
                            },
                            {
                                field: "auditDate",
                                title: "Date",
                            },
                            {
                                field: "applicationName",
                                title: "Application",

                            },
                            {
                                field: "auditUser",
                                title: "User"
                            },
                            {
                                field: "iPAddress",
                                title: "IP Address"
                            },
                            {
                                field: "auditDescription",
                                title: "Description"
                            }]
                        });


                        //var cols = document.querySelectorAll('#columns .column');
                        //[].forEach.call(cols, function (col) {
                        //    col.addEventListener('dragstart', handleDragStart, false);
                        //    col.addEventListener('dragenter', handleDragEnter, false);
                        //    col.addEventListener('dragover', handleDragOver, false);
                        //    col.addEventListener('dragleave', handleDragLeave, false);
                        //    col.addEventListener('drop', handleDrop, false);
                        //    col.addEventListener('dragend', handleDragEnd, false);
                        //});

                        //var dropTg = document.querySelectorAll('.group');

                        //dropAreaFn(dropTg);
                        
                    });
            </script>

            <style>
                #vertical {
                    height: 100%;
                    margin: 0 auto;
                }

                #middle-pane {
                    background-color: rgba(60, 70, 80, 0.10);
                }

                #bottom-pane {
                    background-color: rgba(60, 70, 80, 0.15);
                }

                #left-pane, #center-pane, #right-pane {
                    background-color: rgba(60, 70, 80, 0.05);
                }

                .pane-content {
                    padding: 0 10px;
                }
            </style>
        </div>
    </body>

    </html>

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 26 Jul Link to this post

    Hi Rocio,

    Could you please prepare a dojo example replicating the issue, so we can test it locally:
    Meanwhile you can ensure that you are following the requirements for initializing the Grid from TABLE element (From HTML Table section):
    Looking forward to your reply.


    Regards,
    Konstantin Dikov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top