Date format is lost when manually populating datasource in jquery

[steve]

When i load the data to the grid using the API call to read the viewmodel sets the format as it should (i.e. [DisplayFormat(DataFormatString = "{0:MMM dd, yyyy}", ApplyFormatInEditMode = true)]).  When I push the datasource through jquery the formatt is lost.  I am assuming it has to do with parsing to sting.  Is anyone resolved this issues before?

  function FilterGrid() {
        window.openWait();
        var text = $('#SearchTextBox').val();
        $.ajax({
            url: '@Url.Action("Search", "Home")',
            data: { text: text },
            type: 'POST',
            success: function (data) {
                if (data[0] == "success") {
                    var grid = $('#Grid').getKendoGrid();
                    grid.dataSource.data(data[1]);
                    grid.refresh();
                }
                else {
                    alert(data[1]);
                }
                window.closeWait();
            },
        });
    }

[Vladimir Iliev]

Hi Stephen,

Current behavior is expected - when the Grid reads the data from remote source it automatically parse the received data, however when you pass the data directly to the dataSource "data" method you should parse it manually: 

e.g.:

function FilterGrid() {
      window.openWait();
      var text = $('#SearchTextBox').val();
      $.ajax({
          url: '@Url.Action("Search", "Home")',
          data: { text: text },
          type: 'POST',
          success: function (data) {
              if (data[0] == "success") {
                  var grid = $('#Grid').getKendoGrid();

                  var model  = data[1];
                  //manually parse the date fields:
                  model.startDate = kendo.parseDate(model.startDate);

                  grid.dataSource.data(model);
                  grid.refresh();
              }
              else {
                  alert(data[1]);
              }
              window.closeWait();
          },
      });
  }

A better approach would be loading the data through the grid "dataSource.transport" - in this case you can send the "SearchTextBox" value by defining custom function as "data" option:

• dataSource.transport.read.data option

Regards,
Vladimir Iliev
Telerik

 

 

[steve]

Would I use the datasource.transport.read instead of the code I have?  I am not quite sure how to implement what you sent me too.

[Vladimir Iliev]

Hello Stephen,

The provided link to the "data" option of the "transport.read" operation can be set to function (as demonstrated in the provided link) - this way when a new request is going to be made to the server the additional "text" parameter will be included as well. Please check the example below:

transport: {
    read: {
        url: '@Url.Action("Search", "Home")',
        type: 'POST',
        data: function() {
            var text = $('#SearchTextBox').val();
            return {
                text: text // send "SearchTextBox" as the "text" parameter
            };
        }
    }
}

Regards,
Vladimir Iliev
Telerik

 

 

[steve]

I think i am close but even thought there is data coming back from the contrller and nothing is populated in the grid

function FilterGridByText() {
       var text = $('#TextBox').val();
       if (!text) {
           $("#TextBox").notify("You must enter a value to search for.");
       } else {
           window.openWait();
           var dataSource = new kendo.data.DataSource({
               schema: {
                   model: {
                       id: "Id",
                       fields: {
                           "Id": { type: "number" },
                           "Reference": { type: "string" },
                           "Owner": { type: "object" },
                           "ModifiedBy": { type: "number" },
                           "Date": { type: "date" }
                       }
                   }
               },

               transport: {
                   read: {
                       url: '@Url.Action("Search", "Home")',
                       type: 'POST',
                       data: { text: text }
                   }
               }
           });
           var grid = $('#Grid').getKendoGrid();
           grid.setDataSource(dataSource);
           window.closeWait();
       }
   }

[Vladimir Iliev]

Hi Stephen,

The provided configuration looks valid and should work as expected. That why we would need the response from the server for further investigation - could you please provide it? You can get it from the "network" tab in your browser dev tools.

Regards,
Vladimir Iliev
Telerik

 

 

[steve]

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Error</title>
<script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script></head>
<body>
    <hgroup>
        <h1>Error.</h1>
        <h2>An error occurred while processing your request.</h2>
    </hgroup>
<script type="text/javascript"> if (!NREUMQ.f) {NREUMQ.f=function() {NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script"); e.type="text/javascript"; e.src=(("http:"===document.location.protocol)?"http:":"https:") + "//" + "js-agent.newrelic.com/nr-100.js"; document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrfj","bam.nr-data.net","1a82b3e2e6","5009759","ZQZUZRBVVhFRU0QIDlxMfkUWRHADXlRcBBMdME9CFlFVTGdVUk8sRAAYfBRXcANeVFwEEw==",0,0,new Date().getTime(),"CC6A806B59AC61C1","","","",""]);</script></body>
</html>

[Vladimir Iliev]

Hello Stephen,

From the provided information I can only confirm that there is internal server error which is the reason for current behavior. Could you please investigate and fix the server error and let us know of the result? 

Regards,
Vladimir Iliev
Telerik

 

 

[steve]

this is what is being returned from the response body

{"Data":[
    {"Id":28
    ,"RefNumber":"B221"
    ,"ChangeAgentId":""
    ,"ChangeDate":"\/Date(1425944813528)\/",
    "DocumentOwner":
        {"Id":5,
        ,"DefaultEntity":6
        ,"ContactName":"Carvey, Dana"
        ,"Title":"Project Engineer"
        ,"IsAdmin":false
        }
    ,"RevNumber":0
    ,"Draft":true
    ,"Status":"Draft"
    ,"ContactId":0
    }
    ,{"Id":44
    ,"RefNumber":"C261"
    ,"ChangeAgentId":""
    ,"ChangeDate":"\/Date(1425944813544)\/"
    ,"DocumentOwner":
        {"Id":5
        ,"DefaultEntity":6
        ,"ContactName":"Dowicky, Sam"
        ,"Title":"Sr Engineer"
        ,"IsAdmin":false
        ,"Role":null
        }
    ,"RevisionNumber":0
    ,"Draft":true
    ,"Status":"Draft"
    ,"ContactId":0
    }
}

    

[Vladimir Iliev]

Hi Stephen,

The provided server response is invalid JSON (there are unexpected "," symbol and missing closing "]" symbol). Also the received data is nested under the "Data" field of the response, however the dataSource "schema.data" option is not set. Please check the updated example below which works as expected on our side:

$(function() {
    var data = {
        "Data": [{
            "Id": 28,
            "RefNumber": "B221",
            "ChangeAgentId": "",
            "ChangeDate": "\/Date(1425944813528)\/",
            "DocumentOwner": {
                "Id": 5,
                //,
                "DefaultEntity": 6,
                "ContactName": "Carvey, Dana",
                "Title": "Project Engineer",
                "IsAdmin": false
            },
            "RevNumber": 0,
            "Draft": true,
            "Status": "Draft",
            "ContactId": 0
        }, {
            "Id": 44,
            "RefNumber": "C261",
            "ChangeAgentId": "",
            "ChangeDate": "\/Date(1425944813544)\/",
            "DocumentOwner": {
                "Id": 5,
                "DefaultEntity": 6,
                "ContactName": "Dowicky, Sam",
                "Title": "Sr Engineer",
                "IsAdmin": false,
                "Role": null
            },
            "RevisionNumber": 0,
            "Draft": true,
            "Status": "Draft",
            "ContactId": 0
        }]
    };

    $("#grid").kendoGrid({
        pageable: true
    });

    var dataSource = new kendo.data.DataSource({
        schema: {
            data: "Data",
            model: {
                id: "Id",
                fields: {
                    "Id": {
                        type: "number"
                    },
                    "Reference": {
                        type: "string"
                    },
                    "Owner": {
                        type: "object"
                    },
                    "ModifiedBy": {
                        type: "number"
                    },
                    "Date": {
                        type: "date"
                    }
                }
            }
        },

        transport: {
            read: function(request) {
                request.success(data);
            }
        }
    });

    var grid = $('#grid').getKendoGrid();
    grid.setDataSource(dataSource);
})

Regards,
Vladimir Iliev
Telerik

 

 

[steve]

Sorry, I pulled out some data that I cannot share publicly.  I added the data but that didn't fix it.  Once I matched how you were binding to the grid it worked.  This is what I had and once I removed the fetch and the refresh, the data loaded.  Did notice that it I click on the refresh icon on the right hand corner of the grid, it refreshes the current datasource.  Is there a way to change that to always call the default datasource?

fullTextDataSource.fetch();

var grid = $('#Grid').getKendoGrid();

grid.setDataSource(fullTextDataSource);

grid.refresh();


[Vladimir Iliev]

Hello Stepen,

I'm not sure that I understand correctly your last question ("Is there a way to change that to always call the default datasource?") - could you please elaborate more on the exact behavior that you are trying to achieve?

Regards,
Vladimir Iliev
Telerik

 

 

[steve]

When the view loads, the grids read action is calling back all of the items from the data base.  The code we added here is a fulltext search that returns specific results to the grid.  At first i was thinking that the refresh would call back the results from the dataset from the view load.  I think i will have to create another button that will rerender the view to return all results again or if there are no results in the full text search.

[Vladimir Iliev]

Hi Stephen, 

You can save the original dataSource to global variable and set it back to the grid (using setDataSource) when needed. 

Regards,
Vladimir Iliev
Telerik

 

 

[steve]

I just noticed that I get an exception after I bind the new dataset, if I delete the record I get this error.  I am not sure what is cause the error but I would assume that the data from the dataset has been lost. Any suggestions?

 

0x800a138f - JavaScript runtime error: Unable to get property 'data' of undefined or null reference

​

[Vladimir Iliev]

Hi Stephen,

From the provided information it seems that the dataSource looks for "data" field (with lowercase), however this field is not available in the server response. Could you please make sure the server responses are matching the dataSource configuration? 

Also if this doesn't help could you please provide runable example where the issue is reproduced? This would help us pinpoint the exact reason for current behavior. 

Regards,
Vladimir Iliev
Telerik