[temory01Participant]

Found the issue.

We had a fade in animation on page load that was breaking the docking.

[temory01Participant]

            else
            {
                alert(JSON.stringify(dataAdapter._source.localdata.length));
                $('#myActivityGrid').source = dataAdapter;
                $("#myActivityGrid").jqxGrid('updatebounddata');
            }

I see that the dataadapter._source_localdata has update dwith new data but the grid on the UI isn’t showing any changes.

[temory01Participant]

_appComponent.signalRService.getActivityLogMessage.subscribe((response: any) => {
            //alert('updated');
            var source =
                {
                    localdata: response,
                    datatype: 'json',
                    datafields:
                    [
                        { name: 'EventActivity', type: 'string' },
                        { name: 'EventDetail', type: 'string' },
                        { name: 'StartTime', type: 'string' },
                        { name: 'CallDuration', type: 'string' },
                        { name: 'SeverityLevel', type: 'string' },
                        { name: 'LifeOfCall' }
                    ]
                }
            var dataAdapter = new $.jqx.dataAdapter(source);

            if (this.initialLoad) {
                this.initialLoad = false;
                var initRowDetails = function (index, parentElement, gridElement, datarecord, rowData) {
                    var htmlString = '<table class="table table-striped">';

                    htmlString = htmlString +
                        '<tr>' +
                        '<th>Start</th>' +
                        '<th>End</th>' +
                        '<th>Elapsed</th>' +
                        '<th>Service Group</th>' +
                        '<th>Agent</th>' +
                        '<th>Activity</th>' +
                        '<th>Connected Party</th>' +
                        '<th>Calling Number</th>' +
                        '<th>Called</th>' +
                        '</tr>';

                    if (datarecord.LifeOfCall.length == 0) { htmlString = htmlString + '<tr><td colspan="8">No record(s) found</td></tr>'; }
                    else {
                        for (var i = 0; i < datarecord.LifeOfCall.length; i++) {
                            htmlString = htmlString +
                                '<tr>' +
                                '<td>' + datarecord.LifeOfCall[i].StartDateTime + '</td>' +
                                '<td>' + datarecord.LifeOfCall[i].EndDateTime + '</td>' +
                                '<td>' + datarecord.LifeOfCall[i].Duration + '</td>' +
                                '<td>' + datarecord.LifeOfCall[i].ServiceGroupName + '</td>' +
                                '<td>' + datarecord.LifeOfCall[i].Agent.Name + '</td>' +
                                '<td>' + datarecord.LifeOfCall[i].ActivityName + '</td>' +
                                '<td>' + datarecord.LifeOfCall[i].ConnectedParty + '</td>' +
                                '<td>' + datarecord.LifeOfCall[i].CallingNumber + '</td>' +
                                '<td>' + datarecord.LifeOfCall[i].CalledNumber + '</td>' +
                                '</tr> ';
                        }
                    }

                    htmlString = htmlString + '</table>';

                    $($(parentElement).children()[0]).append(htmlString);
                }

                var cellClass = function (row: any, dataField: any, cellText: any, rowData: any) {
                    var cellValue = rowData[dataField];
                    switch (dataField) {
                        case "EventActivity":
                            return rowData['SeverityLevel'];
                    }
                }

                // grid
                $("#myActivityGrid").jqxGrid(
                    {
                        altRows: true,
                        filterable: true,
                        showFilterRow: true,
                        columns: [
                            { text: 'Activity', name: 'EventActivity', dataField: 'EventActivity', cellClassName: cellClass, width: '25%' },
                            { text: 'Detail', name: 'EventDetail', dataField: 'EventDetail', width: '25%' },
                            { text: 'Start', name: 'StartTime', dataField: 'StartTime', width: '25%' },
                            { text: 'Duration', name: 'CallDuration', dataField: 'CallDuration', width: '25%' }
                        ],
                        columnsResize: true,
                        initRowDetails: initRowDetails,
                        rowDetails: true,
                        rowDetailsTemplate: { rowdetailsheight: 200 },
                        sortable: true,
                        source: dataAdapter,
                        theme: 'bootstrap',
                        width: '100%'
                    });
            }
            else
            {
                $('#myActivityGrid').source = dataAdapter;
                $("#myActivityGrid").jqxGrid('updatebounddata');
            }

            // export
            $("#activitypdfExport").jqxButton({ theme: 'bootstrap' });
            $('#activitypdfExport').unbind('click');
            $("#activitypdfExport").click(function () {
                $("#myActivityGrid").jqxGrid('exportData', 'pdf', 'MyActivity');
            });

            // update 
            $("#updateMyActivity").jqxButton({ theme: 'bootstrap' });
            $('#updateMyActivity').unbind('click');
            $("#updateMyActivity").click(() => this.updateActivityLogTable(this.id))

            // hide loading animation
            //$("#myActivityGrid").jqxGrid('hideloadelement');
        });  

This is my updated code and the data doesn’t change when I click the button

[temory01Participant]

Yes, when the button is clicked I’m going back to the server to get a whole new set of data so I was completely rebinding the grid.
I’ll try your suggestion.

[Author]

Posts