Problem with grid refreshing

12 posts, 0 answers
  1. T
    T avatar
    3 posts
    Member since:
    Feb 2012

    Posted 05 Feb 2012 Link to this post

    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 ?
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 06 Feb 2012 Link to this post

    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!
  3. John
    John avatar
    24 posts
    Member since:
    Nov 2011

    Posted 09 Feb 2012 Link to this post

    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
  4. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 14 Feb 2012 Link to this post

    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!
  5. John
    John avatar
    24 posts
    Member since:
    Nov 2011

    Posted 14 Feb 2012 Link to this post

    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.
  6. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 15 Feb 2012 Link to this post

    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!
  7. bri norq
    bri norq avatar
    4 posts
    Member since:
    Oct 2011

    Posted 15 Feb 2012 Link to this post

    <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.

  8. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 16 Feb 2012 Link to this post

    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!
  9. bri norq
    bri norq avatar
    4 posts
    Member since:
    Oct 2011

    Posted 16 Feb 2012 Link to this post

    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
  10. Joel
    Joel avatar
    4 posts
    Member since:
    Aug 2013

    Posted 27 Jul 2015 in reply to John Link to this post

    $('#grid').data('kendoGrid').dataSource.read();  was exactly what I needed. works perfectly.
    Thank you for your assistance!
  11. Vinod
    Vinod avatar
    3 posts
    Member since:
    Jun 2017

    Posted 07 Jul 2017 in reply to Atanas Korchev Link to this post

    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

  12. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 12 Jul 2017 Link to this post

    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 visualization (charts) and form elements.
Back to Top