or
0 answers
166 views
Hi,
I am trying to use Kendo Tabstrip in my ASP.NET Core Razor page. I used the example code provided by telerik UI. But its still not displayed. its displaying as plain text. This is my code. Please help if I need to include any other namespace or missing any reference?
--------index.cshtml---------------------------------------------------------------------------------------------------------------------------------------------
@page
@model IndexModel
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
@{
ViewData["Title"] = "Home page";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
#wrapper {width: 760px;margin: 250px 25px; text-align: center;font-weight: bold }
#content{background-color:#e5eecc}
.k-tabstrip > .k-content {
padding: 1em;
}
.specification {
max-width: 670px;
margin: 10px 0;
padding: 0;
}
.specification dt, dd {
max-width: 140px;
float: left;
margin: 0;
padding: 5px 0 8px 0;
}
.specification dt {
clear: left;
width: 100px;
margin-right: 7px;
padding-right: 0;
opacity: 0.7;
}
.specification:after, .wrapper:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
</style>
<body>
<form id="form1" runat="server">
<div class="demo-section k-content">
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Events(events => events
.Show("onShow")
.Select("onSelect")
.Activate("onActivate")
.ContentLoad("onContentLoad")
.Error("onError")
)
.Items(tabstrip =>
{
tabstrip.Add().Text("First Tab")
.Selected(true)
.Content(@<text>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci. Proin sagittis elementum odio, eu vestibulum arcu rhoncus eu. Pellentesque lorem arcu, tempus at dapibus nec, tincidunt a ante. Cras eget arcu id augue sollicitudin fermentum. Quisque ullamcorper ultrices ante, ut mollis neque tincidunt nec. Aenean sollicitudin lobortis nibh, vitae sagittis justo placerat et. Fusce laoreet consequat arcu, quis placerat massa lacinia vel. Etiam fringilla purus ac ipsum euismod nec aliquet lorem aliquet. Aliquam a nunc ac lorem lobortis pulvinar. Integer eleifend lobortis risus vel commodo. Integer nisl turpis, facilisis a porttitor nec, tempus ac enim. Proin pulvinar vestibulum ligula id mattis. Integer posuere faucibus accumsan.</p>
</text>);
tabstrip.Add().Text("Ajax Tab")
.LoadContentFrom(Url.Content("~/shared/web/tabstrip/ajax/ajaxContent1.html"));
tabstrip.Add().Text("Error Tab")
.LoadContentFrom("error.html");
})
)
</div>
</form>
</body>
<script>
function onShow(e) {
kendoConsole.log("Shown: " + $(e.item).find("> .k-link").text());
}
function onSelect(e) {
kendoConsole.log("Selected: " + $(e.item).find("> .k-link").text());
}
function onActivate(e) {
kendoConsole.log("Activated: " + $(e.item).find("> .k-link").text());
}
function onContentLoad(e) {
kendoConsole.log("Content loaded in <b>"+ $(e.item).find("> .k-link").text() + "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
}
function onError(e) {
kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
}
</script>
-----------------------------------------------------------------------------------------------------------------------------------------------------
---------------index.cshtml.cs--------------------------------------------------------------------------------------------------------------------------------------
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace DotNETSharedEnvironmentPortal.Pages
{
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
public void OnGet()
{ }
}
}
------------------------------------------------------------------------------------------------------------------------------------------------
------------------O/P displayed------------------------------------------------------------------------------------------------------------------
1 answer
342 views
Is there a built-in method like jQuery's serializeArray to pull the values for all the Kendo controls in a form? I recently found that the Html helper and Kendo CheckBox control creates hidden input tags for each CheckBox. The hidden fields are always set to "false". When I construct the model object after retrieving the values using serializeArray, the user input is overridden with the false values from the hidden fields. I cannot reject hidden fields as I have other hidden fields needed for my scenario. Some of our models are pretty big and it is tedious to construct each control in order to retrieve the user inputs.
The forms are mostly templates within a dialog invoked on Grid change event as the popup edit does not work with a custom template.
1 answer
203 views
I want the dialog control to be moveable and constrained just like the window control so I can see some values hidden behind in a grid.
Alexander
Telerik team
answered
on
03 Feb 2022
1 answer
265 views
I need to have a fixed tabstip content body instead of collapsing based on the content size. Like minimum height or fixed height with scrollbars on overflow.
Alexander
Telerik team
answered
on
03 Feb 2022
1 answer
1.7K+ views
Question 1: I have a bool field that I want to show as a checkbox (checked if true, unchecked if false). I added it to grid as far as I know how to but I know it isn't reflecting true or false because the checkbox is unchecked even if the value is true.
Question 2: when I check a checkbox and move on to another row, it does not stay checked and instead it reverts back to unchecked. How do I set it up so that it remains checked when I select another row?
@(Html.Kendo().Grid<ArusUI.Areas.PODashboard.Models.POModel>()
.Name("poGrid")
.Columns(columns =>
{
columns.Command(command => command
.Custom("Print")
.Click("printRow"))
.HtmlAttributes(new { title = "PO" })
.Width(150);
columns.Bound(p => p.resend)
.Title("Resend")
.Editable("isResendEditable")
.ClientTemplate("#if(poEdiObjectMode == 'EMAIL'){# <input id='resend_' onclick='resendSelect(this)' name='resend_#=poNum#_#=poReleaseNbr#_#=poRevisionNbr#' value='#=resend#' class='k-checkbox' type='checkbox' /> #} else {# <p> </p> #}#")
.Width(135)
.Filterable(ftb => ftb.Multi(true))
.HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(p => p.resend)
.Width(110)
.HtmlAttributes(new { @class = "kendo-column", style = "text-align:center;" })
.Editable("isResendEditable")
.ClientTemplate("#if(poEdiObjectMode == 'EMAIL'){# <input type ='checkbox' id='poResend_#=poNum#' class='k-checkbox' /> #} else {# <input type ='checkbox'id='poResend_#=poNum#' class='k-checkbox' disabled='disabled' /> #}#");
columns.Bound(p => p.poNum).Width(130).Editable("readOnlyCol").HtmlAttributes(new { @class = "disabled-kendo-column" });
columns.Bound(p => p.poReleaseNbr).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
columns.Bound(p => p.poRevisionNbr).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
columns.Bound(p => p.poIssueDT)
.Width(150)
.Format("{0:MM/dd/yyyy}")
.HtmlAttributes(new { @class = "disabled-kendo-column" });
columns.Bound(p => p.poEdiObjectMode)
.Width(100)
.Filterable(ftb => ftb.Multi(true))
.HtmlAttributes(new { @class = "disabled-kendo-column" });
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.Scrollable(scrollable => scrollable.Endless(true))
.Scrollable(a => a.Height("650px"))
.PersistSelection(true)
.Navigatable()
.Sortable()
.Filterable(filterable => filterable
.Extra(true)
.Operators(ops => ops
.ForString(str => str.Clear()
.Contains("Contains")
.DoesNotContain("Does not contain")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.StartsWith("Starts with")
.EndsWith("Ends with")
.IsNull("Is null")
.IsNotNull("Is not null")
.IsEmpty("Is empty")
.IsNotEmpty("Is not empty"))))
.AutoBind(false)
.Excel(excel => excel
.FileName("PODashboard.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("Excel_Export_Save", "poGrid")))
.Reorderable(reorder => reorder.Columns(true))
.ClientDetailTemplateId("template")
.Events(e => e.DataBound("poGridDataBound"))
.Events(e => e.CellClose("POGridCellClose"))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(25)
.Events(x => x.Error("onGridError"))
.Read(read => read.Action("GetPO","PO").Data("getPOParams").Type(HttpVerbs.Get))
.Model(model =>
{
model.Id(m => m.poNum);
model.Field(field => field.poReleaseNbr).Editable(false);
model.Field(field => field.poRevisionNbr).Editable(false);
model.Field(field => field.poIssueDT).Editable(false);
model.Field(field => field.poEdiObjectMode).Editable(false);
model.Field(field => field.resend).Editable(true);
})
).Resizable(resize => resize.Columns(true))
)function isResendEditable(e) {
var ediType = e.poEdiObjectMode; var editable = false;
if (ediType == "EMAIL") { editable = true; }
return editable;
}public class POModel
{
[DisplayName("Vendor")]
public string vendorName { get; set; }
[DisplayName("PO #")]
public string poNum { get; set; }
[DisplayName("Buyer")]
public string buyer { get; set; }
[DisplayName("Release #")]
public string poReleaseNbr { get; set; }
[DisplayName("Revision #")]
public string poRevisionNbr { get; set; }
[DisplayName("Original Issue")]
public string poIssueDT { get; set; }
[DisplayName("EDI Type")]
public string poEdiObjectMode { get; set; }
public bool resend { get; set; }
}\
1 answer
2.1K+ views
I am currently using a Dialog and Template on Grid change event for a custom edit form. How do I let the popup editor know to use my template for popup edit?
1 answer
408 views
I am using a form in a .net Core project. I want to disable/enable a maskedtextbox based on ViewBag properties. It works for regular text boxes, but not a masked text box. Here is a portion of my code:
i.Add()
.Field(f => f.LastName)
.Label(l => l.Text("Last Name:"))
.Editor(e =>
{
e.TextBox().Enable(ViewBag.canEdit);
});
i.Add()
.Field(f => f.CellPhone)
.Label(l => l.Text("Cell Phone:"))
.Editor(e =>
{
e.MaskedTextBox().Mask("(000) 000-0000").Enable(ViewBag.canEdit);
});
Alexander
Telerik team
answered
on
02 Feb 2022
1 answer
720 views
Hey guys,
I know that your intention with the kendo button was always to render a button of type "button". Also I know you're providing a kendo form widget to render a full form with a submit button.
But isn't there any solution to achive a basic html form and then render a kendo button of type "submit"? I know I can change it with jquery manually afterwords or by registrating an function which will fire the submit again, but i would only use this when there isn't any built in solution to force it as type submit.
My intention was to render the kendo button with the tag helper and then manually set the type but it will be always overridden back to type "button" instead of keeping it as "submit".
<kendo-button name="btnSubmit" theme-color="ThemeColor.Primary" class="float-right" type="submit">
Speichern
@(Html.Kendo().Loader()
.Name("loader")
.HtmlAttributes(new { aria_busy = "false", aria_description = InfoMessages.LoadingOperation, aria_live = "polite" })
.Size(LoaderSize.Small)
.ThemeColor(LoaderThemeColor.Light)
.Type(LoaderType.InfiniteSpinner)
.Visible(false)
)
</kendo-button>
Stoyan
Telerik team
updated answer
on
02 Feb 2022
1 answer
2.5K+ views
Good afternoon,
Is there an easy way to use the built-in Grid popup edit window to only edit a few model fields rather than all of them?
I want an edit popup with three fields, update and cancel, and to prepopulate with the values from the grid row.
Can this be achieved, or will I need to build a custom popup window?
Kind regards,
Richard
Alexander
Telerik team
answered
on
01 Feb 2022
1 answer
446 views
Hey guys,
I have a problem with my HtmlHelper. My ButtonBuilder does not contain a definition for ThemeColor (like described on your demo page here). Funny is that my KendoLoader does have that. Any suggestions (see my picture)?
I had that error with the Kendo Release R3 2021 and currently I've updated to the current last version (2022.1.119) through Progress Control Panel and still it is.
FYI: @using Kendo.Mvc.UI is in my _ViewImports included. There is no change when I implement that code line into my current view.
@(Html.Kendo().Loader()
.Name("loaderDropDown")
.Size(LoaderSize.Medium)
.ThemeColor(LoaderThemeColor.Dark)
.Type(LoaderType.InfiniteSpinner)
.Visible(false)
)
@(Html.Kendo().Button()
.Name("btnEditPrivacy")
.Icon("edit")
.HtmlAttributes(new { style = "min-width: 27px;", title = "Datenschutzerklärung bearbeiten" })
.ThemeColor(ThemeColor.Primary)
)
Edit:
Alright guys, it was my fault. I forgot to update my telerik nuget package. Now it's working! Thanks anyways!
Daniel
Top achievements
Rank 3
Iron
Iron
Iron
Rank 3
Iron
Iron
Iron
answered
on
01 Feb 2022
