or
2 answers
964 views
All the styling is broken, using bootstrap. I noticed a massive change in the files in Content/kendo/2023.1.314 (i.e. none of the previous files I had linked to actually exist anymore). I upgraded from 2023.1.117. Do I use bootstrap-4.css or bootstrap-main.css or what?
I ran the upgrade wizard and there was nothing about such massive changes.
Where's the documentation on these changes? Happy to read up but I couldn't find anything?
This is disgraceful for a minor upgrade to break/change everything so drastically.
Anton Mironov
Telerik team
answered
on
24 Mar 2023
1 answer
182 views
Hi, I saw earlier posts about this, but this for an (MVC5 grid, VS 2019, Latest version)
I have no java script errors as suggested as a solution from 2014 posts.
I load the Telerik MVC grid partial view into a div 'lcContent' using $("#lcContent").load(url);
Tried it in both chrome and edge, seems the scrolling is fine if I run it stand alone (i.e. not inside the the confines of the lcContent div)
Thx
I have
In my _Layout file
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link rel="shortcut icon" href="@Url.Content("~/favicon.ico")" ; />
<link href="https://cdn.kendostatic.com/2022.2.621/styles/kendo.classic-silver.min.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="https://cdn.kendostatic.com/2022.2.621/js/jquery.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/jszip.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>
and in the Index view a side bar menu (UL + Li) and a content pane, as per beneath
with
.lcContent {transition: margin-left .5s;
padding: 10px;
height: 900px;
width: 90%;
display: block;
overflow-y: hidden;
overflow-x: hidden;
left: 0px;
}
<style>
button.k-button {
background-color: darkgrey !important;
color: forestgreen
}
.k-grid-toolbar {
/* background-color: lightslategrey !important;*/
}
th.k-header {
color: white;
background-color: darkslategray !important;
}
div.k-grouping-header {
background-color: gainsboro !important;
}
tr.k-master-row {
background-color: white !important;
color: blue;
}
tr.k-master-row:active, tr.k-master-row:hover {
background-color: lightgrey !important;
}
tr.k-alt {
color: white;
background-color: lightcyan !important;
color: darkblue;
}
span.k-icon, k-i-filter {
background-color: gainsboro !important;
}
tr.k-alt:active, tr.k-alt:hover {
color: darkblue !important;
background-color: lightgrey !important;
}
input.k-input-inner {
/* background-color: gainsboro !important;*/
}
span.k-filtercell {
/*background-color: red !important;*/
}
th {
background-color: lightslategray !important;
}
span.k-operator-hidden {
display: none;
}
div.k-grid-content {
/* height: 80% !important;*/
}
.k-grid tbody tr {
line-height: 14px;
}
.k-grid tbody td {
padding: 0;
}
.k-grid {
overflow-y: hidden;
height: 900px;
min-height: 600px;
/* width: 2700px;
max-width: 2800px;*/
width: 98%;
max-width: 99%;
padding-left: 10px;
}
.k-button{ }
.k-grid-Edit{ }
td.k-command-cell{ }
.k-button-text{ }
.k-filter-row{ /* has multiple th beneath it, with a span in them, with k-filter-cell class*/
}
</style>
<div id="lcContent" class="lcContent" >
<div class="text-left" style=" width: 100%;">
@(Html.Kendo().Grid(Model)
.Name("LeasedTenements")
.Reorderable(reorder => reorder.Columns(true))
.Columns(columns =>
{
columns.Command(command => command.Custom("Edit").Click("Edit")).Width(180);
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.Lease).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
columns.Bound(c => c.Name).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
columns.Bound(c => c.LocalityType).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
columns.Bound(c => c.Locality).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
columns.Bound(c => c.Status).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
columns.Bound(c => c.InternalStatus).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
columns.Bound(c => c.CurrentArea).Width(250).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
columns.Bound(c => c.AreaType).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
columns.Bound(c => c.MineralField).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
columns.Bound(c => c.Commodity).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
columns.Bound(c => c.GovtOffice).Width(200);
columns.Bound(c => c.AppliedArea).Width(200);
columns.Bound(c => c.GrantedArea).Width(200);
columns.Bound(c => c.AreaSurveyed).Width(100);
columns.Bound(c => c.CurrentCommitment).Width(200);
columns.Bound(c => c.NextYearCommitment).Width(200);
columns.Bound(c => c.CurrentRent).Width(200);
columns.Bound(c => c.NextYearRentAmount).Width(200);
columns.Bound(c => c.NextYearRentAmount).Width(200);
columns.Bound(c => c.Project).Width(200);
columns.Bound(c => c.CostCode).Width(150);
columns.Bound(c => c.ManagingCompany).Width(200);
columns.Bound(c => c.Operator).Width(200);
columns.Bound(c => c.LeaseManager).Width(200);
columns.Bound(c => c.ResponsibleParty1).Width(200);
columns.Bound(c => c.ResponsibleParty2).Width(200);
columns.Bound(c => c.Region).Width(200);
columns.Bound(c => c.TotalShares).Width(150);
columns.Bound(c => c.Comments).Width(200);
columns.Bound(c => c.LastUpdate).Width(10);
columns.Bound(c => c.ByWhom).Width(150);
columns.Bound(c => c.LinkLeaseID).Width(150);
})
.ToolBar(toolbar =>
{
toolbar.Excel();
toolbar.Create();
toolbar.Save();
})
.HtmlAttributes(new { style = "width: 99%;" })
.Scrollable()
.Groupable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
model.Field(p => p.Lease).Editable(true);
model.Field(p => p.Lease).DefaultValue(
ViewData["defaultObjections"] as Demo.Mvc.ViewModels.vmTenementObjected);
model.Field("GrantDate", typeof(DateTime));
model.Field("GrantArea", typeof(int));
})
.Create(create => create.Action("EditingCustom_Create", "Objections"))
.Update(update => update.Action("EditingCustom_Update", "Objections"))
.Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Objections"))
)
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Reorderable(reorderable => reorderable.Columns(true))
)
</div>
</div>
1 answer
280 views
This is kendo ui for asp.net mvc. In the past I have used float:right to move menu items and gridtoolbar items to the right side, but that no longer works. For example:
.ToolBar(toolbar =>
{
toolbar.Search();
toolbar.Custom()
.Text("Clear Filters/View All")
.Url("#")
.HtmlAttributes(new { id = "btnClearFilters", @class="btn btn-link", onclick = "btnClearFiltersClick()" });
toolbar.Custom()
.Text("New Order")
.Url("#")
.IconClass("k-icon k-i-add")
.HtmlAttributes(new { id = "btnNew", style = "float:right;", onclick = "btnNewClick()" });
toolbar.Custom()
.Text("Copy Order")
.Url("#")
.IconClass("k-icon k-i-copy")
.HtmlAttributes(new { id = "btnCopy", style = "float:right;margin-right:20px;", onclick = "btnCopyClick()", disabled = "disabled" });
})
2 answers
296 views
Hello everybody,
im trying to achieve that the dropdown filter list in my grid takes the size from it's biggest option.
I found other explanations for different situations and none of those worked for me.
I have a MVC Grid with a ForeignKey Column, that is filtered with a dropdown of enum values.
x.ForeignKey(b => b.Status, Model.OrderGapStatus).Filterable(f => f.Cell(c => c.Template("statusFilter"))).Title(Localizer.Lang_Status).ClientTemplate("#: StatusName #");And a js handler trying to set the width to "auto". But it doesn't work :/
<script type="text/javascript">
function statusFilter(element) {
// what do i need to do here?
}
</script>Help would be really appreciated 😃
Have a good day & happy coding
Nils
Nils
Top achievements
Rank 1
Veteran
Iron
Rank 1
Veteran
Iron
answered
on
17 May 2021
