Here is my columns binding for grid
.Columns(columns =>
{
columns.Bound(c => c.Code);
columns.Bound(c => c.Value).MinScreenWidth(768);
columns.Bound(c => c.MinValue).MinScreenWidth(768);
columns.Bound(c => c.Type).MinScreenWidth(768);
columns.Bound(c => c.CurrencyCode).MinScreenWidth(768);
columns.Bound(c => c.IsActive).MinScreenWidth(768);
columns.Bound(c => c.Id).ClientTemplate("bla-bla");
})
The result for this config is
And if I add another column, then all responsiveness breaks
.Columns(columns =>
{
columns.Bound(c => c.Code);
columns.Bound(c => c.Value).MinScreenWidth(768);
columns.Bound(c => c.MinValue).MinScreenWidth(768);
columns.Bound(c => c.Type).MinScreenWidth(768);
columns.Bound(c => c.CurrencyCode).MinScreenWidth(768);
columns.Bound(c => c.IsActive).MinScreenWidth(768);
columns.Bound(c => c.IsInfinite).MinScreenWidth(768); //extra column
columns.Bound(c => c.Id).ClientTemplate("bla-bla");
})
Is there any reason why is it hiding? And is there any workaround except manual display/hide?
UPDATE 2019-02-15:
One more interesting fact I did not notice before: this happens only in Google Chrome DevTools device. I was trying to reproduce it again, but it works ok if you resize normal window to mobile width, if I enable any device in DevTools (e.g. Galaxy S5) then it breaks.
Regarding names, I can't say it is one column in model that breaks grid, and there is weak correlation. Few tests (note: all columns except Code have .MinScreenWidth(768):
1 Code column + 9 Value columns => only Code is displayed;
1 Code column + 9 CurrencyCode columns => grid is broken;
1 Code column + 8 Value columns + 1 CurrencyCode column => only Code is displayed;
1 Code column + 8 Value columns + 9 CurrencyCode column => grid is
broken.
Related
I have a MVC Kendo grid where one column is a client template that actually uses multiple fields. By default the built in filtering is only applied to the field the column is bound to. How do I override that so it considers both fields. Ie, when I search for "Contains" "De" a column that displays "Detroit, MI" should return.
Here's what I have so far:
MVC View
#(Html.Kendo().Grid<ViewModel>()
.DataSource(dataSource => dataSource
.Custom()
.Transport(t =>
{
t.Read(r => r.Action("StatusGridRead", "DeviceStatus"));
})
.Schema(schema => schema
.Data("Result.Data")
.Total("Result.Total")
.Errors("Result.Errors")
.Model(m =>
{
m.Id(f => f.Id);
m.Field(f => f.StateOrProvince);
m.Field(f => f.City);
...
})
)
)
.Columns(columns =>
{
columns.Bound(c => c.StateOrProvince).Title("City & State").ClientTemplate("#=City#, #=StateOrProvince#");
...
})
.Events(e=>
{
e.Filter("statusGridFilter");
})
.Sortable()
.Filterable(f =>
{
f.Extra(false);
f.Operators(o => o.ForString(s =>
{
s.Clear();
s.Contains("Contains");
s.IsEqualTo("Is Equal To");
s.StartsWith("Starts With");
s.EndsWith("Ends With");
s.DoesNotContain("Does Not Contain");
s.IsNotEqualTo("Is Not Equal To");
}));
})
)
Javascript
function statusGridFilter(e) {
if (e.field == "StateOrProvince") {
//What do I do here?
}
}
I understand if I made a column for city and one for state that would resolve this issue, however I actually have a similar scenario (client template with many string fields displayed) where that won't work and am just picking this as the easiest example. Other than making 1 column for 1 field, I'm open to any other ideas that may solve filtering for this scenario.
I have a Kendo grid that displays many columns. I have a column for SSN. When user clicks on the filter and types in 123-45-6789 it filters the correct SSN, however, when user types in 123456789 nothing is filtered. Is there any way that it can filter only 9 numbers with or without dashes.
columns.Bound(p => p.SSN)
.Title("SSN")
.Width(100);
.HtmlAttributes(new {style = "height: 579px; width: 110%"})
.Scrollable()
.Sortable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.IsEqualTo("Is equal to")
.StartsWith("Starts with")
.IsNotEqualTo("Is not equal to")
)
)
)
You can set the filter to use a kendoMaskedTextBox like this:
<script>
function ssnFilter(element) {
element.kendoMaskedTextBox({
mask: "000-00-0000"
});
};
</script>
#(Html.Kendo().Grid<YourModel>()
.Name("YourGridName")
.Columns(columns =>
{
columns.Bound(p => p.SSN).Filterable(f => f.UI("ssnFilter"));
}
)
Kendo MaskedTextBox documentation
Kendo Grid Filter Customization documentation
I have a kendo MVC grid that has a bound column like below
columns.Bound(c => c.CreatedDate).Format("{0:M/d/yyyy h:mm tt}").Title("Submitted on").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).Format("{0: MM/dd/yyyy HH.mm.ss}");
the column formats fine when first loading the view:
06/22/2017 15.02.00
but i have some buttons which use AJAX to post back and get back filtered data and when re-populating the grid the column looks like this:
/Date(1498161720000)/
Any help?
First off, you have two seperate .Format tags with different formats specified, which is probably causing some problems. Pick which one you want to use and try just removing the other.
If that doesn't solve the problem, I would try declaring the format using data annotations. In your model, try adding this line above the declaration of CreatedDate:
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:M/d/yyyy h:mm tt}")]
and then remove .Format from your column binding.
i.e. change
columns.Bound(c => c.CreatedDate).Format("{0:M/d/yyyy h:mm tt}").Title("Submitted on").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
to
columns.Bound(c => c.CreatedDate).Title("Submitted on").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
and make sure you include the
using System.ComponentModel.DataAnnotations;
line at the top of your model if you don't already have it.
I have created a kendo grid using Asp.Net MVC wrappers. I have included a checkbox for selecting multiple rows made the wiring and everything works ok. However, I have issues, when I change page, or do a filtering as the selecting rows/checkbox disappear.
What is the solution for this problem?
You need to use .PersistSelection(true) to ensure rows remain selected when changing pages:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("rowSelection")
.Columns(columns => {
columns.Bound(o => o.ShipCountry).Width(300);
columns.Bound(p => p.Freight).Width(300);
columns.Bound(p => p.OrderDate).Format("{0:dd/MM/yyyy}");
})
.Pageable(pageable => pageable.ButtonCount(5))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.PersistSelection(true)
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(m=>m.Id("OrderID"))
.PageSize(6)
.Read(read => read.Action("Orders_Read", "Grid"))
)
Also ensure you have an id column declared in the DataSource, like .Model(m=>m.Id("OrderID")) in the example, otherwise it will fail.
Full details here.
I had issues with the jQuery grid.select() however:
var grid = $('#rowSelection').data('kendoGrid');
var rows = grid.select();
This only seemed to return rows selected on the currently displayed page rather than all the rows selected across all the pages.
I have a grid with two drop-down list columns which are mapped with Editor Templates in a razor page. All single edit and update is working fine without any issues. But when I click first row to edit and trying to edit second row without update or cancel the first row it automatically close the edit mode of first row and second one made editable. It is fine but when I click back the first row without update or cancel the second row then the values from second row get updated in the first row as well.
How do I stop this issue. By the way it is found by tester not me.. :(
all problems are coming when we try to edit multiple rows without update or cancel the active editable row.
Please help me because I have spent lot of time on it. I am attaching the sample code here..the field name and template names are modified to give simple example.
Grid
#(Html.Kendo().Grid(Model.Employees)
.Name("GridEmployees")
.Columns(columns =>
{
columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { #style = "text-align:Left; " }).Width(75);
columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { #style = "text-align:left; " }).Width(75);
columns.Bound(i => i.EmpId).Hidden();
columns.Command(command => command.Edit()).Width(175);
})
.ToolBar(toolbar => toolbar.Create())
.Editable((editable => editable.Mode(GridEditMode.InLine)))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(s => s.EmpId);
model.Field(s => s.Frequency);
model.Field(s => s.Quarter);
})
.Create(update => update.Action("CreateEmployee", "Employee"))
.Read(read => read.Action("ReadEmployee", "Employee"))
.Update(update => update.Action("UpdateEmployee", "Employee"))
)
)
Editor Templates
Quarter.cshtml
#using System.Collections
#(Html.Kendo().DropDownListFor(i => i)
.Name("Quarter")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Quarters)
.OptionLabel("Select Quarter")
)
Frequency.cshtml
#using System.Collections
#(Html.Kendo().DropDownListFor(i => i)
.Name("Frequency")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Frequencies)
.OptionLabel("Select Frequency")
)
Thanks in advance,
Late is better than never...The problem is, that you generate multiple dropdown lists with the same id. Just assign a dynamic ID to the dropdown in the EditorTemplate and you should be fine.
#(Html.Kendo().DropDownListFor(i => i)
.Name("Frequency")
.HtmlAttributes(new { #id = "Frequency_#=UniqueId#" }) //eg. row id
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Frequencies)
.OptionLabel("Select Frequency")
)