In this case I have a grid with a few locked/fixed columns, followed by a couple of groups of columns under one header. Something like this:
01.
@(Html.Kendo().Grid<
GradeBusinessLayer.ViewModels.Assets.ElectricalCableDetailViewModel
>()
02.
.Name("grid")
03.
.Columns(columns =>
04.
{
05.
columns.Bound(d => d.Object).Width(200).Locked(true).Lockable(false);
06.
columns.Bound(d => d.Revision).Width(200).Locked(true).Lockable(false);
07.
08.
@* ==== BLOCK: Info ====*@
09.
columns.Group(grp4376 => grp4376
10.
.Title("Info")
11.
.HeaderTemplate("<
div
style
=
'display:flex'
><
span
class
=
'k-link'
style
=
'text-overflow: ellipsis;white-space: nowrap;overflow: hidden;'
'>Info</
span
><
span
> <
i
class
=
'fa fa-eye'
onclick
=
'hideGroup(this)'
aria-hidden
=
'true'
></
i
></
span
></
div
>")
12.
.Columns(col4376 => {
13.
col4376.Bound(d => d.Alias).Width(200);
14.
col4376.Bound(d => d.SubClass1Name).Width(200);
15.
col4376.Bound(d => d.CheckedBy).Width(200);
16.
col4376.Bound(d => d.CheckedDate).Width(200);
17.
.
18.
.
19.
.
The column group should be collapsible. This is intended to be different from hiding the group, because the user should be able to uncollapse it again. I could not find a standard way to do this, so I devised my own, with which I'm partially satisfied.
How I did it: The group now has a caption, followed by an eye (from font-awesome, but this could of course by any glyph). When the eye is clicked, a javascript function replaces the eye with a slashed eye and hides all the columns, except for the first. This is that function:
01.
function
hideGroup(vis)
02.
{
03.
vis = $(vis);
04.
var
grd = $(
"#grid"
).data(
"kendoGrid"
);
05.
06.
var
cell = vis.closest(
"th"
);
07.
var
row = cell.closest(
"tr"
);
08.
var
grpIdx = $(
"th"
, row).index(cell);
09.
10.
var
grpCol = undefined;
11.
for
(i=0; i<grd.columns.length; i++)
12.
{
13.
if
(
typeof
grd.columns[i].columns !==
"undefined"
)
14.
{
15.
if
(grpIdx-- === 0)
16.
{
17.
grpCol = grd.columns[i];
18.
break
;
19.
}
20.
}
21.
}
22.
23.
if
(
typeof
grpCol ===
"undefined"
)
24.
return
;
25.
26.
if
(vis.hasClass(
"fa-eye"
))
27.
{
28.
vis.removeClass(
"fa-eye"
);
29.
vis.addClass(
"fa-eye-slash"
);
30.
for
(i=grpCol.columns.length-1; i>0; i--)
31.
grd.hideColumn(grpCol.columns[i]);
32.
}
33.
else
34.
{
35.
vis.removeClass(
"fa-eye-slash"
);
36.
vis.addClass(
"fa-eye"
);
37.
for
(i=grpCol.columns.length-1; i>0; i--)
38.
grd.showColumn(grpCol.columns[i]);
39.
}
40.
}
So first the header cell is discovered. Then the index of that header cell in the row. Then the columns are enumerated until the column with that index is found, not counting the columns that don't have subcolumns (those are the fixed columns and they are in a different <tr>, it turns out, so I cannot use the grpIdx straight away). When the column object has been identified, it can be used to iterate its columns to show/hide them as intended.
My questions:
Hi,
I have Badges that display different sums of data. I would like to filter a Grid based on clicking a them.
Is it possible to execute code in Controller class when clicking on a Badge, or do I have to rethink this? Can you please point me in the right direction?
Regards, Anders
[Display(Name = "Type Id")]
[Editable(false)]
public int ReportTypeId { get; set; }
hi.
when i copied a text from MsWord to Editor, the url of FootNote content changed and not working.
i attached a pic of rendered editor text.
plz help
thanks
I'm new in the ASP.NET MVC development.
After I add the dataset under the model folder.
I create an empty Controller and want to add view inside Index() method.
I choose Template as Create, and error message come up
"There was an error running the selected code generator:
'an error occurred while retrieving package metadata for
'EntityFramework.6.1.3' from source 'nuget.telerik.com''"
Could you tell me how to add a view, if need more details, plz let me know!!
HI
I have found the sub menu items will be hidden behind the container while Menu was placed within PanelBar(overflow: auto).
SplitterPane have the same unexpected situation too.
Why the Menu do not just popup the sub menu items as ContextMenu ?
Menu / Context Menu
https://demos.telerik.com/aspnet-mvc/menu/context-menu
I hope the next (or next next) release will fix this elementary problem.
*z-index have no effects (because containers overflow: auto).
*containers autoflow: auto are required in my application (don't ask me use overflow: visible or larger width).
See attachment.
Best regards
Chris
I would like to add DateTimePicker into row dynamically while adding new row on the clicking event. Also While doing so previous data gets cleared.
Here is code below:
@(Html.Kendo().Grid(Model.InOutTimes)
.Name("InOutTimesGrid")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.NoteID).Hidden();
columns.Bound(c => c.InDateTime).ClientTemplate(Html.Kendo().DateTimePicker()
.Name("InDateTime")
.Min(new System.DateTime(1970, 1, 1, 0, 0, 0)) // Epoch
.Format("MM-dd-yyyy HH:mm")
.TimeFormat("HH:mm")
.ToClientTemplate().ToString()
);
columns.Bound(c => c.OutDateTime).ClientTemplate(Html.Kendo().DateTimePicker()
.Name("OutDateTime")
.Min(new System.DateTime(1970, 1, 1, 0, 0, 0)) // Epoch
.Format("MM-dd-yyyy HH:mm")
.TimeFormat("HH:mm")
.ToClientTemplate().ToString()
);
})
.DataSource(datasource => datasource.Ajax().Read("InOutTimes_Read", "ClientNotesVirtual"))
Am I missing something. Please help!!.
I have been using MVC grids for quite some time now. Only recently noticed that the page number shows up between the paging buttons. It increases and decreases as paging buttons are clicked. Please see the attached image. Is this a bug or something wrong in my code. We are using the latest 2021.1.119
@(Html.Kendo().Grid<SampleProject.ViewModels.EmployeeViewModel>()
.Name("EmployeeGrid")
.Columns(col =>
{
col.Bound(o => o.NetworkID).Width(150);
col.Bound(o => o.Name).Width(400);
col.Bound(o => o.Role).Width(200);
col.Bound(o => o.Category);
col.Command(command => { command.Destroy(); }).Width(150);
})
.Pageable(a => a.PageSizes(new int[] { 10, 25, 50, 100 }))
.Sortable()
.Scrollable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.IsEqualTo("Is equal to")
)))
.HtmlAttributes(new { style = "height:700px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Model(model =>
{
model.Id(p => p.ID);
})
.Read(read => read.Action("Employee_Read", "Admin"))
.Destroy(delete => delete.Action("Employee_Delete", "Admin"))
)
)
Hey guys,
I have this code in my .cshtml:
<
form
>
<
div
class
=
"form-row col-12"
>
<
div
class
=
"form-group col-12"
>
@Html.Label("Ersteller")
@Html.Kendo().TextBox().Name("test").HtmlAttributes(new { @class = "form-control", @readonly = "readonly" }).Value("Daniel Sander")
</
div
>
</
div
>
</
form
>
When the view is rendered, I get a Textbox looking like attachement picture 1. Also, when using the textbox without the readonly attribute, you can see like the textbox is getting a wrong focus-area like in attachement picture 2.
<
form
>
<
div
class
=
"form-row col-12"
>
<
div
class
=
"form-group col-12"
>
<
label
for
=
"Ersteller"
>Ersteller</
label
>
<
span
class
=
"k-widget k-textbox form-control"
style
=
""
>
<
input
class
=
"form-control k-input"
id
=
"test"
name
=
"test"
value
=
"Daniel Sander"
data-role
=
"textbox"
aria-disabled
=
"false"
autocomplete
=
"off"
style
=
"width: 100%;"
>
</
span
>
<
script
>kendo.syncReady(function(){jQuery("#test").kendoTextBox({"value":"Daniel Sander"});});</
script
>
</
div
>
</
div
>
</
form
>
I've realized, that my textbox is rendered in a span-element. However, in Kendo version 2020.1.219.545 this was definitely not the case. After the update to 2020.3.1021.545 a few weeks ago this "bug" happend. Today I've updated to 2020.3.1118.545 but still the same problem.
When analyzing the css, which causes the problem, you see:
.k-textbox.form-control {
padding: .375rem .75rem;
}
The padding causes the space between the focus-area. So my question is now, did I have implemented something wrong now? Is this behaviour the way it should be? How is your recommendation for implementing a label with a textbox via MVC Razor syntax in the current kendo version without this padding-space?
The Editor Factory includes a method to specify a custom color picker, but I can't find documentation how to instantiate the parameter:
https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/EditorToolFactory#fontcolorsystemactionkendomvcuifluenteditorcolorpickertoolbuilder
Html.Kendo().EditorFor(x => x.Body).Tools(tools => tools.FontColor( ??? ))
I'll appreciate your help
thanks