This is a migrated thread and some comments may be shown as answers.

Problem with grid refreshing

11 Answers 2574 Views
Grid
This is a migrated thread and some comments may be shown as answers.
T
Top achievements
Rank 1
T asked on 05 Feb 2012, 02:05 PM
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 ?

11 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 06 Feb 2012, 08:36 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 09 Feb 2012, 11:55 PM
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
0
Rosen
Telerik team
answered on 14 Feb 2012, 05:23 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 14 Feb 2012, 05:41 PM
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.
0
Rosen
Telerik team
answered on 15 Feb 2012, 09:53 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
bri norq
Top achievements
Rank 1
answered on 15 Feb 2012, 11:55 PM
<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.

0
Rosen
Telerik team
answered on 16 Feb 2012, 08:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
bri norq
Top achievements
Rank 1
answered on 16 Feb 2012, 05:44 PM
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
0
Joel
Top achievements
Rank 2
answered on 27 Jul 2015, 05:01 PM
$('#grid').data('kendoGrid').dataSource.read();  was exactly what I needed. works perfectly.
Thank you for your assistance!
0
Vinod
Top achievements
Rank 1
answered on 07 Jul 2017, 07:00 AM

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

0
Stefan
Telerik team
answered on 12 Jul 2017, 06:13 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
T
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
John
Top achievements
Rank 1
Rosen
Telerik team
bri norq
Top achievements
Rank 1
Joel
Top achievements
Rank 2
Vinod
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or