Hello -
Can you please explain why the drop-down's or other controls are not loading in Kendo Window if we set the Deferred().
If i remove the Deferred() its working and loading the window properly.
Any help or pointers ?
@(Html.Kendo().DropDownList()
.Name("categories")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select a category...")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Black",
Value = "1"
},
new SelectListItem() {
Text = "Orange",
Value = "2"
},
new SelectListItem() {
Text = "Grey",
Value = "3"
}
}).Deferred()
.Events(e => e.Change("onCategoryChange"))
)
Hi,
We have a requirement, where-in we have lookups and these lookups can in turn have lookups. So, we have one kendo window opened from the main page -> from this kendo window, open another kendo window popup --> and another, and so on.
Please advise how we can achieve this functionality, since we are unable to successfully achieve this having tried many options.
Thanks,
Faraaz
I'm having an issue with my chart not properly mapping fields I believe it very well could be how I've configured it.
According to the exception PickDistributionModel.UserName is not defined, however upon inspection of the endpoint returning the List<PickDistributionModel> it is populated with the users login.
Exception being thrown:
Uncaught ReferenceError: UserName is not defined<br> at eval (eval at compile (kendo.all.min.js:25), <anonymous>:3:84)<br> at init._pointContent (kendo.all.min.js:128)<br> at init.show (kendo.all.min.js:128)<br> at init._showTooltip (kendo.all.min.js:127)<br> at r.callObserver (kendo.all.min.js:118)<br> at r.trigger (kendo.all.min.js:118)<br> at init.trigger (kendo.all.min.js:127)<br> at init.notify (kendo.all.min.js:118)<br> at r.show (kendo.all.min.js:124)<br> at r.show (kendo.all.min.js:126)
Chart Implementation:
@(Html.Kendo().Chart<PickDistributionModel>().Name(
"picker-workload"
).Title(title =><br>{<br>title.Text(
"Pick Distribution (24hr)"
);<br>title.Position(ChartTitlePosition.Top);<br>}).Legend(legend => legend.Visible(
false
))<br>.ChartArea(chart => chart.Background(
"transparent"
))<br>.DataSource(source => source.Read(read => read.Action(
"GetPickDistributions"
,
"BoeingOrder"
,
new
{Area=
""
})))<br>.Series(s => s.Pie(m => m.Total, m => m.UserName)<br>.Tooltip(tooltip => tooltip.Visible(
true
).Template(
"#= UserName #: \n 0: #= Open # \n A: #= Audit # \n P: #= Picked #"
)).StartAngle(150)))
Controller Endpoint:
/// <summary><br> /// Gets the distribution of picks for users within the last 24 hours.<br> /// </summary><br> /// <returns><br> /// An array of <see cref="PickDistributionModel"/><br> /// </returns><br> [HttpPost]<br> public async Task<ActionResult> GetPickDistributions()<br> {<br> try<br> {<br> var floor = DateTime.Now.AddDays(-75).Date;<br> var ceiling = DateTime.Now.AddDays(-74).Date;<br> using var service = new PickAssignmentService();<br> var _ = await service.GetPickDistributionsAsync(floor: floor, ceiling: ceiling).ConfigureAwait(false);<br> return this.Json(_);<br> }<br> catch (Exception e)<br> {<br> // TODO: Document Exception<br> var errorId = this.LogError(e, GetUserId(), nameof(BoeingOrderController));<br> e.ToLog(errorId);<br> }<br><br> return BadRequest("Woops, something went wrong.");<br> }
Chart Model:
/// <summary><br> /// The model for representing pick distribution in a(n) chart.<br> /// </summary><br> public class PickDistributionModel<br> {<br> /// <summary><br> /// The name of the [dbo].[SecurityUser] the pick distribution model represents.<br> /// </summary><br> public string UserName { get; set; }<br><br> /// <summary><br> /// The total number of picks in a(n) users distribution.<br> /// </summary><br> public string Total { get; set; }<br><br> /// <summary><br> /// The number of picks in a(n) "picked" status.<br> /// </summary><br> public string Picked { get; set; }<br><br> /// <summary><br> /// The number of picks in a(n) "non-picked" status.<br> /// </summary><br> public string Open { get; set; }<br><br> /// <summary><br> /// The number of picks in a(n) "audit" status.<br> /// </summary><br> public string Audit { get; set; }<br> }
I'm trying to create a Kendo Window that will present the user with a Kendo DropDownList and then cascade that selection to a Kendo ListView. I'm confused by when and where I need to use ToHtmlString() and Render(). I also want to handle the DropDownList and ListView events.
Main razor page (sorry, couldn't get code formatter to make this look better):
@(Html.Kendo().Window()
.Name("myModal")
.Title("Select Answer")
.Content(Html.Partial("_MyPartial").ToHtmlString())
.Draggable()
.Resizable()
.Width(600)
.Visible(false)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
) // I've tried with and without .Render() here
Javascript to call window:
$("#myModal").data("kendoWindow").open(); // works fine
Then _MyPartial:
<div>
<h5>Categories:</h5>
@(Html.Kendo().DropDownList()
.Name("categories")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select a category...")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCategories", "Home");
});
})
.Events(e => e.Change("onCategoryChange"))
.ToHtmlString() // Without this, it doesn't recognize onCategoryChange, with it html is displayed in window
)
<h5>Click to select a question</h5>
@(Html.Kendo().ListView<MyViewModel>()
.Name("questions")
.TagName("div")
.ClientTemplateId("questionTemplate")
.DataSource(dataSource =>
{
dataSource.Read(read =>
{
read.Action("GetQuestions", "Home").Data("filterQuestions");
}).ServerOperation(true);
})
.Pageable()
.Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single))
.Events(events => events.Change("onQuestionChange"))
.AutoBind(false)
.ToHtmlString()
)
</div>
Javascript to handle events on this partial page. I have tried placing this code on the partial and on the main razor page.
function filterQuestions() {
return {
questionId: $("#categories").data("kendoDropDownList").dataItem().Value
};
function onCategoryChange() {
$("#questions").data("kendoListView").dataSource.read();
};
function onQuestionChange() {
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
$("#Question").val(selected);
$("#questionBankModal").data("kendoWindow").close();
$("#btnQuestion").show();
};
I am setting up an editible grid and want to use the datasource version of the ForeinKey column.
columns.ForeignKey(d => d.AbbreviationId, ds => ds.Read(r => r.Action("GetAbbreviations", "API/Enum")), "Id", "Description").Width(100);
The dropdown list in the grid is filled properly etc., but the dropdown itself is not AutoWidth(true). To make this happen, I edited the GridForeignKey editor template. This does however not effect the dropdown.
When tested with a foreign key column that is filled via the ViewData[], this has the desired effect.
Hi,
I've Kendo Grid UI for MVC in my current MVC.NET project and there is a dropdownlist at the bottom of the grid, which, I believe is supposed to display page numbers, but currently this dropdownlist is getting only value "1" regardless of how many page I have.
I have attached a screen shot of the page for further clarification,
I want to fix this by binding the correct number of pages I am displaying and refresh the grid upon dropdownlist selection is changed.
Looking for assistance asap
Thank you
Below the snippet i was trying.
columns.Bound(c => c.OrderNumber).Title("OrderNumber").
.EditorTemplateName("_EditTextBox").EditorViewData(new { maxLength = 3})
Any help or pointers ?
it's not work,how to use EditorTemplateName?
columns.Bound(u => u.RoleNameString).EditorTemplateName("roles_editor"
);
<script type="text/javascript">
function roles_editor()
{
}
</script>
I have a column in grid (ASP.Net Core MVC) that is multi-select.
Right now I've turned filtering and sorting off for this column...
How to implement filtering for a column that is multi-select...