kendo ui vs slickgrid - kendo-ui

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

Related

Kendo Grid first row just for searching

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.

Kendo Grid column resize issue when having the column width property set

I have a Kendo UI grid (using MVC) created with the snippet here.
#(Html.Kendo().Grid<EntityResultTypeWhichDoesntMatter>().Name("searchresults")
.Events(events => events.DataBound("onDataBound"))
.Pageable()
.Scrollable(s => s.Height("auto"))
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Driver_Read", "Driver").Data("getSearchCriteria"))
.PageSize(10)
).Columns(s =>
{
s.Bound(p => p.HiddenIdField).Visible(false);
s.Bound(p => p.FirstName).Title("First Name").Width(150);
s.Bound(p => p.LastName).Title("Last Name").Width(150);
s.Bound(p => p.EmployeeNumber).Title("Employee Number").Width(170);
s.Bound(p => p.ExtraField1).Title("Extra Field1").Width(180);
s.Bound(p => p.ExtraField2).Title("Extra Field2").Width(170);
s.Command(command => command.Custom(Edit).Click("edit")).Width(80).Visible(Model.CanEdit);
}).Filterable().Resizable(e=>e.Columns(true)))
As you can see, the columns are specified with explicit "width" properties and also the grid is "Resizable" too.
The issue that I'm facing is that when dragging the mouse to resize the grid, it shows like the below one
the blue box in the middle of the first column heading represents the position of the mouse pointer while dragging. It's kind of an odd experience as the resize is not running along with the mouse position. I saw this solution but it didn't seem to work for me. Any idea? Thanks.
The column widths are too small and their sum is less than the total Grid width. This leads to "jumping" of the currently resized column. The documentation explains more:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns

Kendo grid pager issue after loading new data

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.

kendo combobox different css for alternative items

I am having an mvc kendo CombBox declared as
var comboBox = Html.Kendo().ComboBox()
.Name("Combo")
.Placeholder("Select a val...")
.DataTextField("Description")
.DataValueField("Description")
.AutoBind(false)
.Filter(FilterType.Contains)
.DataSource(source => source
.Read(read => read.Action("XYZ", "ABC").Data("callList"))
.ServerFiltering(true)
)
.HtmlAttributes(new { style = "width:400px" });
Is there any way to have different css for alternative items.
I couldnt find any thing in the kendo documentation. I also tried with JQuery but had failed. Can anyone tell if there is solution for this.
Thanks.
Depending on your browser support (IE9 or higher), you can do this with plain old CSS.
#Combo .k-item:nth-child(odd) {
background-color: #f00;
}
Try this way.
$(document).ready(function () {
$("#States").kendoComboBox();
var cmb = $("#States").data("kendoComboBox");
cmb.ul.find("li:odd").css("background-color", "#C0C0C0");
cmb.ul.find("li:odd").css("background-color", "#FFFFFF");
});
check this kendo dojo http://dojo.telerik.com/ePIQu
I am using Kendo Web not MVC but the result will be same as long as this script runs after the grid is populated.

How to set up Kendo UI mvc grid with checkbox control

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.

Resources