Calling refresh is not refreshing the grid.

5 Answers 4260 Views
Grid
David
Top achievements
Rank 1
David asked on 02 Dec 2011, 07:24 PM
I made a simple example here using local data. Notice that the refresh button when clicked puts refreshed called. but refreshing is only output on the initial load. 
http://jsbin.com/ohumul/3/edit

$('#refresh').button().click(function(){
    $('body').prepend('refresh called.<br/>');
     
    var grid = $("#grid").data("kendoGrid");
       
      grid.refresh();
       
   
   
  });
Nirmal
Top achievements
Rank 1
commented on 04 Dec 2011, 03:48 PM

Hi,

I am also facing same problem. 
Yvan
Top achievements
Rank 1
commented on 11 Dec 2011, 03:45 PM

Hi,

I'm facing the same issue.

In emergency I'm using DataTables which is very powerful and works well. Maybe also useful for one of you:
http://www.datatables.net/

Does anyone know how use the 'Editing' example with a local javascript array instead of remote crud service?
Igor
Top achievements
Rank 1
commented on 29 Dec 2011, 10:45 AM

Hi,

I'm facing the same issue using the first release of KendoUi.
Let assume : 
var grid = $("#grid").data("kendoGrid");
var new_data = createRandomData(50); 

So I have tried things like:
grid.dataSource.add(new_data);
or 
grid.sync(); 
but they are unsupported methods (old versions?).

What it works for me is:
grid.dataSource .data(  new_data );
grid.refresh(); 

To be sure that data are changed, you can check the data source view:
 JSON.stringify(grid.dataSource.view())
Igor
Top achievements
Rank 2
commented on 16 May 2012, 05:27 AM

hi!
seems like this issue is still present
do you have any update on fixing it?

5 Answers, 1 is accepted

Sort by
0
agv
Top achievements
Rank 1
answered on 05 Dec 2011, 10:42 AM
Try
grid.sync();
David
Top achievements
Rank 1
commented on 09 Dec 2011, 04:51 PM

That still isn't refreshing the grid to the new data.
$('#refresh').button().click(function(){
  $('body').prepend('refresh called.<br/>');
  var l = gdata.length;
  gdata[l] = {ChainRing: l, MidDriveGear: l, MidDriveOutput: l, RearSprocket: l, GearRatio: l+0.1, Motive: l+0.34, GearInch: l+0.23, Speed: l+0.6 };
  var grid = $("#grid").data("kendoGrid");
     
    grid.sync();
 
});


Is this just some issue with using local data?
http://jsbin.com/ohumul/9/edit
0
Yvan
Top achievements
Rank 1
answered on 12 Dec 2011, 08:00 PM
Maybe it would help one of you.

In my case I wasn't updating the data trough the dataSource object. I solved my issue with the following line:

$("#grid").data("kendoGrid").dataSource.add({/* my object */}));
0
Piyush Bhatt
Top achievements
Rank 2
answered on 23 Dec 2011, 07:58 PM
read about this in another thread. worked for me. Strange that refresh() does not do this automatically. Also, the sync on dataSource gives error that object does not have such method.

$(
"#grid").data("kendoGrid").dataSource.read(); 
0
Atanas Korchev
Telerik team
answered on 16 May 2012, 08:28 AM
Hello,

 The refresh method repaints the grid using the current data source data. To refresh the data source use its read method:

grid.dataSource.read();

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!
Igor
Top achievements
Rank 2
commented on 16 May 2012, 09:07 AM

Thanks for quick reply, Atanas!
I will try your solution shortly
Princess
Top achievements
Rank 1
commented on 05 Dec 2012, 03:53 AM

I tried  $("#FileDetailsCreate").data("kendoGrid").dataSource.read(); but on the firebug the error is 
 
    TypeError: $(...).data(...) is undefined


Atanas Korchev
Telerik team
commented on 05 Dec 2012, 07:48 AM

Hello,

 This means that the grid is not yet initialized when this code is invoked or that the selector is wrong. 

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!
Princess
Top achievements
Rank 1
commented on 05 Dec 2012, 07:57 AM

Yes, I just mix up the name of my grid. Anyway, thank you!
ajith
Top achievements
Rank 1
commented on 15 May 2015, 06:01 AM

 

  I have a textbox, in the click event popup a window with grid. and in that grid selected row event textbox filed with valu from grid.   

it works first click in the textbox. and not reopen window

 

can u please help me?

 @{Html.Kendo().Window()
.Name("brandpopup")
.Title("Select Brand")
.Draggable()
.Width(500)
.Height(270)

.Actions(actions => actions
    .Custom("custom")
    .Minimize()
    .Maximize()
    .Close()

    )
.Content(@<text>
    @{Html.Kendo().Grid<IBATechnologies.IBA.Web.Models.AssetBrandViewModel>()
             .Name("BrandPopupGrid")
             .Columns(columns =>
             {
                 //columns.Bound(p => p.UserId).Width(125);
                
                 columns.Bound(p => p.BrandCode).Width(125);
                 columns.Bound(p => p.BrandName).Width(150);
                 
                 //columns.Bound(p => p.Designation).Width(150);
                
             })
             
    .Selectable()
    .Pageable()
    .Sortable()
    .Scrollable()
    
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )))
    .HtmlAttributes(new { style = "height:250px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)

        
        .Model(model => model.Id(p => p.BrandCode))
        .Create(update => update.Action("BrandEditingPopup_Create", "Asset"))
            .Read(read => read.Action("BrandEditingPopup_Read", "Asset"))
           
    )
            .Render();
    }

    </text>
)
    .Render();
}
<script>
    $(document).ready(function () {
        $("#BrandPopupGrid").data("kendoGrid").bind("change", onBranGridRowSelected);
        function onBranGridRowSelected() {

            var grid = $("#BrandPopupGrid").data("kendoGrid");
            var selectedItem = grid.dataItem(grid.select());

            $('#BrandCode').val(selectedItem.BrandCode);
            $('#tbxBrandName').val(selectedItem.BrandName);
            $("#BrandPopupGrid").data("kendoGrid").dataSource.read();
            $("#brandpopup").data("kendoWindow").close();
            
        }
    });
</script>

 

 

Mallika
Top achievements
Rank 1
commented on 19 Aug 2019, 04:52 PM

Thanks. Working :)
Mallika
Top achievements
Rank 1
commented on 19 Aug 2019, 04:59 PM

thx. Working Here is my code

Index.cshtml

@(Html.Kendo().Grid<ProductViewModel>
            ()
            .Name("ProdGrid")
            .Sortable()
            .Editable()
            .Scrollable()

            .Columns(columns =>
            {
                columns.Bound(p => p.ProductID).Width(100);
                columns.Bound(p => p.SupplierID).Width(100);
                columns.Bound(p => p.CategoryID).Width(100);
                columns.Bound(p => p.ProductName).Width(100);
                columns.Bound(p => p.UnitPrice).Width(80);
                columns.Bound(p => p.UnitsInStock).Width(80);
                columns.Bound(p => p.Discontinued).Width(80);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(300);
            })
            .ToolBar(toolbar =>
            {
                toolbar.Create(); // The "create" command adds new data items.
                toolbar.Save(); // The "save" command saves the changed data items.
            })
            .Editable(e => e.Mode(GridEditMode.InLine))
            .HtmlAttributes(new { style = "height:730px;" })
            .DataSource(ds =>
            ds.Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => {
            events.Error("error_handler").RequestEnd("request_end");

    })
    .Model(model =>
    {
        model.Id(product => product.ProductID); // Specify the property which is the unique identifier of the model.
        model.Field(product => product.ProductID).Editable(false); // Make the ProductID property not editable.
    })
    .Read(r => r.Url("Product/Index?handler=Read").Data("forgeryToken")) // Action method invoked when the grid needs data.
    .Create(c => c.Url("Product/Index?handler=Create").Data("forgeryToken"))
    .Update(update => update.Url("Product/Index?handler=Update").Data("forgeryToken"))  // Action method invoked when the user saves an updated data item.
    .Destroy(destroy => destroy.Url("Product/Index?handler=Destroy").Data("forgeryToken")) // Action method invoked when the user removes a data item.

    )
   
    .Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(15))
    )
    <script type="text/javascript">
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                $(".errorMessage").text(message);
                alert(message);
            }
        }
       
        function request_end(e) {
          //Notice that the Name() of the Grid is used to get its client-side instance.
            var grid = $("#ProdGrid").data("kendoGrid");
        switch (e.type) {
            case "create":
                if (e.Errors == undefined && e.response.Total > 0) {
                     alert("Saved Successfully");
                    
                }
                break;

            case "update":
                if (e.Errors == undefined && e.response.Total > 0) {
                    grid.refresh();
                 
                    alert("Updated Successfully");
                   
                   
                }
                break;

            case "destroy":
                if (e.Errors == undefined && e.response.Total > 0) {
                     alert("Deleted Successfully");
                  
                }
                break;

            default:
                $(".errorMessage").text("");
                break;
        }

        return true;
    }
    </script>



    <script>
        function forgeryToken() {
            return kendo.antiForgeryTokens();
        }
    </script>

index.cshtml.cs

 

 public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products)
        {
            //REFER //https://demos.telerik.com/aspnet-core/grid/editing
            if (products != null && ModelState.IsValid)
            {
                foreach (var product in products)
                {
                    SqlAccessLayer.Update(product);
                }
            }
           
            return new JsonResult(new[] { products }.ToDataSourceResult(request, ModelState));
        }

0
Ken
Top achievements
Rank 1
answered on 18 Nov 2016, 05:01 PM

use "dataSource with transport and read" settings if the data needs to be updated after some event.  Do this even if the data is not directly coming through ajax.  If you are using a datasource with transport and read settings, then calling .dataSource.read() will update the data in the UI.

ex

        <div kendo-grid
             k-options="$ctrl.testGridOptions"
             k-ng-delay="$ctrl.testGridOptions"
             id="testGrid1"></div>

 

            var getTestData = function() {
                return [{ a: 1, b: 3 }, { a: new Date().getUTCMilliseconds(), b: new Date().getHours() }];
            }

 

            var initializeTestGrid = function() {
                vm.testGridOptions = {     
                    autoBind: true,

                    dataSource: {
                        transport: {
                            read: function (e) {
                                var testData = getTestData();
                                e.success(testData);
                            }
                        }
                    },
                    columns: [{ field: "a", title: "apples" }, { field: "b", title: "bananas" }]
                };
            }
Ken
Top achievements
Rank 1
commented on 18 Nov 2016, 05:04 PM

also 

            vm.updateTestGrid = function() {
                var grid = $("#testGrid1").data("kendoGrid");
                grid.dataSource.read();
            }

 

Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
agv
Top achievements
Rank 1
Yvan
Top achievements
Rank 1
Piyush Bhatt
Top achievements
Rank 2
Atanas Korchev
Telerik team
Ken
Top achievements
Rank 1
Share this question
or