I have tried most of the examples that come with the grid. My problem is this.
this is my class that is bound to this view
@model IEnumerable<VaultLeitarvefur.Models.vaultNidurstodur>
this is my grid that is bound to said model
@(Html.Kendo().Grid<VaultLeitarvefur.Models.vaultNidurstodur>(Model)
.Name("grid")
.Columns(columns =>
{
//columns.Bound(p => p.file.Name).Filterable(false);
columns.Bound(p => p.Id).Filterable(false).Visible(false);
columns.Bound(p => p.file.Name).Title("Heiti");
columns.Bound(p => p.file.ModDate).Format("{0:dd/MM/yyyy}").Title("Breytingardags");
columns.Bound(p => p.file.VerNum);
columns.Bound(p => p.file.DesignVisAttmtStatus);
columns.Bound(p => p.file.FileStatus);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
I have a search textbox and a search button
I have home/index which returns a list<vaultNidurstodur> which is the class that I want to display in the grid.
currently when I start the project index is displayed and all data is populated in the grid, and filtering within the grid itself works fine.
I want to be able to enter data into the textbox and do a contains on that string in vaultNidurstodur.Name column , when I try this the data in the grid never gets filtered. I would prefer if this was a ajax call so the grid can be updated without a refresh.
I would like to start off with an empty grid and then use the search string to filter from list<> the reason is that I can expect 40-50000 results with file references and I would rather not send all that data.
Can you point me in the right direction ?
Regards,
Emil Thor Emilsson
Developer
Snertill.is
6 Answers, 1 is accepted
Rank 1
In order to implement the feature you can use the following example as starting point. It uses a ComboBox to filter the items in the Grid, however, the basic functionality is similar to what you describe.
Regards,
Viktor Tachev
Telerik
Rank 1
This example you pointed out, requires me to load all data into the grid and then filter that. Not quite what I had in mind, it would be a lot faster if I just loaded into the grid what matches my searchstring.
Are you saying I cannot change the contents of a grid once I have loaded it with data ?
I would like to reload data into the grid each time you press the search button with different results from different search strings.
Regards,
Emil
The number of items returned to the client depends on the configuration of the DataSource. You can configure the widget to use ServerOperations. This way you can perform paging, sorting, filtering, etc. on the server side and return only the relevant items (e.g. the items on the current page) to the client. Check out the following article that elaborates in more detail on the feature.
Alternatively you can implement Custom Binding and implement how the data is requested based on your requirements.
Regards,
Viktor Tachev
Telerik
Rank 1
Hello, I also got the same problem too . I just build a testing project with the grid.
Then I modified the grid in the home/index view. No records will be loaded in the beginning.
After that I add a Javascript click event to the last button.
The Javascript create a new datasource and use setDataSource function set to the grid.
The I run the project and click the button. The ajax call was successful.
I got the json data at client. But the grid did not refresh with the new datasource.
Please advise. Thanks.
- Index.cshtml
<p>
@(Html.Kendo()
.Button()
.Name("Button")
.Content("Button")
.HtmlAttributes(new { @class = "textButton" } )
.Events(ev => ev.Click("onClick"))
)
</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-18 col-md-12">
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("grid")
.EnableCustomBinding(true)
.Columns(columns =>
{
columns.Bound(p => p.OrderID);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("OrdersEmpty_Read", "Grid"))
)
)
</div>
</div>
</div>
<script>
function onClick(e) {
var ds = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
dataType: "jsonp",
url: '/Grid/Orders_Read'
}
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: {type : "number"},
ShipName: {type : "string"},
ShipCity: {type : "string"}
}
}
}
});
//ds.read();
$("#grid").data("kendoGrid").setDataSource(ds);
}
</script>
- GridController.cs
{
var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
{
OrderID = i,
Freight = i * 10,
OrderDate = DateTime.Now.AddDays(i),
ShipName = "ShipName " + i,
ShipCity = "ShipCity " + i
});
return Json(result.ToDataSourceResult(request));
}
public ActionResult OrdersEmpty_Read([DataSourceRequest]DataSourceRequest request)
{
var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
{
OrderID = i,
Freight = i * 10,
OrderDate = DateTime.Now.AddDays(i),
ShipName = "ShipName " + i,
ShipCity = "ShipCity " + i
});
DataSourceRequest BlankResult = new DataSourceRequest();
return Json(BlankResult);
}
}
In order to show an empty grid initially you can set the AutoBind property to false.
Please examine the following thread that discusses similar behavior as the one you describe:
Regards,
Viktor Tachev
Telerik