or
1 answer
106 views
When I do a cntrl+K+D the formatting does not look good. The indents are very bad and manual formatting takes a long time. How can I improve this?
Thanks
Petar
Telerik team
answered
on
29 Aug 2022
1 answer
156 views
Where can I find a copy of Kendo.Mvc.Examples.Models.TaskBoard.Column? I can't seem to find it in any of the Taskboard examples.
Thanks
- Ken
Aleksandar
Telerik team
answered
on
25 Aug 2022
1 answer
128 views
I have this:
<div class="row mt-3">
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.AwardTypeId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Outline)
.OptionLabel("Select Award Type...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupAwardTypes", "Api");
});
})
.Events(e =>
{
e.Select("AwardTypeId_OnSelect");
})
)
</div>
<div class="col-lg-8">
<kendo-textbox for="TenderNumber" size="ComponentSize.Medium" rounded="Rounded.Medium" fill-mode="FillMode.Outline" enable="false">
<textbox-label content="@nameof(Model.TenderNumber)" floating="true"/>
</kendo-textbox>
</div>
</div>And that renders:
<div class="row mt-3">
<div class="col-lg-1">
<div style="text-align: center; vertical-align: center;">
<span class="k-switch k-switch-lg k-rounded-full k-switch-on" role="switch" tabindex="0" aria-checked="true" style=""><input data-val="true" data-val-required="The OverrideLetter field is required." id="OverrideLetter" name="OverrideLetter" type="checkbox" value="true" data-role="switch" style="display: none;" checked="checked"><span class="k-switch-track k-rounded-full"><span class="k-switch-label-on">On</span><span class="k-switch-label-off" aria-hidden="true">Off</span></span><span class="k-switch-thumb-wrap"><span class="k-switch-thumb k-rounded-full"></span></span></span><input name="OverrideLetter" type="hidden" value="false"><script>kendo.syncReady(function(){jQuery("#OverrideLetter").kendoSwitch({"change":OverrideLetter_OnChange,"checked":false,"size":"large","trackRounded":"full","thumbRounded":"full"});});</script>
</div>
</div>
<div class="col-lg-11">
<span title="" class="k-picker k-dropdownlist k-picker-outline k-picker-md k-rounded-md" unselectable="on" role="combobox" aria-expanded="false" aria-controls="OverriddenLetter_listbox" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-busy="false" aria-describedby="e2f4301b-c2b1-45e8-84ff-7885e4e3a766" tabindex="0" aria-activedescendant="f8b0ffca-e902-4c18-be20-ababce4f16a4"><span id="e2f4301b-c2b1-45e8-84ff-7885e4e3a766" unselectable="on" class="k-input-inner"><span class="k-input-value-text"><span class="selected-value"></span><span>COMM/RL/17-1</span></span></span><button type="button" tabindex="-1" unselectable="on" class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button" aria-label="select"><span class="k-icon k-i-arrow-s k-button-icon"></span></button><input id="OverriddenLetter" name="OverriddenLetter" style="width: 100%; display: none;" type="text" value="" data-role="dropdownlist"></span><script>kendo.syncReady(function(){jQuery("#OverriddenLetter").kendoDropDownList({"dataTextField":"RefNumber","dataValueField":"Id","enable":false,"height":500,"optionLabel":"Select RL to override...","template":"\u003cspan class=\"k-state-default\"\u003e\u003cstrong\u003e#: data.RefNumber #\u003c/strong\u003e\u003cp\u003e#: data.Subject #\u003c/p\u003e\u003c/span\u003e","valueTemplate":"\u003cspan class=\"selected-value\"\u003e\u003c/span\u003e\u003cspan\u003e#:data.RefNumber#\u003c/span\u003e","filter":"contains","size":"medium","rounded":"medium","fillMode":"outline","dataSource":{"transport":{"read":{"url":"/Api/GetLookupLetterQuick"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
</div>Which looks like this:
How to make the Switch either bigger in width and height or simply align its center horizontally and vertically?
Mihaela
Telerik team
answered
on
24 Aug 2022
1 answer
133 views
I have
<div class="row mt-3">
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.AwardTypeId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Outline)
.OptionLabel("Select Award Type...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupAwardTypes", "Api");
});
})
.Events(e =>
{
e.Select("AwardTypeId_OnSelect");
})
)
</div>
<div class="col-lg-8">
<kendo-textbox for="TenderNumber" size="ComponentSize.Medium" rounded="Rounded.Medium" fill-mode="FillMode.Outline" enable="false">
<textbox-label content="@nameof(Model.TenderNumber)" floating="true"/>
</kendo-textbox>
</div>
</div>Renders:
<div class="row mt-3">
<div class="col-lg-4">
<span title="" class="k-picker k-dropdownlist k-picker-outline k-picker-md k-rounded-md" unselectable="on" role="combobox" aria-expanded="false" tabindex="0" aria-controls="AwardTypeId_listbox" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-busy="false" aria-describedby="d51a34cd-9a61-4c07-af6f-dd41980be3a7" aria-activedescendant="c66cf112-868e-4f3d-bcfa-ad32c0cf3f7e"><span id="d51a34cd-9a61-4c07-af6f-dd41980be3a7" unselectable="on" class="k-input-inner"><span class="k-input-value-text">Tender</span></span><button type="button" tabindex="-1" unselectable="on" class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button" aria-label="select"><span class="k-icon k-i-arrow-s k-button-icon"></span></button><input data-val="true" data-val-required="The AwardTypeId field is required." id="AwardTypeId" name="AwardTypeId" style="width: 100%; display: none;" type="text" value="0" data-role="dropdownlist"></span><script>kendo.syncReady(function(){jQuery("#AwardTypeId").kendoDropDownList({"select":AwardTypeId_OnSelect,"dataTextField":"Name","dataValueField":"Id","optionLabel":"Select Award Type...","value":"0","size":"medium","rounded":"medium","fillMode":"outline","dataSource":{"transport":{"read":{"url":"/Api/GetLookupAwardTypes"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
</div>
<div class="col-lg-8">
<span data-role="floatinglabel" class="k-floating-label-container k-state-empty k-focus"><label class="k-label k-input-label" for="TenderNumber">TenderNumber</label><span class="k-input k-textbox k-input-outline k-input-md k-rounded-md" style=""><input id="TenderNumber" name="TenderNumber" type="text" value="" data-role="textbox" aria-disabled="false" class="k-input-inner" autocomplete="off" style="width: 100%;"></span></span>
<script>kendo.syncReady(function(){jQuery("#TenderNumber").kendoTextBox({"enable":false,"label":{"content":"TenderNumber","floating":true},"size":"medium","rounded":"medium","fillMode":"outline"});});</script>
</div>
</div>That looks like this:And floating label:
How to align them properly? I'm using the Material Main theme.
Mihaela
Telerik team
answered
on
24 Aug 2022
1 answer
439 views
Hello,
I have followed various examples and my very minimal knowledge of Kendo to attempt to filter a large dataset on the server side Razor Pages Page.
I have used this: https://docs.telerik.com/aspnet-core/html-helpers/editors/multiselect/binding/razor-page
However, I cannot get the filtered data to return correctly without type arguments being thrown by the method.
Things I have checked
- Pascal Case is being returned despite getting a Splice error.
- An empty array is being returned on from the server as a default
Code
1. MultiSelect Component
@model Guid
@(Html.Kendo().MultiSelectFor(x => x)
.DataTextField("OrderNumber")
.DataValueField("Id")
.Placeholder("Start typing order numbers...")
.Filter(FilterType.Contains)
.DataSource(dataSource =>
{
dataSource.Ajax();
dataSource.Read(r => r.Url("/XXXX/XXXX/Index?handler=OrderMultiSelectRead")
.Data("forgeryToken")
.Type(HttpVerbs.Post))
.ServerFiltering(true);
}
).HtmlAttributes(new {style ="width: 100%" }))2. Server Side Code
public async Task<IActionResult> OnPostOrderMultiSelectRead([DataSourceRequest] DataSourceRequest request, string text)
{
var result = new List<Order>();
try
{
var filters = request?.Filters?.Cast<FilterDescriptor>().ToList();
var firstFilter = filters.FirstOrDefault();
if (firstFilter == null) return new JsonResult(await result.ToDataSourceResultAsync(request));
firstFilter.MemberType = typeof(int?);
var firstFilterValue = firstFilter.Value.ToString();
if (string.IsNullOrEmpty(firstFilterValue) || firstFilterValue.Length < 5)
return new JsonResult(await result.ToDataSourceResultAsync(request));
var orderNumberParsedAsInt = int.Parse(firstFilterValue);
var matchingOrders =
(await this.orderRepository.GetModelsAsync(x => x.OrderNumber == orderNumberParsedAsInt))
.OrderByDescending(x => x.OrderNumber).ToList();
return new JsonResult(await matchingOrders.ToDataSourceResultAsync(request));
}
catch(Exception exception)
{
var resultPayload = await result.ToDataSourceResultAsync(request);
resultPayload.Errors = new List<Exception> { exception };
return new JsonResult(resultPayload);
}
}
Momchil
Telerik team
answered
on
24 Aug 2022
1 answer
102 views
The model uses inheritance.How to make that when loading the data from the model is automatically substituted?
@(Html.Kendo().DropDownList()
.Name("LoginViewModels.Country.Obl")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Выберите область")
.DataTextField("Key")
.DataValueField("Key")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("LoadObl", "Account");
});
})
)
Alexander
Telerik team
answered
on
24 Aug 2022
1 answer
159 views
My grid only shows a few columns of my model. My model is much larger than what I show on the grid.
I wanted to have a toolbar "Add new contact" on the grid.
In the grid rows I was going to have an "Edit Contact" button.
Both of these would pop up the same editor template. The editor template needs to be responsive and not in a small window.. Planning for a UI four column row on deskstop but stacked on mobile.
I cannot seem to find the right example for doing this.
Help please!
Thanks
Stoyan
Telerik team
answered
on
24 Aug 2022
1 answer
1.3K+ views
I have a serious problem (with code, that is)...
I have a page with a TabStrip control on it. Using the Selected option on the first tab (set to true) I can't get that tab to be the active tab when the page loads. After load, clicking on any tab but the first one makes the tab LOOK like it is selected, but the content doesn't change for any tab until I click on that first tab. In other words, I can't set the active tab using the HTML Helper - with or without the Selected property being set, the tabstrip just doesn't work until I click the first tab.
What I'm trying to do is this: tab 1 has a data grid and tabs 2-4 have charts. When initially loaded, the grid is displayed. When one of the other tabs are selected I want to capture that and check the number of categories in the chart. If there are more than the current window size can handle, I want to manually set the width property of the chart and call the resize method so the user scrolls horizontally (without doing this, there are some charts where the category names look like an ink blot - one in particular can have 387 categories - ick, but what the client wants).
At this point I am not even sure if this will work. But I know the client will pitch a fit if I can't get that first tab automatically selected when the page loads. The next fit comes when I can't get the chart resized so it is readable. FYI, Bootstrap 5's native tabs work but the Kendo TabStrip does not. If I can't get this working, I will have to go back to that approach to see if I can get the chart to resize.
And FYI, this particular page is not wrapped in any Bootstrap containers, just nested in an Accordian control.
3 answers
667 views
Dear All.
I have a listview within the listview items are displayed. This is my current code for the html.
<section> <script type="text/x-kendo-tmpl" id="templateRC"> <div id="selectedRC" class=" SetHeight"> <span>#:ID#</span> </div> </script> <div class="demo-section k-content wide"> @(Html.Kendo().ListView<SLM.Models.ViewModel>() .Name("listView") .TagName("div") .ClientTemplateId("templateRC") .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("_Reports_Chart", "Home", new { iTypeID = Model.TYPE2_ID }) ) ) .Selectable(ListViewSelectionMode.Single) // .Events(events => events.Change("onSelectReport")) ) </div> </section>My css Code:
.SetHeight { width: calc(50% - 3%); border: 1px solid #008000; margin: 1%; float: left;}When I check my browser the items will displayed like rectangles, so theyre not equal width and height. I tried adding some javascript to get the width and use it for the height but it keeps displaying like a rectangle.
The Jquery:
$(function () { var divWidth = $('.SetHeight').width(); $('.SetHeight').height(divWidth); console.log(divWidth);});
(logging also returns null. When I create a custom project on codepen. it does work for some reason.)
So now is my question: What do I need to change/add/remove to make the boxes equal width and height(squares).
Kind regards. Bjorn
Stoyan
Telerik team
answered
on
19 Aug 2022
1 answer
196 views
I was converting HtmlHelps to TagHelpers because the formatting in my code files is getting out of control. I realized that some Kendo controls are not that straightforward to convert.
This works fine:
@(Html.Kendo().TabStrip()
.Name("tabStrip1")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().SpriteCssClasses("fa-duotone fa-clock-rotate-left").Text("History").Content(@<text>@Html.DisplayFor(m => m.History, "LetterHistory")</text>);
items.Add().SpriteCssClasses("fa-duotone fa-thumbs-up").Text("Approvers").Content(@<text>@Html.DisplayFor(m => m.Approvers, "LetterApprovers")</text>);
items.Add().SpriteCssClasses("fa-duotone fa-magnifying-glass").Text("Details").Content("");
items.Add().SpriteCssClasses("fa-duotone fa-link").Text("Attachments").Content(@<text>@await Component.InvokeAsync(viewName, new { LetterGuid = Model.IdCode.ToString() })</text>);
})
)In TagHelper format, content is not shown for any tabs:
<kendo-tabstrip name="tabStrip">
<popup-animation>
<open effects="fade:in" />
</popup-animation>
<items>
<tabstrip-item text="History" icon-class="fa-duotone fa-clock-rotate-left" selected="true">
<content>@Html.DisplayFor(m => m.History, "LetterHistory")</content>
</tabstrip-item>
<tabstrip-item text="Approvers" icon-class="fa-duotone fa-thumbs-up">
<content></content>
</tabstrip-item>
<tabstrip-item text="Details" icon-class="fa-duotone fa-magnifying-glass">
<content>@Html.DisplayFor(m => m.Approvers, "LetterApprovers")</content>
</tabstrip-item>
<tabstrip-item text="Attachments" icon-class="fa-duotone fa-link">
<content>@await Component.InvokeAsync(viewName, new { LetterGuid = Model.IdCode.ToString() })</content>
</tabstrip-item>
</items>
</kendo-tabstrip>
Aleksandar
Telerik team
answered
on
19 Aug 2022
