http://jsbin.com/ohumul/3/edit
$('#refresh').button().click(function(){ $('body').prepend('refresh called.<br/>'); var grid = $("#grid").data("kendoGrid"); grid.refresh(); });5 Answers, 1 is accepted
Rank 1
grid.sync();$('#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
Rank 1
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 */}));
Rank 2
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(); The refresh method repaints the grid using the current data source data. To refresh the data source use its read method:
grid.dataSource.read();
Atanas Korchev
the Telerik team
Rank 2
I will try your solution shortly
Rank 1
TypeError: $(...).data(...) is undefined
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
Rank 1
Rank 1
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>
Rank 1
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));
}
Rank 1
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" }]
};
}
Rank 1
also
vm.updateTestGrid = function() {
var grid = $("#testGrid1").data("kendoGrid");
grid.dataSource.read();
}
I am also facing same problem.
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?
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())
seems like this issue is still present
do you have any update on fixing it?