Kendogrid is not displaying data

3 posts, 0 answers
  1. Vaso
    Vaso avatar
    2 posts
    Member since:
    Jul 2020

    Posted 12 Aug 2020 Link to this post

    I was trying to find solution on this forum but I could not find it.

    My kendo grid is define as followed:
    001.var dataSource = new kendo.data.DataSource({
    002.    batch: false,
    003.    autoSync: true,
    004.    transport: {
    005.        read: {
    006.            url: "/monitoring/matrix/routecontentrules?format=json",
    007.            contentType: "application/json; charset=utf-8",
    008.            dataType: "json",
    009.            type: "POST",
    010.            timeout: 30000
    011.        },
    012.        update: {
    013.            url: "/monitoring/matrix/routecontentrules/updateroutecontentrule",
    014.            contentType: "application/json; charset=utf-8",
    015.            dataType: "json",
    016.            type: "PUT"
    017.        },
    018.        create: {
    019.            url: "/monitoring/matrix/routecontentrules/createroutecontentrule",
    020.            contentType: "application/json; charset=utf-8",
    021.            dataType: "json",
    022.            type: "POST"
    023.        },
    024.        destroy: {
    025.            url: "/monitoring/matrix/routecontentrules/deleteroutecontentrule",
    026.            contentType: "application/json; charset=utf-8",
    027.            dataType: "json",
    028.            type: "DELETE"
    029.        },
    030.        parameterMap: function (data, operation) {
    031.            if (operation == "read") {
    032.                return kendo.stringify({
    033.                    RouteId: routeDataItem.RouteId
    034.                });
    035.            }
    036.            else if (operation == "destroy") {
    037.                return kendo.stringify({
    038.                    Id: data.Id,
    039.                });
    040.            }
    041.            else {
    042.                return kendo.stringify({
    043.                    Id: data.Id,
    044.                    RouteId: routeDataItem.RouteId,
    045.                    OrderId: data.OrderId,
    046.                    SenderMatch: data.SenderMatch,
    047.                    ContentMatch: data.ContentMatch,
    048.                    SenderReplace: data.SenderReplace,
    049.                    ContentReplace: data.ContentReplace,
    050.                });
    051.            }
    052.        }
    053.    },
    054.    schema: {
    055.        model: {
    056.            id: "Id",
    057.            fields: {
    058.                Id: { type: "number", defaultValue: 0 },
    059.                OrderId: { type: "number", defaultValue: 0 },
    060.                SenderMatch: { type: "string", defaultValue: "" },
    061.                ContentMatch: { type: "string", defaultValue: "" },
    062.                SenderReplace: { type: "string", defaultValue: "" },
    063.                ContentReplace: { type: "string", defaultValue: "" }
    064.            }
    065.        }
    066.    }
    067.});
    068. 
    069.$("#Grid").kendoGrid({
    070.    dataSource: dataSource,
    071.    reorderable: false,
    072.    resizable: false,
    073.    sortable: false,
    074.    groupable: false,
    075.    scrollable: true,
    076.    navigatable: true,
    077.    editable: true,
    078.    columns: [
    079.        {
    080.            width: 150, field: "SenderMatch", title: "Sender match",
    081.            template: "<span><label class='SenderMatch'</label></span>",
    082.            headerAttributes: { title: "Sender match", style: "text-align: right" }, attributes: { style: "text-align: right" }
    083.        },
    084.        {
    085.            width: 150, field: "ContentMatch", title: "Content match",
    086.            template: "<span><label class='SenderMatch'</label></span>",
    087.            headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }
    088.        },
    089.        {
    090.            width: 150, field: "SenderReplace", title: "Sender replace",
    091.            template: "<span><label class='SenderMatch'</label></span>",
    092.            headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
    093.        },
    094.        {
    095.            width: 150, field: "ContentReplace", title: "Content replace",
    096.            template: "<span><label class='SenderMatch'</label></span>",
    097.            headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
    098.        },
    099.        {
    100.            command: [
    101.                { name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }
    102.            ],
    103.            width: "50px"
    104.        }
    105.    ],
    106.    toolbar: kendo.template('<span class="ReloadManipulationByCustomer" style=""><span class="k-icon k-i-refresh refresh-btn"></span></span><a class="k-button k-grid-add add-btn" href="javascript:void(0)"><span class="k-sprite px-sprite px-i-sm-new new" />Add</a>')
    107.});
    108. 
    109.$(".ReloadManipulationByCustomer").click(function () {
    110.    $("#Grid").data("kendoGrid").dataSource.read();
    111.});

     

    For backend I am using ServiceStack, requests are define as followed:

    01.[Route("/monitoring/matrix/routecontentrules/createroutecontentrule", "POST")]
    02.[Route("/monitoring/matrix/routecontentrules/updateroutecontentrule", "PUT")]
    03.public sealed class CreateUpdateRouteContentRuleRequest
    04.{
    05.    public int Id { get; set; }
    06. 
    07.    public int OrderId { get; set; }
    08. 
    09.    public int RouteId { get; set; }
    10. 
    11.    public string SenderMatch { get; set; }
    12. 
    13.    public string ContentMatch { get; set; }
    14. 
    15.    public string SenderReplace { get; set; }
    16. 
    17.    public string ContentReplace { get; set; }
    18.}
    19. 
    20.[Route("/monitoring/matrix/routecontentrules")]
    21.public sealed class RouteContentRulesRequest
    22.{
    23.    public int RouteId { get; set; }
    24.}
    25. 
    26.[Route("/monitoring/matrix/routecontentrules/deleteroutecontentrule")]
    27.public sealed class DeleteRouteContentRuleRequest
    28.{
    29.    public int Id { get; set; }
    30.}
    31. 
    32.public sealed class RouteContentRuleModel
    33.{
    34.    public int Id { get; set; }
    35. 
    36.    public int OrderId { get; set; }
    37. 
    38.    public int RouteId { get; set; }
    39. 
    40.    public string SenderMatch { get; set; }
    41. 
    42.    public string ContentMatch { get; set; }
    43. 
    44.    public string SenderReplace { get; set; }
    45. 
    46.    public string ContentReplace { get; set; }
    47.}

    Code for retrieving data is as follows:

    01.public object Post(RouteContentRulesRequest request)
    02.{
    03.    return _dbConnectionFactory
    04.        .OpenReadOnlyAndRun(dbConn => dbConn.Select<RouteContentRule>(r => r.RouteId == request.RouteId).OrderBy(r => r.OrderId));
    05.}
    06. 
    07.public object Any(CreateUpdateRouteContentRuleRequest request)
    08.{
    09.    RouteContentRule entity;
    10. 
    11.    if (!Db.Exists<Route>(new { Id = request.RouteId }))
    12.    {
    13.        throw new HttpError(HttpStatusCode.BadRequest, $"Route with id {request.RouteId} does not exist");
    14.    }
    15.    if (request.Id != 0)
    16.    {
    17.        var routeContentRule = _dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.SingleById<RouteContentRule>(request.Id));
    18.        entity = request.ToEntity(routeContentRule);
    19.        Db.Update(entity, r => r.Id == routeContentRule.Id);
    20.        return entity.ToModel();
    21.    }
    22. 
    23.    entity = request.ToEntity();
    24.    entity.OrderId = (_dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.Scalar<RouteContentRule, int?>(x => Sql.Max(x.OrderId), x => x.RouteId == request.RouteId)) ?? 0) + 1;
    25.    var id = (int)Db.Insert(entity, true);
    26.    entity.Id = id;
    27. 
    28.    return entity.ToModel();
    29.}
    30. 
    31.public void Delete(DeleteRouteContentRuleRequest request)
    32.{
    33.    Db.Delete<RouteContentRule>(new {Id = request.Id});
    34.}

     

    Data during read request is as follows:

    01.[
    02.   {
    03.      "Id":35,
    04.      "OrderId":1,
    05.      "RouteId":72303,
    06.      "SenderMatch":"335",
    07.      "ContentMatch":"",
    08.      "SenderReplace":"",
    09.      "ContentReplace":""
    10.   },
    11.   {
    12.      "Id":36,
    13.      "OrderId":2,
    14.      "RouteId":72303,
    15.      "SenderMatch":"55",
    16.      "ContentMatch":"",
    17.      "SenderReplace":"",
    18.      "ContentReplace":""
    19.   }
    20.]

     

    Problem is that grid is not showing these data. I can see that data is here if I click on grid cell. In that situation that cell become editable and it is showing current value of data. But as soon as I move editing to some new cell previous hide data. I was inspecting cell and I have found out that when cell is not editing it is described as following:

    1.<td style="text-align: right" aria-describedby="50349c08-da61-49d2-aa73-9c0823d4a4a4" role="gridcell">
    2.    <span><label class="SenderMatch" <="" label=""></label></span>
    3.</td>

     

    And when cell is in edding mode it is described in html as following:

    1.<td style="text-align: right" aria-describedby="ccc2df23-b49a-4b00-820a-02a67c428a52" role="gridcell" id="Grid_active_cell" class="k-edit-cell" data-role="editable">
    2.    <input type="text" class="k-input k-textbox" name="SenderMatch" data-bind="value:SenderMatch">
    3.</td>

    I do not know why data is not showing. From what I can tell it should show data, but it is not showing this data.

  2. Vaso
    Vaso avatar
    2 posts
    Member since:
    Jul 2020

    Posted 13 Aug 2020 in reply to Vaso Link to this post

    I figure out what was the problem.

    columns: [
        {
            width: 150, field: "SenderMatch", title: "Sender match",
            template: "<span><label class='SenderMatch'</label></span>",
            headerAttributes: { title: "Sender match", style: "text-align: right" }, attributes: { style: "text-align: right" }
        },
        {
            width: 150, field: "ContentMatch", title: "Content match",
            template: "<span><label class='SenderMatch'</label></span>",
            headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }
        },
        {
            width: 150, field: "SenderReplace", title: "Sender replace",
            template: "<span><label class='SenderMatch'</label></span>",
            headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
        },
        {
            width: 150, field: "ContentReplace", title: "Content replace",
            template: "<span><label class='SenderMatch'</label></span>",
            headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
        },
        {
            command: [
                { name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }
            ],
            width: "50px"
        }
    ],

    templates are buggy. I removed them and now data is shown. Template for command is still valid.

  3. Petar
    Admin
    Petar avatar
    472 posts

    Posted 14 Aug 2020 Link to this post

    Hi Vaso,

    The reason why you don't get any values when using the column templates is that the field is not defined inside the templates. 

    In the above link, you can see the following definition:

      columns: [ {
        field: "name",
        template: "<strong>#: name # </strong>"
      }]

    The code in yellow demonstrates how the column's value should be passed to the template.

    Regards,
    Petar
    Progress Telerik

Back to Top