Kendogrid is not displaying data

[Vaso]

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.

[Vaso]

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.

[Petar]

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