Reload grid datasource via jQuery

[BitShift]

Im trying to load the datasource of a grid via jQuery, with json that has been fetched via an ajax call. I can see data in the object at runtime in the dev console, but the grid never displays the new data.  What can I check

 

// where Lines is an array of objects of type that match the model being referenced in the grid
var lineGridDS = $("#linesGrid").data("kendoGrid").dataSource;
itemGridDS.data(Lines);

[BitShift]

Ok, so from this example (generated via the Telerik project template), for the Index.cshtml page. 

I added a button to see if I can reset the data in the datasource for the grid.  Its not showing up.
What am I doing wrong?  
We have a grid on a razorpage

@(Html.Kendo().Grid<OrderViewModel>().Name("grid")
        .Groupable()
        .Sortable()
        .Editable()
        .Scrollable()
        .ToolBar(x => x.Create())
        .Columns(columns =>
        {
            columns.Bound(column => column.Freight);
            columns.Bound(column => column.ShipName);
            columns.Bound(column => column.ShipCity);
            columns.Command(column =>
            {
                column.Edit();
                column.Destroy();
            }).Width(230);
        })
        .DataSource(ds => ds.Ajax()
                .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))
                .Update(u => u.Url("/Index?handler=Update").Data("forgeryToken"))
                .Create(c => c.Url("/Index?handler=Create").Data("forgeryToken"))
                .Destroy(d => d.Url("/Index?handler=Destroy").Data("forgeryToken"))
                .Model(m => m.Id(id => id.OrderID))
            .PageSize(10)
        )
        .Pageable()
    )

 

And a button

<button type="button" class="btn btn-primary" onclick="testLoadDS()">TEST DS</button>

 

The script function

function testLoadDS() {

    var testObj = { "OrderID": "1", "Freight": "10.1", "OrderDate": "10/19/2019", "ShipCity": "Austin", "ShipName": "Test123" };

 

The viewmodel used by the grid

public class OrderViewModel
   {
       [Key]
       public int OrderID
       {
           get;
           set;
       }

       [Required]
       public decimal? Freight
       {
           get;
           set;
       }

       public DateTime? OrderDate
       {
           get;
           set;
       }

       public string ShipCity
       {
           get;
           set;
       }

       public string ShipName
       {
           get;
           set;
       }
   }

 

    let productDS = $("#grid").data("kendoGrid").dataSource;

 

    productDS.data(testObj);

}

[BitShift]

Sorry, the javascript is this

function testLoadDS() {
    var testObj = { "OrderID": "1", "Freight": "10.1", "OrderDate": "10/19/2019", "ShipCity": "Austin", "ShipName": "Test123" };

    let productDS = $("#grid").data("kendoGrid").dataSource;

    productDS.data(testObj);
}

[BitShift]

Ok, I had to change my javascript object to an array like so:
This worked.  So now maybe that gives me a clue as to why my actual problem code is still not working

var testObj = [{ "OrderID": "1", "Freight": "10.1", "OrderDate": "10/19/2019", "ShipCity": "Austin", "ShipName": "Test123" }];

[Petar]

Hi Randal,

Do you still need assistance with the case? If you still have questions regarding the current thread, please let me know how I can help you. 

Regards,
Petar
Progress Telerik

[BitShift]

Strange, that after setting the new data for the DataSource, I read it back in the console, and it has infact been set to the new list.

So why wont the grid display it?

[ Edit ]
Turns out, it was this line ( I didnt show this originally). 
$("#linesGrid").empty(); 
I was trying to clear out the grid first before re-loading the DataSource.
Now that I look at the Kendo UI docs - I dont even see an "empty" method on the grid
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid

Why did this prevent the updated DataSource rendering in the grid?  No errors were seen in the Chrome dev console.

 

// where Lines is a javascript object array fetched from an api endpoint
//$("#linesGrid").empty();   //<--- this causes the problem, why ?
var lineGridDS = $("#linesGrid").data("kendoGrid").dataSource;
itemGridDS.data(Lines);

 

 

[BitShift]

Petar - Yes, see my post immediately after yours.  

Basically 2 questions
(1) Why did trying to call a method ".empty()" not cause an error in the dev console and not allow the updated DataSource to be displayed in the grid.
(2) Whenever I need to do something on the clientside, as in this case, I can more or less refer to the Kendo UI / jQuery documentation, correct ?

[BitShift]

Ok, I think I can answer (1) above, not sure what I was thinking, but that will basically clear out the DOM inside the Grid element itself, INCLUDING the datasource.  Ya, that would never have worked.  Still not sure why no error was returned when trying to set the data for the datasource though.

[Petar]

Hi Randal,

I will start with the second question - I would recommend you refer to the Kendo UI documentation. Each component has an API page like the one you've linked for the Grid. Another sections of the documentation which you may find useful are the Widgets and Knowledgebase sections. Navigation through the Widgets section you will find useful basic usage scenarios of the different components. In the Knowledgebase section, you can search for more complicated and usage scenarios. 

About the first question, most probably the jQuery empty method was executed successfully and this is why no error was printed in the console.  To manipulate the Kendo UI DataSource you should use its API.  

Regards,
Petar
Progress Telerik