[Solved] Javascript issue setting Grid DataSource -

[Siobhan McTear]

I am attempting to set the DataSource of a Kendo grid through javascript but i am getting an error:

Unhandled exception at line 11, column 19155 in http://localhost:55135/Scripts/kendo/kendo.all.min.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'slice'

i have created my create as below:

<div id="grid">
            @(Html.Kendo().Grid(Model.ClientLoans)
                .Name("grdResults")
                .Columns(columns =>
                {
                    columns.Bound(loan => loan.ClientName);
                    columns.Template(@<text>@Html.ActionLink(@item.AssetNumber, "ViewDetail", new { clientLoan = @item, id = @item.AssetNumber })</text>).Title("Asset Number");
                })
                .Pageable()
                .Sortable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("SearchTest","ClientLoanSearch"))
                    )
             )

        </div>

On the click of a search button i execute some javascript to populate the grid:

$("#btnSearch").click(function () {

                var searchParameters = GetSearchParameters();
                var jsonData = JSON.stringify(searchParameters, null, 2);

                $.ajax({
                    url: '@Url.Content("~/ClientLoanSearch/SearchTest")',
                    type: 'POST',
                    data: jsonData,
                    datatype: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {

                        //debugger;
                        var results = data;
                        var dataSource = new kendo.data.DataSource({
                            data: results
                            //dataType: "json",
                            //columns: [
                            //    { field: "ClientHcn", title: "Client HCN" },
                            //    { field: "AssetNumber", title: "Asset Number" }]
                        });
                        var grid = $('#grdResults').data('kendoGrid');
                        grid.setDataSource(dataSource);
                        //grid.dataSource.read();
                    },
                    error: function (request, status, err) {
                        alert(status);
                        alert(err);
                    }
                });

                return false;

            });

It calls an Action on the controller:

[HttpPost]
        public ActionResult SearchTest([DataSourceRequest]DataSourceRequest request, ClientLoanSearchModel model)
        {
            Library.ClientLoanCollection loans = Library.ClientLoanCollection.GetDummyData();
            var jsonData = new {loans};

            DataSourceResult result = loans.ToDataSourceResult(request);

            return Json(result, JsonRequestBehavior.AllowGet);
        }

Any help appreciated.

[Siobhan McTear]

changing to the below appears to correct the datasource issue:
var results = data.Data;

The totals and paging number on the grid don't appear correctly however. They are appear as NaN

[Rosen]

Hi Siobhan,

The error is caused due to incorrect schema definition of the new DataSource instance you are creating. As you know the schema data and total fields should map to the fields of the response which contains the data and the total. In the case of DataSourceResult those are named Data and Total respectively. Therefore, you will need to specify the schema of the DataSource declaration.

On a side note. Looking at the code you have pasted it seems that you are trying to filter the data shown in the Grid widget by some external values. If this is the scenario, the approach you have taken is not optimal. In order to achieve this you do not need to change the DataSource. You can just send the extra parameters as additional data - which will allow to keep the server paging and sorting features working as well as those extra parameters will be send with each subsequent request as opposite to the implementation you have applied. Then in the button click event you will need to call the read method of the DataSource:

$("#btnSearch").click(function () {
   var grid = $('#grdResults').data('kendoGrid');
   grid.dataSource.read();
   return false;
 });

@(Html.Kendo().Grid(Model.ClientLoans)
   .Name("grdResults")
   /*..*/
   .DataSource(dataSource => dataSource
       .Ajax()
       .PageSize(5)
       .Read(read => read.Action("SearchTest","ClientLoanSearch").Data("additionalData"))
       )
)

<script>
      function additionalData() {
          return GetSearchParameters();
      }
</script>

Regards,
Rosen
Telerik

 

 

[Siobhan McTear]

I've created the function you detailed above but I'm getting an issue:
JavaScript runtime error: 'additionalData' is undefined

This search returns other data that will populate controls on the page which is why I opted not to have the grid directly call an Action method on the controller. Is there anyway to intercept this call using the code you detailed above to extract the other required information?

[Siobhan McTear]

JavaScript issue resolved. Need to drop function outside of:
$(function () {

});