Uncaught TypeError: Cannot read property 'data' of undefined jquery Jtable

Question

I've been investigating for this issue for more than 12 hours with no clue for any solution. I have good knowledge about jtable and I've been using it for long time. I have an ordinary div which I want to build it using jtable, so I copied the code from an old working sample in my application and edited it, but there is a javascript error appear in the console which prevents the data to show in the table:

Uncaught TypeError: Cannot read property 'data' of undefined jquery Jtable

here is my html page:

@model Tuple<List<SIO.Core.Entities.Group>, List<SIO.Core.Entities.WorkFlow>>
@section JavaScript
{

<script type="text/javascript" src="@Url.Content("/Scripts/GroupHandler.js")"></script>
<script type="text/javascript" src="@Url.Content("/Scripts/jquery-ui.js")"></script>
<script type="text/javascript"      src="@Url.Content("/Scripts/jquery.jtable.js")"></script>

}


@{
ViewBag.Title = "المجموعات";
Layout = "~/Views/Shared/_Layout.cshtml";
}



<div id="divBackgroundtask" style="display: none;">
</div>
<div id="indx_divtask">
    <section class="col-md-8 taskPoolfilterSection">

    <div class="form-group">
        <div class="border-top">
        </div>
        <div id="filter" class="panel-body margin-bottom">
            <header class="panel-heading containt-border">
                @ViewBag.Title
            </header>
        </div>


    </div>

    <!-- /.panel-body -->


    <div id="divPleaseWaittask" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="load_div col-sm-offset-2 col-sm-5">
            <div class="  row col-sm-2 col-sm-offset-9">
                <img src="~/Images/Loading.gif" />
            </div>

            <div class="row col-sm-12 txt_wait">
                <b>برجاء الإنتظار حتى إكمال العملية</b>
            </div>
        </div>

    </div>



</section>

<div id="GroupsContainer" class="table-responsive">

</div>

And here is my javascript code to build jtable:

(document).ready(function () {
    $('#GroupsContainer').jtable({
        paging: true,
        sorting: true,
        messages: {
            close: 'اغلاق',
            pagingInfo: 'عرض {0}-{1} من {2}',
            pageSizeChangeLabel: 'تعداد الصف',
            noDataAvailable: 'لا يوجد بيانات للعرض!',
            gotoPageLabel: 'الذهاب الى صفحة',
            serverCommunicationError: 'حدث خطأ ما اثناء الإتصال...',
        },

        actions: {
            //listAction: '/TaskPool/GetTasks?isAdmin=' + IsAdmin,
            listAction: function (postData, jtParams) {
                // alert("Loading...");
                PleaseWaitDialogtask.show(true);
                return $.Deferred(function ($dfd) {
                    $.ajax({
                        url: '/Group/GetAllGroups?' + 'jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
                        type: 'Get',
                        dataType: 'json',
                        data: postData,
                        success: function (data) {
                            $dfd.resolve(data);
                            PleaseWaitDialogtask.show(false);
                        },
                        error: function () {
                            $dfd.reject();
                        }
                    });
                });
            },
        },
        fields: {
            ID: {
                key: true,
                list: false
            },
            GroupName: {
                title: 'اسم المجموعة'//,
                //width: '40%'
            },
            GroupDisc: {
                title: 'وصف المجموعة'//,
                //width: '40%'
            },

            Link: {
                title: '',
                display: function (data) {
                    if (data.isRedirect) {
                        window.location.href = data.redirectUrl;
                    }
                }
            },
        }

    });
    $('#GroupsContainer').jtable('load');
    $('.jtable')[0].className = $('.jtable')[0].className + " table table-striped table-bordered table-hover";
});

This is the line which caused the error:

 $dfd.resolve(data);

And here is my action method to retrieve the records:

[HttpGet]
        public JsonResult GetAllGroups(int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null, string rangeSt = "", string rangeEd = "")
        {
            try
            {
                LogHelpper.LogMessage("GroupContorller GetAllSystemUsers Post Method Started", EventLogEntryType.Information, log);

                GroupManager groupManager = new GroupManager();
                List<Group> groups = groupManager.SkipAndTake(jtStartIndex, jtPageSize);
                List<GroupCustomViewModel> groupCustomViewModel = groups.Select(group => new GroupCustomViewModel(group)).ToList();

                LogHelpper.LogMessage("GroupContorller GetAllGroups Post Method Ended", EventLogEntryType.Information, log);





                return Json(new { Result = "OK", Records = groupCustomViewModel , TotalRecordCount = groupCustomViewModel .Count }, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                LogHelpper.LogMessage("Error Message", EventLogEntryType.Error, log);
                LogHelpper.LogException(ex, EventLogEntryType.Error, log);
                return Json(new { Result = "ERROR", Message = ex.Message }, JsonRequestBehavior.AllowGet);
            }
        }

And here is my model:

public class GroupCustomViewModel
    {
        #region properties
        /// <summary>
        /// Gets or sets the GoupIDPK.
        /// </summary>
        /// <value>The GoupIDPK.</value>
        public int GoupIDPK { get; set; }
        /// <summary>
        /// Gets or sets the GroupName.
        /// </summary>
        /// <value>The GroupName.</value>

        public string GroupName { get; set; }
        /// <summary>
        /// Gets or sets the GroupDisc.
        /// </summary>
        /// <value>The GroupDisc.</value>
        public string GroupDisc { get; set; }

        public string EditHyperlink { get; set; }

        public string DeleteHyperlink { get; set; }

        public string DetalisHyperlink { get; set; }

        public bool DefaultGroup { get; set; }
        #endregion
    }

Sorry if the question is too long but I don't know where the error would be so I posted all code required to do the task.

Answer 1

Finally I found where the problem is!! ... In jTable definition at fields sectionID but the model field name is GroupIDPK so changing jTable field ID to GroupIDPK solved the problem