Good Day,
I have a custom CSS CLASS that renders the background-color of the grids TABLE ROW to 'yellow'.
- tr.background-color-yellow td { background-color: #FFFFCC; }
For example...the above CSS CLASS would 'color' the backgrounds of a TR's set of TD's.
<!-- Here is an example of the initial HTML containing the custom CSS CLASS -->
<tr data-uid="7044a8d8-2946-43f4-9f94-01bff52d2800" role="row" class="background-color-yellow">
<td role="gridcell">11</td>
<td role="gridcell">1111</td>
<td role="gridcell">111</td>
<td role="gridcell">111</td>
<td role="gridcell">111</td>
<td role="gridcell">111</td>
<td class="k-command-cell" role="gridcell">
<a role="button" class="k-button k-button-icontext k-grid-edit" href="#">
<span class="k-icon k-i-edit"></span>Edit
</a>
<a role="button" class="k-button k-button-icontext k-grid-delete" href="#">
<span class="k-icon k-i-close"></span>Delete
</a>
</td>
</tr>THE ISSUE
When using inline-editing on the grid...pressing the CANCEL button wipes-out & replaces any-and-all custom CSS tags in the TR.
<!-- Here is an example of the initial HTML AFTER PRESSING CANCEL...notice the custom CSS CLASS is gone -->
<tr data-uid="7044a8d8-2946-43f4-9f94-01bff52d2800" role="row">
<td role="gridcell">11</td>
<td role="gridcell">1111</td>
<td role="gridcell">111</td>
<td role="gridcell">111</td>
<td role="gridcell">111</td>
<td role="gridcell">111</td>
<td class="k-command-cell" role="gridcell">
<a role="button" class="k-button k-button-icontext k-grid-edit" href="#">
<span class="k-icon k-i-edit"></span>Edit
</a>
<a role="button" class="k-button k-button-icontext k-grid-delete" href="#">
<span class="k-icon k-i-close"></span>Delete
</a>
</td>
</tr>THE WORK AROUND
This bug causes the following kinds of work-around...which I feel is unacceptable.
this.on = {
cancel: {
grid: function (e) {
var isTemplatedRow = e.model.IsTemplatedRow;
if (isTemplatedRow === false) {
// HACK: Kendo overwrites the (tr) rows ENTIRE SET of CSS CLASSES after a 'cancel' is triggered
var uid = e.container.data().uid;
var $context = $(e.container.context);
setTimeout(function () {
// Add the expected class back-in
var $ele = $('tr[data-uid=' + uid + ']', $context)
$ele.addClass('background-color-yellow');
}, 400);
}
}
}
};
JWT Token authentication has become very popular and one of the main tools to provide authorization and authentication.
JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. In authentication, when the user successfully logs in using their credentials, a JSON Web Token will be returned.
Whenever the user wants to access a protected route or resource, the user agent should send the JWT, typically in the Authorization header using the Bearer schema. This can be, in certain cases, a stateless authorization mechanism. The server's protected routes will check for a valid JWT in the Authorization header, and if it's present, the user will be allowed to access protected resources. If the JWT contains the necessary data, the need to query the database for certain operations may be reduced, though this may not always be the case.
It would be really helpful to have a built in functionaly ".Authorization(token)" that adds an authorization header to all the requests made by the grid.
Bug report
When there are 3 levels of filter nesting in the URL clearing of a filter does not apply
Reproduction of the problem
1. Go to https://demos.telerik.com/aspnet-mvc/grid/serverbinding
2. On “Product Name” column apply filter “Contains” with value “a”
3. On “Unit Price” column apply filter “Is greater than” with value “1”
4. On “Units In Stock” column apply filter “Is greater than” with value “1”
5. On “Product ID” column apply filter “Is greater than” with value “1”
6. Clear the filter on “Product Name” column
Expected result: no more filter on “Product Name” column
Actual result: “Product Name” column still has a filter
A workaround is provided in the following Dojo:
https://dojo.telerik.com/UJewihaX
Environment
Kendo UI version: all
Browser: all
Enhancement
JAWS includes hidden columns upon reading the column numbers.
Expected/desired behavior
Hidden columns shall not be included when JAWS reads the column number.
Hidden columns lack aria-hidden="true" property.
Environment
Kendo UI version: a[all]
Browser: [all]
As the title says, I'm getting script errors when attempting to perform a delete function with an MVC grid when in MobileMode.Phone. The attached project will illustrate the problem. Just run it and select delete button for one of the items in the far right column. A popup will appear, but don't click either of the buttons on it yet. Inspect the html with whatever browser you use (I'm using chrome so I just right click and choose select). There will be a "Cannot read property 'data' of undefined" error. If you then click the "Delete" button, you'll get a "Cannot read property 'resolve' of undefined". Then click on the "Cancel" button and you'll get "Cannot read property 'reject' of undefined". I'll attach a pic showing these errors.
I need to be able to utilize my grid in mobile phone mode and delete items. Please help with this.
Also, to get this sample project small enough, I removed the files from the MobileSaveError\lib\KENDOUIMVC\2020.3.915.545 folder. I figure you can replace those easily enough. Is that the right thing to do in this case? I thought maybe I could remove the items in the Packages folder as NuGet/VS will usually restore those. But wasn't 100% sure on that. So if you can tell me or link me to an article about what we can remove to shrink the project size for samples when we need to send them, that would be great.
Thank you,
Steven
Enhancement
FIltering a string field in the Grid with Contains operators and value null throws an error
Reported in 1492459
Current behavior
FIltering a string field in the Grid with Contains operators and value null throws an error
https://demos.telerik.com/aspnet-mvc/grid/remote-data-binding
Expected/desired behavior
An error shall not be thrown
Environment
Kendo UI version: [all]
Browser: [all]
### Bug report
When the GroupPaging option is enabled and the grid is bound to a DataTable, the server error "Value cannot be null" is observed.
### Environment
* **Kendo UI version:** 2020.3.915
* **jQuery version:** 1.12.4
* **Browser:** [all]
I downloaded the latest version of Kendo UI (Version: 2020.1.406) for MVC and upgraded my project to refer the latest JS, CSS and Kendo.MVC (2020.1.406.545).
NoRecords method is behaving differently in the latest version. While fetching records in progress, it displays the 'No record found' message even before completion of the action method. Please see the below image:
It was not happening in the version 2018.2.516, it was showing the 'No record found' message after completion of the action method and only if there is 0 row returned.
Below is the code of Student.cshtml view:
<h4>Student</h4><div class="responstable grid-wrapper custom-dropdown">
@(Html.Kendo().Grid<Kendo2020Demo.Models.Student>()
.Name("StudentGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.Name);
columns.Bound(p => p.Address);
})
.HtmlAttributes(new { style = " min-height: 100px;" })
.NoRecords("No record found.")
.Scrollable()
.Filterable()
.Sortable()
.ColumnMenu()
.DataSource
(
dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetData", "Home"))
)
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)
</div>
Bug report
Using server binding does not render the NoRecords message for the Grid
Reproduction of the problem
@(Html.Kendo().Grid(new List<Product>())
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.ProductID).Groupable(false);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
})
.NoRecords("No records found.")
.Pageable()
.Sortable()
.Scrollable()
.DataSource(d=>d.Server())
.Filterable()
.Groupable()
)
Workarond
A possible workaround is to use local binding by setting the AJAX binding in the DataSource, but keep the initial server binding:
@(Html.Kendo().Grid(new List<Product>())
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.ProductID).Groupable(false);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
})
.NoRecords("No records found.")
.Pageable()
.Sortable()
.Scrollable()
.DataSource(d=>d.Ajax().ServerOperation(false))
.Filterable()
.Groupable()
)
Environment
- Kendo UI version: 2017.3.1026
Bug report
The responsive pager of the grid is shown when the width of the window is a few pixels above 1024 but less than 1035.
Reproduction of the problem
Dojo sample for reproduction:
https://dojo.telerik.com/oNejEYOz
1. Resize the browser to be around 1025 pixels. Just after showing the full pager, refresh the page.
2. The responsive pager is shown.
Expected/desired behavior
The full pager should be shown.
Environment
* **Kendo UI version:** 2020.1.114
* **jQuery version:** 1.12.4
* **Browser:** [all]
Bug report
PersistSelection does not work when GroupPaging is enabled. Error is thrown: "Cannot read property 'Id' of undefined"
Reproduction of the problem
Dojo: https://dojo.telerik.com/aKixuZAy
Expected/desired behavior
No error shall be thrown and rows should be persisted when GroupPaging is enabled
Environment
Kendo UI version: 2020.2.617
Browser: [all]
Bug Report
When the grid is bound to an external dataSource, the AutoBind(false) setting is not serialized and as a result, the grid binds immediately
Reproduction
- Take the basic usage grid demo https://demos.telerik.com/aspnet-mvc/grid/basic-usage
- Extract the data source and set it to the grid
- set AutoBind(false)
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.CustomerViewModel>()
.Name("myDs")
.Ajax(r=>r.Read(a=>a.Action("Customers_Read", "Grid")))
)
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
.Name("grid")
.AutoBind(false)
.DataSource("myDs")
/* other settings */
)Current Behavior
Expected Behavior
The grid should not bind initially.
Environment
Kendo UI version: 2020.2.617
I would like to request the ability to reassign the context of a function in the Kendo UI Grid events. For example, using the DataBound event, setting This to not be the Grid (e.sender) This would be useful to be able to use my TypeScript class methods.
Thank you.
Aligning numeric values in grids is common place and best practise. Kendo Grid does not provide any neat functionality for this, especially in MVC where the model is strongly typed. Where a MVC grid is bound to a model, the Razor Wrapper would work better if it right aligned columns if for example type int (or other numeric types which are better to be right aligned). Where this needs not to be the case a data annotation would suit.
eg.
public class MyModel
{
[AlignRight(false)]
public int ProductID {get; set;}
public int Age {get; set; } // aligned right by default in Kendo Grid because of int type
}
In the above case ProductID would be left aligned, and Age would be right (which could be the default for all integer types)
With this functionality the razor implementation could also provide an align property to override align functionality. An AutoAlign property could provide this functionalityto auto detect from model or not (and also allow this functionality as being off to provide backwards compatibility)
@(Html.Kendo().Grid<MyModel>()
.Name("grid")
.AutoAlign(false)
.Columns(columns =>
{
columns.Bound(c => c.ProductID).AlignRight(false)
columns.Bound(c => c.Age).AlignRight(True)
})
Hi, with the latest version of kendo ui on existing hundred grids when I try to filter for a column I get an error like:
This kind of grid worked perfect on previous versions.
Uncaught TypeError: Cannot read property 'length' of undefined
at init._eachRenderedMenuItem (kendo.all.js:52792)
at init._setMenuItemsVisibility (kendo.all.js:52747)
at init._updateMenuItems (kendo.all.js:52742)
at init.open (kendo.all.js:52609)
at init.trigger (kendo.all.js:164)
at init._triggerEvent (kendo.all.js:51935)
at kendo.all.js:51154
_eachRenderedMenuItem @ kendo.all.js:52792
_setMenuItemsVisibility @ kendo.all.js:52747
_updateMenuItems @ kendo.all.js:52742
open @ kendo.all.js:52609
trigger @ kendo.all.js:164
_triggerEvent @ kendo.all.js:51935
(anonymous) @ kendo.all.js:51154
setTimeout (async)
(anonymous) @ kendo.all.js:51143
each @ jquery-3.4.1.min.js:2
each @ jquery-3.4.1.min.js:2
open @ kendo.all.js:51140
_mouseenter @ kendo.all.js:51465
i @ jquery-3.4.1.min.js:2
handle @ jquery-3.4.1.min.js:2
dispatch @ jquery-3.4.1.min.js:2
v.handle @ jquery-3.4.1.min.js:2
@(Html.Kendo().Grid<Contract>()
.Name(GridId)
.DataSource(dataSource => dataSource
.Ajax() // Specify that ajax binding is used
.PageSize(80)
.Events(events => events.Error("common.gridErrorHandler").RequestStart("waitWindow.show").RequestEnd("waitWindow.hide"))
.Model(model => model.Id(al => al.ContractId))
.Read(read => read.Action("ContractsRead", "Contracts"))
)
.Events(events => events.Change("onRowClick").DataBound("common.onDataBound"))
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div style="display: inline-block;">Select a service to manage Cost per Office</div>
</text>);
})
.Columns(columns =>
{
columns.Bound(p => p.ContractId).Width(45).Title("Reference #").Hidden(true);
columns.Bound(p => p.Name).Title("Service").Width(100);
columns.Bound(p => p.ExpirationDate).Width(60).Format(RequestHelper.GetDateTimeFormat(Request));
columns.Bound(p => p.BillingCycle.Name).Width(53);
columns.Bound(p => p.Value).Title("Amount").Width(75).Format("$ {0:n5}").HeaderHtmlAttributes(new { style = "text-align: right;" }).HtmlAttributes(new { style = "text-align: right;font-weight: bold;" });
})
.NoRecords(PageResources.lblGridNoRecords)
.Filterable()
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Scrollable(s => s.Virtual(true).Height("100%"))
.Sortable() // Enable sorting
.Resizable(resize => resize.Columns(false))
.ColumnMenu(p => p.Columns(false)))
Thank you,
Ion Petcu
Ticket: #1461445
Current behavior
Resizing a column in a group with resizeColumn() resizes always the last column in the group and not the respective one.
Minimal reproduction of the problem with instructions
Dojo: https://dojo.telerik.com/eWoFexan
Environment
kendo ui version 2018.3.1017 and above
Bug Report
When endless scrolling is implemented, manual DataSource operations using the DataSource APIs(query, page, sort, etc.) do not work as expected. The endless scrolling settings are causing paging issues.
Reproduction of the problem
- Visit this Kendo UI Dojo.
- Scroll to 40.
- Click the Reset Filter button.
Current Behavior
The first page is only accessible, and when scrolling down the reads continue to occur.
Expected/desired behavior
The endless scrolling settings should not interfere with manual dataSource operations.
Workarounds
- Solution when read is called, the Kendo UI Grid will reset to its original state(dojo).
kendo.ui.Pager.fn._refreshClick = function (e) { e.preventDefault(); var grid = $("#grid").getKendoGrid(); grid.dataSource.options.endless = null; grid._endlessPageSize = 20; grid.dataSource.pageSize(20); } - Solution which overrides the data(dojo).
kendo.ui.Pager.fn._refreshClick = function (e) { e.preventDefault(); var grid = $("#grid").getKendoGrid(); window.restoreScroll = true; window.scolledValue = grid.content[0].scrollTop; grid.dataSource._data.empty(); grid.dataSource._pristineData = []; grid.dataSource.read(); }
Environment
- Kendo UI version: 2020.1.114
add a grid to a view
open the view with data bound to the grid.
First line of data is not selected.
Now i have to program the ondatabound property for a function which belongs to the grid component. Make it configurable for grids which do not need this feature or vice versa.
When I use lock column, margin is created in the right scroll of the grid. Did you know this problem?
How can I fix this problem?