or
1 answer
606 views
I have decided to switch to tag helper as I have just realized how natural it looks and format in a sizeable cshtml file. I converted all essential elements to tag-helper equivalents. I need the following converted that I'll use for the remaining advanced controls:
A complex grid:
@(Html.Kendo().Grid(Model)
.Name("gridLetters")
.Columns(columns =>
{
columns.Bound(p => p.Identifier).Title("RL #").Filterable(false).Sortable(false).Width(160)
.HeaderHtmlAttributes(new { style = "k-text-center !k-justify-content-center" })
.HtmlAttributes(new { style = "k-text-center !k-justify-content-center" })
.ClientTemplate("<a href='" + Url.Action("View", "Letter", new { letterId = "#:Id#" }) + "'>#=Id#</i></a>");
columns.Bound(p => p.Subject);
columns.Bound(p => p.CompanyName).Title("Company");
columns.Bound(p => p.BrandName).Title("Brand");
columns.Bound(p => p.Location.Name).Title("Location");
columns.Bound(p => p.LetterTypeId).Title("RL Type").Width(150)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate("<span class='#=LetterType.BadgeInfo#' title='#=LetterType.Name#'>#=LetterType.Nickname#</span>");
columns.Bound(p => p.Status.Nickname).Title("Status").Width(150)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate("<span class='#=Status.BadgeInfo#' title='#=Status.Name#'>#=Status.Nickname#</span>");
columns.Bound(p => p.Id).Title("Act").Width(90).Filterable(false)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate(
"#if(StatusId == 1){#" +
" <a href='" + Url.Action("Create", "Letter", new { letterId = "#=Id#" }) + " ' title='Edit the RL'><i class='fa-duotone fa-pen-to-square'></i></a>" +
" <i class='fa-duotone fa-pipe'></i> " +
" <a href='" + Url.Action("ActionQuick", "Letter", new { letterId = "#=Id#" }) + " ' title='Start the RL Approval flow'><i class='fa-duotone fa-play'></i></a>" +
"#} else {#" + "" + "# } #"
);
})
.ToolBar(toolbar =>
{
toolbar.Excel();
toolbar.Search();
})
.Excel(excel => excel
.FileName($"DA CRL - My List Export - {DateTime.Now:yyyy-MM-dd}.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("GridExcelExportSave", "Helper"))
)
.Scrollable(s => s.Height("auto"))
.Reorderable(r => r.Columns(false))
.Resizable(r => r.Columns(true))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Filterable()
.Sortable()
.ColumnMenu()
.Events(e => e.DataBound("onDataBound"))
.ClientDetailTemplateId("detailTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.Sort(x => x.Add("Id").Descending())
.PageSize(20)
.ServerOperation(false)
)
)
@section Scripts {
<script id="detailTemplate" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=Id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().SpriteCssClasses("fa-duotone fa-clock-rotate-left").Text(" History").LoadContentFrom("GetLetterHistory", "Letter", new { masterGridId = "#=Id#" });
items.Add().SpriteCssClasses("fa-duotone fa-thumbs-up").Text(" Approvers").LoadContentFrom("GetLetterApprovers", "Letter");
items.Add().SpriteCssClasses("fa-duotone fa-magnifying-glass").Text(" Details").Content("");
items.Add().SpriteCssClasses("fa-duotone fa-link").Text("Attachments").Content("");
})
.ToClientTemplate()
)
</script>
<script>
var gridLetters = $("#gridLetters");
$(window).resize(function () {
resizeGrid();
});
function onDataBound(e) {
resizeGrid();
}
function resizeGrid() {
try {
if (gridLetters.options.scrollable !== true) {
gridLetters.setOptions({ scrollable: true });
}
} catch (e) {
}
$(".k-grid-content").css("height", $(window).height() - 310);
}
</script>
}A form with Anti-Forgery Token, validation summary, DisplayFor, and Hidden field w/ jQuery changing values:
@Html.ValidationSummary()
@using (Html.BeginForm("Action", "Letter", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.HiddenFor(m=>m.LetterId)
@Html.HiddenFor(m=>m.ActionId)
<div class="row">
<div class="btn-group d-flex">
<button id="btnActionApprove" type="button" class="btn btn-lg btn-success">
<i class="fa-duotone fa-thumbs-up fa-3x me-3 text-black"></i>
<span>
<span class="d-block"><b>Approve RL</b></span>
<span class="d-block fs-12px opacity-7">RL will proceed</span>
</span>
</button>
<button id="btnActionInfo" type="button" class="btn btn-lg btn-warning">
<i class="fa-duotone fa-messages-question fa-3x me-3 text-black"></i>
<span>
<span class="d-block"><b>More Info</b></span>
<span class="d-block fs-12px opacity-7">Info required</span>
</span>
</button>
<button id="btnActionReject" type="button" class="btn btn-lg btn-danger">
<i class="fa-duotone fa-thumbs-down fa-3x me-3 text-black"></i>
<span>
<span class="d-block"><b>Reject RL</b></span>
<span class="d-block fs-12px opacity-7">Cancel this RL</span>
</span>
</button>
</div>
</div>
<div class="row mt-5px">
<div class="col-12">
@(Html.Kendo().TextAreaFor(m => m.Comments)
.Size(ComponentSize.Large)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Solid)
.Overflow(TextAreaOverflow.Auto)
.Resize(TextAreaResize.Vertical)
.Rows(6)
.Label(l => l.Content("Action Comments").Floating(true))
.HtmlAttributes(new { required = "required", validationmessage = "Please enter comments" })
)
</div>
</div>
<div class="row mt-5px">
<div class="col-2">
<button type="submit" class="btn btn-lg btn-success">Take Action</button>
</div>
</div>
}
@Html.DisplayFor(m=>m.Letter, "LetterView")
@section Scripts {
<script type="text/javascript">
$(function () {
$("#btnActionApprove").click(function () {
$("#ActionId").val("1");
});
$("#btnActionInfo").click(function () {
$("#ActionId").val("3");
});
$("#btnActionReject").click(function () {
$("#ActionId").val("2");
});
});
</script>
}Cascading Combos:
<div class="row mt-3">
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.CategoryHeadId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Solid)
.OptionLabel("Select head category...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupCategoriesHead", "Api");
});
})
)
</div>
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.CategoryMainId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Solid)
.OptionLabel("Select main category...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupCategoriesMain", "Api")
.Data("filterMainCategories");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom(templatePrefixSolver + "CategoryHeadId")
)
</div>
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.CategorySubId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Solid)
.OptionLabel("Select sub-category...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupCategoriesSub", "Api")
.Data("filterSubCategories");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom(templatePrefixSolver + "CategoryMainId")
)
</div>
</div><script language="javascript" type="text/javascript" deffer>
function filterMainCategories() {
return {
headId: $("#@(templatePrefixSolver)CategoryHeadId").val()
};
}
function filterSubCategories() {
return {
headId: $("#@(templatePrefixSolver)CategoryHeadId").val(),
mainId: $("#@(templatePrefixSolver)CategoryMainId").val()
};
}
</script>This will cover 100 of the web application as other controls are simpler than these three cases,
Alexander
Telerik team
answered
on
08 Aug 2022
1 answer
249 views
We cannot upgrade the package Telerik.UI.for.AspNet.Core to the versions after 2022.1.412. The project cannot start after the upgrade.
We use .Net Core 2.1 over .Net Framework 4.8 and it's easy to reproduce, juste create a new project (core 2.1 over .net framwork) and add the nuget Telerik.UI.for.AspNet.Core 2022.2.xxx.
Thanks
Victor
Aleksandar
Telerik team
answered
on
08 Aug 2022
0 answers
570 views
I have a general idea of the flow:
(i) Assign a unique id to your form (eg form-id) by changing your form code to:
@using (Html.BeginForm("SaveCountry", "Country", FormMethod.Post, new { id = "form-id" })) {
}(ii) Put the loader on your page with a unique id. The div is hidden until the form is submitted. Need to use Kendo Loader here and place it in either a partial view or in _Layout so it is always available as hidden--by-default
(iii) Style the loader / loading div to go somewhere useful.
(iv) Show the loader when the form is submitted (and after any validation has been completed), for example (not sure about this):
<script>
$("#form-id").on("submit", function () {
$("#divLoading").show();
});
</script>(v) Given that the page will redirect, I can probably leave the loader until the page redirects. But if I need to hide the loader before that happens, I can use (Kendo Loader here + function defined in _layout as well):
$("#divLoading").hide();
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
asked
on
06 Aug 2022
1 answer
297 views
I wanted to rule out if this is some kind of issue with Telerik - I've implemented this in CodePen and it works there, but not with what I'm using in Visual Studio w/ the entire code.
I have a series of buttons like so:
<wizard-step title="Step 2">
<wizard-step-content><span class="nowrap d-flex flex-row"><div class="reasons">
@Html.RadioButtonFor(c => c.category, item.Value, new { id = item.Value, name = "Lists", @value = item.Value, @text = item.Text, @class = "reasons-input"})
<label for="@(item.Value)"
class="reasons-label">@item.Text</label></div><button type="button"
id="@item.Value"
class="inputBtn btn btn-secondary"
data-toggle="modal"
datatarget="#@item.Value"
style="background-color: transparent; border-color: transparent; color: #007bff; font-size: 21px;"><i class="fa fa-question-circle"></i></button></span>
</wizard-step-content>
</wizard-step>And here's my attempt at setting up event listeners
var inputButtons = document.querySelectorAll(".inputBtn");
console.log(inputButtons);
console.log(inputButtons.length);
var buttonsCount = inputButtons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
inputButtons[i].addEventListener("click", function(e) {
console.log("HI");
});
}
Stoyan
Telerik team
answered
on
04 Aug 2022
1 answer
360 views
Hello,
I would like to ask how I could set different margin top in pages in grid pdf export.
I have a header which I need to be display only in the first page. But this leaves a lot of big blank in other pages,
this is what I have try so far in the page template script
#if(pageNum > 1)
{#
document.getElementByClassName("k-pdf-export k-grid").style.marginTop = "3cm";
#}#
Aleksandar
Telerik team
answered
on
02 Aug 2022
1 answer
290 views
Hi!
I'm on the Material Main theme. The Kendo controls are already cozy-sized, and the material theme adds too much whitespace everywhere.
I'm struggling with the columns and header text alignment. As per the image, I cannot get either these headers or the cells to align correctly, and there is too much padding margin on the left.
@(Html.Kendo().Grid(Model)
.Name("gridLetters")
.Columns(columns =>
{
columns.Bound(p => p.Id).Filterable(false).Sortable(false).Width(60)
.HeaderHtmlAttributes(new { @style = "k-text-center !k-justify-content-center" })
.HtmlAttributes(new { @style = "text-align: right" })
.ClientTemplate("<a href='" + Url.Action("View", "Letter", new { letterId = "#:Id#" }) + "'>#=Id#</i></a>");
columns.Bound(p => p.Subject);
columns.Bound(p => p.CompanyName).Title("Company");
columns.Bound(p => p.BrandName).Title("Brand");
columns.Bound(p => p.Location.Name).Title("Location");
columns.Bound(p => p.LetterTypeId).Title("RL Type").Width(150)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate("<span class='#=LetterType.BadgeInfo#' title='#=LetterType.Name#'>#=LetterType.Nickname#</span>");
columns.Bound(p => p.StatusId).Title("Status").Width(150)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate("<span class='#=Status.BadgeInfo#' title='#=Status.Name#'>#=Status.Nickname#</span>");
columns.Bound(p => p.Id).Title("Act").Width(90).Filterable(false)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate(
"#if(StatusId == 1){#" +
" <a href='" + Url.Action("Create", "Letter", new { letterId = "#=Id#" }) + " ' title='Edit the RL'><i class='fa-duotone fa-pen-to-square'></i></a>" +
" <i class='fa-duotone fa-pipe'></i> " +
" <a href='" + Url.Action("ActionQuick", "Letter", new { letterId = "#=Id#" }) + " ' title='Start the RL Approval flow'><i class='fa-duotone fa-play'></i></a>" +
"#} else {#" + "" + "# } #"
);
})
.ToolBar(toolbar =>
{
toolbar.Excel();
toolbar.Search();
})
.Excel(excel => excel
.FileName($"DA CRL - My List Export - {DateTime.Now:yyyy-MM-dd}.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("GridExcelExportSave", "Helper"))
)
.Sortable()
.Navigatable()
.Resizable(r => r.Columns(true))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Filterable()
.Scrollable(s => s.Height("auto"))
.ClientDetailTemplateId("detailTemplate")
.Events(e => e.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Sort(x => x.Add("Id").Descending())
.PageSize(20)
.ServerOperation(false)
)
) <script>
var gridLetters = $("#gridLetters");
$(window).resize(function () {
resizeGrid();
});
function onDataBound(e) {
resizeGrid();
}
function resizeGrid() {
try {
if (gridLetters.options.scrollable !== true) {
gridLetters.setOptions({ scrollable: true });
}
} catch (e) {
}
$(".k-grid-content").css("height", $(window).height() - 310);
}
</script> <script>
var gridLetters = $("#gridLetters");
$(window).resize(function () {
resizeGrid();
});
function onDataBound(e) {
resizeGrid();
}
function resizeGrid() {
try {
if (gridLetters.options.scrollable !== true) {
gridLetters.setOptions({ scrollable: true });
}
} catch (e) {
}
$(".k-grid-content").css("height", $(window).height() - 310);
}
</script>
Aleksandar
Telerik team
answered
on
01 Aug 2022
2 answers
98 views
Hi there
I'm trying to add column menu to my grid but I need to do the following:
1) Add the three dots to the grid toolbar not to each column
2) I need once I click on the apply button to extend the functionality and run some js code, but I can't find any documentation for init, columnMenuOpen or any other event for ColumnMenu for .net core library.
Thanks
1 answer
209 views
Hello,
is it possible to play a sound / beep / whatever when showing a notification box?
I haven't found anything in the API for ASP.NET Core.
Thanks,
Christine
Alexander
Telerik team
answered
on
28 Jul 2022
1 answer
235 views
Hello! I have been troubleshooting an issue with the way that the treeview places elements. It appears to only be happening with items that contain children (and thus have an expand arrow).
I am unsure what could be causing this, but the library seems to be putting a span with the k-icon and k-i-expand classes (which will show the expand arrow) and then nesting the rest of the treeview row inside of that span. When I look at the demos of the same version on your site, the spans are not nested. Also I noticed that the css class names are different, but that might be on purpose (or perhaps I am confused about something).
<!-- HTML OF TREEVIEW ROW WITH CHILDREN -->
<li role="treeitem" class="k-item" data-uid="900b9f8a-e745-4d2f-9177-36f8f029d19a" aria-selected="false">
<div class="k-mid">
<span class="k-icon k-i-expand">
<span class="k-checkbox-wrapper" role="presentation">...</span>
<span class="k-in">...</span>
</span>
</div>
</li>
<!-- VERSUS HTML OF TREEVIEW ROW WITHOUT CHILDREN -->
<li role="treeitem" class="k-item" data-uid="dfd4e997-b440-42dc-8780-061f00ed16d6" aria-selected="false">
<div class="k-mid">
<span class="k-checkbox-wrapper" role="presentation">...</span>
<span class="k-in">...</span>
</div>
</li>Honestly, I am pretty stumped on this one.. as far as what could be causing this. I looked through the css classes in inspector and nothing stood out to me... I *AM* using a template though, but I don't see how it could be the issue. Here is the treeview definition as well as the template I am using:
<!-- GRID DEFINITION -->
<div class="d-flex flex-row">
@(Html.Kendo().TreeView()
.Name("TreeView")
.DataTextField("Name")
.Checkboxes(true)
.DragAndDrop(true)
.Events(events => events
.Select("treeview_OnSelect")
.Check("treeview_OnCheck")
.Drag("treeview_OnDrag")
.Drop("treeview_OnDrop"))
.TemplateId("treeview-template")
.DataSource(dataSource =>
dataSource.Read(read =>
read.Action(Model.ReadAction, Model.Controller)))
)
</div>
<!-- TEMPLATE -->
<script id="treeview-template" type="text/kendo-ui-template">
# var id = item.id; #
# if (id.includes("group")) { #
<i class="far fa-fw fa-folder"></i>
# } else if (id.includes("category")) { #
<i class="far fa-fw fa-sitemap"></i>
# } else { #
<i class="@Model.IconClass fa-fw"></i>
# } #
#: item.Name #
</script>1 answer
98 views
I'm running into a new issue with the UI for ASP.NET Core's Wizard in that if I add a code block, e.g., a @if statement or a @Localizer within a <wizard-step-content> tags, it will cause the stepper along the top not display. What are my options - I'll need the @if statements work in order to have certain information appear depending on what issue the user is submitting.
Stoyan
Telerik team
answered
on
27 Jul 2022
