Problem with grid refreshing

[T]

Hi
I created a grid using this code

$("#grid").kendoGrid({

          dataSource: {

              transport: {

                   read: { url: "@Url.Action("GridDataSource")", contentType:"application/json; charset=utf-8" }

          }

          },

          columns:[{field:"Name",title:"Name"}]

      });

as You can see data for grid are downloaded from server using function GridDataSource. This function return JSon object.

public JsonResult GridDataSource()

       {

           return Json(ProductsList, JsonRequestBehavior.AllowGet);

       }

For time to time I have to refresh grid however it seems that refresh function doesnt affect grid. So far I've tried

$("#grid").data("kendoGrid").dataSource.read();

 $("#grid").data("kendoGrid").refresh();

$("#grid").data("kendoGrid").dataSource.sync();

Unfortunatelly non of methods presented above is working. Is there any way to force grid to refresh ?

[Atanas Korchev]

Hello,

 This should refresh the grid:

$("#grid").data("kendoGrid").dataSource.read(); 

The refresh method populates the grid again from the data source. If the data hasn't change the grid won't change either.

Regards,
Atanas Korchev
the Telerik team

[John]

I would love it if refresh pulled data fresh from the server... but it isn't. 

Looking to accomplish these functions.

destroy - remove a record in the grid data set

refresh - (both of these work, with different goals, read only or send changes with sync)
jQuery('#grid').data('kendoGrid').dataSource.read() 
$("#grid").data("kendoGrid").dataSource.sync()

create - have not figured this one out, want to create a record like update but new one to insert

update - for current row, want to pull it out to a popup window for editing

[Rosen]

Hi John,

I'm afraid that your question is a bit unclear. Could you please provide some additional information about what you are trying to achieve, code snippets demonstrating your current implementation  will be also appreciated.

Greetings,
Rosen
the Telerik team

[John]

I found this in another thread...

$("#grid").data("kendoGrid").dataSource.read(); 


Though when I tried the "refresh()" method it did not work.

When speaking of database interaction we speak of CRUD (Create, Read, Update, Delete). It seems to me all these functions should be there and be connected with both event handlers as well as triggers. Create for instance should let me add a new record to the dataset through JavaScript. All of this should be able to be managed through JavaScript in addition to the magnificent UI you guys have done.

[Rosen]

Hello John,

Indeed, the CRUD operation are available through the DataSource API. Please refer to our online documentation in particular to add, remove methods. In order to update an existing record you should get it through the DataSource's get method and use the returned Model instance's set method to set the values:

var model = dataSource.get(10258); // get the record by the id
model.set("ShipCountry", "Austria"); // set the ShipCountry to Austria

//..
dataSource.sync(); // send the changes

Regards,
Rosen
the Telerik team

[bri norq]

<input type='button' onClick='reloadTheGrid();' />

        <div id="example" class="k-content">
            <div id="grid"></div>

            <script>
                
                function reloadTheGrid () {
                    
                    $("#grid").data("kendoGrid").dataSource.read();                    
                    $("#grid").data("kendoGrid").dataSource.sync();
                }

I added it to /examples/web/grid/local-data.html
Why doesn't this work? 

How about putting out a working example of refreshing the Grid?
Continuing to tell people that .read() will work when it clearly DOES NOT isn't helping anyone.

[Rosen]

Brian,

Could you please specify from where you would expect the DataSource to be refreshed as you are using local data? Did you changed the data through the DataSource's data method?

Regards,
Rosen
the Telerik team

[bri norq]

Thanks Rosen!

Called the .data( myNewData ) on Datasource worked!
However calling .refresh() will revert the grid to the original data!
Calling .refresh was hiding the working .data method.
Maybe .refresh() should instead be called .revert(), because that's how it appears to work.

Anyway, to my local copy of /examples/web/grid/local-data.html I made the changes below to prove it works.
I added a button above the grid to call my reloadTheGrid() method which only does two things:

1. create or get new data (or in an actual application I would get the data from an Ajax call, not a call to create random data).
2. update the grid with theNewData using the .data( myDataVar ) on the dataSource on the data( "kendoGrid" ) on the grid.

<input type='button' onClick='reloadTheGrid();' />

        <div id="example" class="k-content">
            <div id="grid"></div>

            <script>
                
                function reloadTheGrid () {
                    var theNewData = createRandomData(50);
                    $("#grid").data("kendoGrid").dataSource.data( theNewData );
                }
 
-Brian

[Joel]

$('#grid').data('kendoGrid').dataSource.read();  was exactly what I needed. works perfectly.
Thank you for your assistance!

[Vinod]

Hi Atanas, when tried this in js file

$("#grid").data("kendoGrid").dataSource.read(); 

but javascript is not working then

js:

angular.module("KendoDemos", ["kendo.directives"])
     .controller("MyCtrl", function ($scope) {
         $scope.mainGridOptions = {
             dataSource: {
                 type: "json",
                 transport: {
                     read:
                     {
                         url: "/Validation/GetTestSuiteDetails",
                         dataType: "json",
                     },
                     destroy:
                       {
                           url: "/Validation/DeleteTestSuite",
                           type: "POST",

                       },
                     create:
                     {
                         url: "/Validation/SaveTestSuite",
                         type: "POST",

                     },
                     update:
                     {
                         url: "/Validation/UpdateTestSuite",
                         type: "POST",

                         parameterMap: function (options, operation) {
                             if (operation !== "read" && options.models) {
                                 return {
                                     models: kendo.stringify(options.models)
                                 };
                             }
                         }
                     },
                 },
                 schema: {
                     data: "data", total: "pageSize",
                     model:
                     {
                         id: "TestSuiteId",
                         fields: {
                             TestSuiteId: { editable: false, nullable: true, type: "number" },
                             TestSuite1: { editable: true, nullable: true, type: "string" },
                             TestSuiteDescription: { editable: true, nullable: true, type: "string" },
                             IsActive: { editable: true, nullable: true, type: "boolean" },
                             TestSuiteOwner: { editable: true, nullable: true, type: "string" },
                             CreatedBy: { editable: true, nullable: true, type: "string" },
                         }
                     }
                 },
                 pageSize: 5,
                 serverPaging: false,
                 serverSorting: false
             },
             toolbar: [{ name: "create", title: "create new" }],
             sortable: true,
             pageable: true,
             resizeable: true,
             refresh: true,
             columns: [
                  { field: "TestSuiteId", title: "TestSuite Id", width: "120px", hideMe: true },
                  { field: "TestSuite1", title: "TestSuite", width: "120px" },
                  { field: "TestSuiteDescription", title: "TestSuite Desc", width: "40px" },
                  { field: "IsActive", title: "IsActive", width: "120px" },
                  { field: "TestSuiteOwner", title: "TestSuite Owner", width: "120px" },
                  { field: "CreatedBy", title: "Created By", width: "120px", editable: false },
                  { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
             editable: "popup",
         };

         $scope.detailGridOptions = function (dataItem) {
             return {
                 dataSource: {
                     type: "json",
                     transport: {
                         read: "http://localhost:17342/validation/kendoGettestcases"
                     },
                     serverPaging: false,
                     serverSorting: false,
                     serverFiltering: false,
                     pageSize: 5,
                     schema: { data: "data", total: "pageSize" },
                     filter: { field: "TestSuiteId", operator: "eq", value: dataItem.TestSuiteId }
                 },
                 //scrollable: false,
                 sortable: { mode: "single", allowUnsort: false },
                 pageable: true,
                 columns: [
                 { field: "TestCaseId", title: "TestCase Id", width: "10px" },
                 { field: "TestCaseName", title: "TestCase Name", width: "60px" }

                 ]

             };
         };

         $("#grid").data("kendoGrid").dataSource.read();

     })

 

cshtml:

@{
    ViewBag.Title = "kendoui";
    Layout = "~/Views/Shared/_KendoLayout.cshtml";
}
<script src="~/AngularController/Kendo.js"></script>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">

        <kendo-grid id="kgrid" k-options="mainGridOptions" k-rebind="gridOptions">
            <div k-detail-template>
                <kendo-tabstrip>
                    <ul>
                        <li class="k-state-active">TestCases</li>
                    </ul>
                    <div>
                        <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
                    </div>
                </kendo-tabstrip>
            </div>
        </kendo-grid>

    </div>
</div>
<style>
    .contact-info-form {
        list-style-type: none;
        margin: 30px 0;
        padding: 0;
    }

        .contact-info-form li {
            margin: 10px 0;
        }

        .contact-info-form label {
            display: inline-block;
            width: 100px;
            text-align: right;
            font-weight: bold;
        }
</style>

 

output in browser:

TestCases 

 

displaying only "TestCases" in browser

 

 

Please help me out, Thanks in Advance

[Stefan]

Hello Vinod,

After inspecting the code, I noticed that the Grid ID is set to "kgrid", but the application is trying to find a Grid with id = "grid".

Please check if using the following line to refresh the Grid will achieve the desired result:

$("#kgrid").data("kendoGrid").dataSource.read();

Also, as this is an Angular application, I can suggest checking the Angular approach to retrieve the Grid instance:

http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references

Regards,
Stefan
Progress Telerik