title: Uncaught TypeError: Cannot read property 'data' of undefined jquery Jtable
body: <p>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: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'data' of undefined jquery Jtable</p>
  </blockquote>
  
  <p>here is my html page: </p>
  
  <pre><code>@model Tuple&lt;List&lt;SIO.Core.Entities.Group&gt;, List&lt;SIO.Core.Entities.WorkFlow&gt;&gt;
  @section JavaScript
  {
  
  &lt;script type="text/javascript" src="@Url.Content("/Scripts/GroupHandler.js")"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="@Url.Content("/Scripts/jquery-ui.js")"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"      src="@Url.Content("/Scripts/jquery.jtable.js")"&gt;&lt;/script&gt;
  
  }
  
  
  @{
  ViewBag.Title = "المجموعات";
  Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  
  
  &lt;div id="divBackgroundtask" style="display: none;"&gt;
  &lt;/div&gt;
  &lt;div id="indx_divtask"&gt;
      &lt;section class="col-md-8 taskPoolfilterSection"&gt;
  
      &lt;div class="form-group"&gt;
          &lt;div class="border-top"&gt;
          &lt;/div&gt;
          &lt;div id="filter" class="panel-body margin-bottom"&gt;
              &lt;header class="panel-heading containt-border"&gt;
                  @ViewBag.Title
              &lt;/header&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;!-- /.panel-body --&gt;
  
  
      &lt;div id="divPleaseWaittask" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
          &lt;div class="load_div col-sm-offset-2 col-sm-5"&gt;
              &lt;div class="  row col-sm-2 col-sm-offset-9"&gt;
                  &lt;img src="~/Images/Loading.gif" /&gt;
              &lt;/div&gt;
  
              &lt;div class="row col-sm-12 txt_wait"&gt;
                  &lt;b&gt;برجاء الإنتظار حتى إكمال العملية&lt;/b&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
  &lt;/section&gt;
  
  &lt;div id="GroupsContainer" class="table-responsive"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is my javascript code to build jtable:</p>
  
  <pre><code>(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 + '&amp;jtPageSize=' + jtParams.jtPageSize + '&amp;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";
  });
  </code></pre>
  
  <p>This is the line which caused the error: </p>
  
  <pre><code> $dfd.resolve(data);
  </code></pre>
  
  <p>And here is my action method to retrieve the records: </p>
  
  <pre><code>[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&lt;Group&gt; groups = groupManager.SkipAndTake(jtStartIndex, jtPageSize);
                  List&lt;GroupCustomViewModel&gt; groupCustomViewModel = groups.Select(group =&gt; 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);
              }
          }
  </code></pre>
  
  <p>And here is my model: </p>
  
  <pre><code>public class GroupCustomViewModel
      {
          #region properties
          /// &lt;summary&gt;
          /// Gets or sets the GoupIDPK.
          /// &lt;/summary&gt;
          /// &lt;value&gt;The GoupIDPK.&lt;/value&gt;
          public int GoupIDPK { get; set; }
          /// &lt;summary&gt;
          /// Gets or sets the GroupName.
          /// &lt;/summary&gt;
          /// &lt;value&gt;The GroupName.&lt;/value&gt;
  
          public string GroupName { get; set; }
          /// &lt;summary&gt;
          /// Gets or sets the GroupDisc.
          /// &lt;/summary&gt;
          /// &lt;value&gt;The GroupDisc.&lt;/value&gt;
          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
      }
  </code></pre>
  
  <p>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.</p>