I have a project which uses Telerik Kendo.
In the Kendo Grid, we need to make the first row editable so the user can type inside it to use it to search the data. Actually, the Kendo grid provides this functionality when you click on the header of the of the grid, but my requirement is to provide this functionality.
I searched the web for hours, without reaching any Result.
I do not think I need to provide any code here, because I really do not know the way to go.
The project is ASP.NET MVC, and I am using Telerik MVC wrapper.
I used the row-filter feature which provided by Telerik, and it was good for me.
but I have small problem.
here it is what I used,
function templateMethod (args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "color",
dataValueField: "color",
valuePrimitive: true
});
}
The previous example is from documentation of the Telerik from here
Keep in mind that the passed dataSource instance may still not be populated at the time the template function is called, if the Grid uses remote binding.
I am really using remote binding, and the data is NOT coming ,as the documentation state, the problem is that the documentation warned from this problem but it did not provide any solution for it.
How can I repupolate the kendoDropDownList again, after the data is coming from the remote server?
#(Html.Kendo().Grid<SomeClassName>()
.BTGrid(GridName)
.Resizable(e => e.Columns(true))
.Filterable(e => e.Mode(GridFilterMode.Row))
.Columns(columns =>
{
columns.Bound(x => x.VardiyaGrubu).Filterable(e => e.Cell(r => r.Template("templateMethod").ShowOperators(false).Operator("contains").SuggestionOperator(FilterType.Contains) ));
})
.Groupable(config => config.Enabled(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(x => x.Id(r => r.RefKey))
.Events(ev => ev.RequestEnd("onRequestEnd"))
.Read(read => read.Action("CevrimZamaniRaporu", "Raporlar").Data(GridName + "_LoadData"))))
I tried to set ServerOperation to true and false in both cases it does not change.
Related
I don't really know how to achieve my requirement which is:
Allowing users to user sorting/filtering on complete dataset
Server Side intially default filter
So basically I want to set the client filter control to a server side defined value. After page load the user could overwrite this setting and retrieve a list of the complete data set.
I am using following Grid:
#(Html.Kendo().Grid<SubscriptionViewModel>()
.DataSource(dataSource => dataSource
...
.ServerOperation(true)
)
.Name("subscriptionsGrid")
.Columns(columns =>
{
...
columns.Bound(p => p.SubscriptionValidStatus).Filterable(filterable=>filterable.UI("subscriptionStatusFilter")).HeaderHtmlAttributes(new { style = "white-space: normal; vertical-align: top" });
....
})
.Scrollable(a => a.Height("700px"))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
)
...
.Sortable()
.Filterable(filterable => filterable
.Extra(false)
)
)
thx for your possible solution Dinglemeyer
I just figured out how to do it server side; by adding:
.Filter(factory => factory.Add(model=> model.SubscriptionValidStatus).IsEqualTo("Aktiv"))
to datasource!
Rather than a server side default filtering, you could have a client side event add the filter on page load... The practical effect will be your filter in place, at which point a user could select the filter widget in the column header to remove it, or they could add more filters to other columns. I've taken some of my code that I use to do this and renamed it for your grid's name.
Try this out!
In your grid definition, add a events like the following:
.Events(events => events.DataBound("dataBoundSetFilter"))
Then have a javascript function to set the filter of a column with your preferred filtering:
<script type="text/javascript">
// hasBound variable set on page load to false, will be set true after Grid databound event
var hasBound = false;
function dataBoundSetFilter(e) {
// If the grid has not yet been data-bound, apply this here filter
if (hasBound === false) {
//alert("Start");
// Get a reference to the grid
var grid = $("#subscriptionsGrid").data("kendoGrid");
// Apply a filter to the grid's datasource
grid.dataSource.filter({ field: "SubscriptionValidStatus", operator: "eq", value: true });
// Set hasBound = true so this won't be triggered again...
hasBound = true;
}
}
</script>
I was looking for row filter, and add multiple filters in it. I found the following article very helpful. It is using [Kendo.Mvc.CompositeFilterDescriptor] to filter
https://www.telerik.com/forums/how-do-i-use-compositefilterdescriptor-to-set-the-initial-datasource
I have a problem with the Kendo grid pager misbehaving after loading new data into a grid. The grid is loaded when the page loads, configured as follows:
#(Html.Kendo().Grid<MyModel>()
.Name("Grid")
.Columns(columns =>
{
//snipped
})
.Scrollable()
.Sortable(sort => sort.Enabled(true))
.Pageable(pager => pager.PageSizes(new int[] {10, 25, 50, 100}))
.Events(events => events.DetailExpand("detailExpand").DetailCollapse("detailCollapse").DataBinding("onDataBinding"))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Sort(sort => sort.Add(Model.sort).Order(Model.Direction))
.PageSize(Model.PageSize)
.Events(events=>events.Error("onError"))
.Read(read => read.Action("Summary", "Summary").Data("getFilterModel")))
.Events(events => events.DataBound("dataBound"))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
);
I have some controls on the page that serve as filters for the grid content. the getFilterModel function returns the values of those filters. When the user clicks the "Filter" button, I call read on the grid data source.
<button class="k-button" id="get" type="button" onclick="$('#Grid').data('kendoGrid').dataSource.read();return false;">Filter</button>
This works OK on initial page load, and if I reload the grid with a number of rows <= the original number of rows. If I reload with a larger number of rows, the pager shows the correct count. But, if I try to click to advance to the next page, the pager reverts to showing 1 page only, and the grid shows empty.
Example: initial load contains 3 records, page size 25. Pager shows 1 page. OK. Change filters so the grid loads 42 rows. Pager shows 2 pages, set to page 1, and "1-25 of 42 items". Click to advance to page 2; grid shows no rows, pager shows 1 page and "26-25 of 25 items"
Does the pager need to be explicitly reset somehow?
This is an older version of Kendo MVC...DLL shows version 2013.3.1119.340.
In this case, Kendo MVC and I outsmarted ourselves.
The getFilterModel function returned an object that contained both Page and PageSize properties, which get translated into query param names in the HTTP request. Those in turn become properties on the FilterModel object that is the model for the controller action. On the server side, the controller action calls the Kendo ToDataSourceResult extension method which apparently interpreted Page and PageSize and only returned the first page of the results.
Changing the names of those properties to GridPage and GridPageSize solved the problem. I had included them because I wanted to persist them as part of the grid state, but I may be better off finding another way to do that.
I am using slickgrid in my applications, but lately I was facing some bugs and weird behavior in slickgrid(specially related to grouping). There are lots of public and private repositories and not sure which is good.
I was thinking of using kendoui. But have below questions in mind -
1) Can kendoui provide better performance than slickgrid when UI have huge data say 50k records?
2) Do kendoui grid have same features as slickgrid have? Mostly excel style feature like automatically populating value for columns when you drag over rows.
Thanks in advance.
Use of Slick grid can be complicated as it should be done on javascript. So the drawback of this grid is that this grid needs to be filled on document ready if we want to display it in View in MVC. Advantage of using this grid is that it is free.
On other hand, using kendo grid gives flexibility for the user to use it on View itself(as shown below). So therefore this grid runs faster as compared to Slick grid. KendoUI is a Paid UI.
//Controller
List<Student> Studentlist = new List<Student>();
FillStudentsObject(Studentlist);
return View(Studentlist);
//View
#using Kendo.Mvc.UI;
#using KendoGridWork.Models;
#model List<Student>
#(Html.Kendo().Grid(Model).Name("StudentModel")
.Columns(column =>
{
column.Bound(p => p.ID).Width(30).EditorTemplateName("#=GetID(this)#");
column.Bound(p => p.First_Name).Width(100);
column.Bound(p => p.Last_Name).Width(100);
column.Bound(p => p.Division).Width(30);
column.Bound(p => p.Standard).Width(30);
column.Bound(p => p.Percentage).Width(50);
})
.Selectable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false)).Navigatable()
.Filterable()
.DataSource(datasource=>datasource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
}))
)
KendoUI & slickgrid
For mine opinion Kendo UI would be better. because of Web Accessibility, simply put, is the creation of sites and applications that can be fully experienced by the broadest number of users. That includes disabled users, who typically visit the sites we create with the help of assertive technologies, like a screen reader. go ahead for Kendo UI
Someone pointed me to Kendo Bind to Data Table, which has this code in the grid builder:
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
columns.Bound(column.ColumnName);
}
})
This works, but I also want to add an "edit" column, so I added this line before the foreach:
columns.Command(command => command.Edit().Text("Edit").UpdateText("Submit")).Width(70).HtmlAttributes(new { style = "text-align: right;" });
which throws "Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions."
How can I add an Edit column?
As it turns out, "How can I add an Edit column?" is the wrong question. There is nothing wrong with the code to add the Edit command; however, adding it surfaced the problem that was reported. In other words, the "Template" in the error message is the Edit template which doesn't know what column in the DataTable to use for its Id.
When defining the DataSource for the grid, I had this code:
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
})
as defined in a sample in a Telerik support forum. This was OK for simply displaying the data in a grid, but when I introduced the idea of Editing, it then mattered that there was no Model.Id. The question then became, how do I define an Id when the Model is a DataTable. That is a separate question, which I have posted here.
I am using Kendo UI MVC grid. One of the properties of the model is bool, so I need to present it in grid as checkbox. By default Kendo UI present it as "true" and "false" values in the column. So you need to first time to click to get checkbox, then second time to click to change value of the combobox. Instead of having default values from grid, I set ClientTemplate, so I got checkbox instead of "true" and "false" values.
c.Bound(p => p.GiveUp)
.Title("Giveup")
.ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />")
.Width(50);
This grid uses batch editing and in-grid editing (GridEditMode.InCell)
.Editable(x => x.Mode(GridEditMode.InCell))
.DataSource(ds => ds.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error"))
.Batch(true)
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Orders", "Order").Data("formattedParameters"))))
So what I would like to have is ability for user to click on checkbox and change value of my model, but unfortunately that doesn't work. I can see visually checkbox's value is changed but I don't see red triangle that marks cell as changed, and when I click on add new item button, value from checkbox disappear.
Please advice on what I am doing wrong.
Thanks in advance.
For those who would like to see how full code looks like.
Home.cshtml
#(Html.Kendo().Grid<OrdersViewModel>()
.Name("Orders")
.Columns(c =>
{
c.Bound(p => p.Error)
.Title("Error")
.ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
.HtmlAttributes(new {style = "text-align: center"})
.Width(50);
<script>
$(function() {
$('#Orders').on('click', '.chkbx', function() {
var checked = $(this).is(':checked');
var grid = $('#Orders').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Error', checked);
});
});
</script>
Basically when you add/remove records from the Grid the red triangles always disappear (or when you sort/page/filter etc), the checkbox is not the problem with the red triangles.
Now for the checkbox if you create a ClientTemplate which is again a checkbox you will need to click one time to put the cell into edit mode (you will see no difference because the editor template is again a checkbox) so you will need to click second time to actually change the value.
What I suggest you as best practice is to use the approach covered here - it is way more faster (less operations for the Grid) and it easier than applying extra logic to handle the two clicks with the approach above.