We have a context menu on an icon at the right of a grid. When we open a context menu, it initially opens with much of the menu hidden off the edge of the screen (see first attached image). If I open it again, the open position shifts so the whole menu is visible.
Ideally, what we would like is when the context menu opens, it is rendered so the right edge of the menu is aligned with the mouse cursor position rather than the left (don't really care if the menu text is left or right justified) (see second attached image)
I tried wrapping the context menu with a div which include the k-rtl class, but this made no difference.
Is this possible?
Currently using tagHelpers with UI for ASP.NET Core 2022.3.1109.
I have set up a kendo window to popup from a grid command. On the window is a form with cascading drop down lists and an optional input field. How do I set up kendo validation for the form in the template?
This is my template. Note, the inputs in this form are not bound to fields in the model for my view. This is a stand alone form separate from the model for the page.
<script type="text/x-kendo-template" id="AssignInventoryTemplate">
<form id="AssignInventoryForm" class="k-edit-form-container" action="@Url.Action("AssignInventory", "Inventory")" method="post" kendo-validator="true">
<style>
.k-edit-form-container {
max-height: 600px;
}
.k-edit-form-container .k-edit-buttons {
margin: 0;
padding: 8px 0px;
}
</style>
<input type="hidden" id="inventoryId" name="inventoryId" value="#:data.Id#" />
<input type="hidden" id="inventoryTypeId" name="inventoryTypeId" value="#:data.InventoryTypeId#" />
@Html.AntiForgeryToken()
<div class="k-edit-label">
<label>Assignment Type</label>
</div>
<div class="k-edit-field">
@(Html.Kendo().DropDownList()
.Name("assignmentTypeId")
.DataTextField("Name")
.DataValueField("Id")
.OptionLabel("Select Assignment Type")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
});
})
.HtmlAttributes(new { required = "required", validationmessage = "Assignment type is required" })
.ToClientTemplate()
)
</div>
<div class="k-edit-label">
<label>Assign To</label>
</div>
<div class="k-edit-field">
@(Html.Kendo().DropDownList()
.Name("assigneeId")
.DataTextField("Name")
.DataValueField("Id")
.OptionLabel("Select Assignee")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAssignees", "Inventory").Data("FilterAssignees");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("assignmentTypeId")
.HtmlAttributes(new { required = "required", validationmessage = "Assignee is required" })
.ToClientTemplate()
)
</div>
# if(data.BulkItems) { #
<div class="k-edit-label">
<label>Quantity To Assign</label>
</div>
<div class="k-edit-field">
<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
<input id="quantityToAssign" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="quantityToAssign" value="1" required="required" validationMessage="Quantity to assign is required">
</span>
<div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="quantityToAssign" id="quantityToAssign_validationMessage" data-valmsg-for="quantityToAssign">
<span class="k-tooltip-icon k-icon k-i-warning"></span>
<span class="k-tooltip-content">The Quantity To Assign field is required.</span>
<span class="k-callout k-callout-n"></span>
</div>
</div>
#}#
<div class="k-edit-buttons k-actions-end">
<button type="button" onclick="AssignInventorySubmit(event)" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
<span class="k-icon k-i-check k-button-icon"></span>
<span class="k-button-text">Save</span>
</button>
</div>
</form>
</script>
This is the submit handler
function AssignInventorySubmit(e) {
var validator = $("#AssignInventoryForm").data("kendoValidator");
if (validator.validate())
$("#AssignInventoryForm").submit();
}
This is the error I'm getting in the console
Uncaught TypeError: can't access property "validate", validator is undefined AssignInventorySubmit http://localhost:55614/Inventory:209 onclick http://localhost:55614/Inventory:1 3 Inventory:209:17
I'm trying to add Kendo widgets to an ASP.NET Core 6 project that uses an MVC template. Which NuGet package do I need? The one for ASP.NET MVC or the one for ASP.NET Core?
I apologize if this is question has an obvious answer, I've been developing in .NET for < 1 year and was not able to figure this out via searching.
I'm also struggling to know which version of the package I need. If I do need the ASP.NET Core package, then should I use the most current stable release? That looks like it installs a large number of .NET 7.0 dependencies I don't need.
Hi
I have a wizard that loads partials as steps. Whenever I add more than one kendo component (for example a gauge and a slider) onto the same partial the second component renders outside of the wizards' container.
Please assist with this.
Kind Regards
IHostingEnvironment used in FileManager is long obsoleted.
Any plan to upgrade to IWebHostEnvironment soon?
thank you.
I tried to add a badge to a button after successfull retrieving data by an ajax call:
@(Html.Kendo().Button()
.Name("postbox")
.ImageUrl("../../images/mail-black.svg")
.Content("Postfach")
.Events(e => e.Click("onClickPostbox"))
.HtmlAttributes(new { @class = "button-box", style = style }))
When document is loaded i use ajax to retriev data:
$(document).ready(function () {
$.ajax({
contentType: 'application/json; charset=utf-8',
url: '/Dks/GetPostboxData',
type: 'GET',
cache: false,
data: null,
success: function (data) {
console.log(data);
if (typeof data !== 'undefined' && data.length > 0) {
var unreadDocuments = data.filter(doc => doc.Read == false);
console.log(unreadDocuments);
//Here I want to do something like this:
$("#postbox").data('kendoButton').Badge({
text: unreadDocuments.length,
shape: "circle",
themeColor: "error",
align: "top end",
visible: unreadDocuments.length > 0
});
}
},
error: function (error) {
console.log(JSON.stringify(error));
}
});
});
I didn't find a way to do this. Did I miss something?
Kind regards
Timo
I'm trying to add a kendo grid to a Razor Pages app. The grid is simple, pretty much straight out of the samples. However, when I load the page, I get an empty grid and the error below (also on the attached screenshot):
Migrate entirely to HTTPS to have cookies sent to same-site subresources
A cookie was not sent to an insecure origin from a secure context. Because this cookie would have been sent across schemes on the same site, it was not sent. This behavior enhances the SameSite
attribute’s protection of user data from request forgery by network attackers.
Resolve this issue by migrating your site (as defined by the eTLD+1) entirely to HTTPS. It is also recommended to mark the cookie with the Secure
attribute if that is not already the case.
Here's the code:
Page:
@(Html.Kendo().Grid<tblEmployeeHardware>()
.Name("grid")
.Groupable()
.Sortable()
.Editable()
.Scrollable()
.Columns(columns =>
{
columns.Bound(column => column.HardwareDescription);
...
columns.Bound(column => column.SerialNumber);
columns.Command(column =>
{
column.Destroy();
}).Width(230);
})
.DataSource(ds => ds.Ajax()
.Read(r => r.Url("/Groups/IT/Hardware?handler=Read").Data("forgeryToken"))
.Destroy(d => d.Url("/Groups/IT/Hardware?handler=DeleteHardware").Data("forgeryToken"))
.Model(m => m.Id(id => id.Id))
.PageSize(30)
)
.Pageable()
)
<script>
function forgeryToken() {
return kendo.antiForgeryTokens();
}
</script>
Model:
public JsonResult OnPostDeleteHardware([DataSourceRequest] DataSourceRequest request, tblEmployeeHardware model)
{
var db = new DbAccessHelper(Settings);
db.CreateUpdateDelete("DELETE FROM tblEmployeeHardware WHERE Id = @ID",
new Dictionary<string, string> { { "ID", model.Id.ToString() } });
return new JsonResult(new[] { model }.ToDataSourceResult(request, ModelState));
}
public JsonResult OnGetRead([DataSourceRequest] DataSourceRequest request, string additionalParameter)
{
var ret = getHardware();
//The received parameter "additionalParameter" can be used for filtering/checking the data before returning it to the Grid.
return new JsonResult(ret.ToDataSourceResult(request));
}
I added the [RequireHttps] attribute to the SharedModel, and the following to program.cs:
builder.Services.ConfigureApplicationCookie(options =>
{
options.Cookie.SameSite = SameSiteMode.None;
});
Neither helped.
Can you guys give me a hand here?
Quesiton1.
If I had a series of datas, with the data below
X = {"1.1", "2.2", "3.4", "4.2", "5.3", "6.1", "7.3", "8.2", "9..1", "10.2", "11.4", "12.1"}
Y = {0.1, 3.907, 7.943, -7.3, 7.848, -1.8, 9.263, -4.2, 3.890, 8.238, 9.552, 6.855}
How can I show XAxis Scale with CategoryAxis Majorticks?
Quesiton2.
Extend the scenario above,
the last Value of X is 12.1, What if I would like to set the range of the scale from 0 to 20 or something else,
What should I set with the CategoryAxis?
It is like changing the max scale of XAxis dynamically, which depends on the first and the last value of the series of data.
if the first value and last value were 1.1 and 12.1, than the min and max would be -4 to 17
Min scale = first vale - 5 (round up) = -4
Max scale = last value + 5 (round up) = 17
Example
What I've tried on REPL
@section HeadContent {
<style>
#chart {
background: center no-repeat url('@Url.Content("~/shared/styles/world-map.png")')
}
</style>
}
<div class="demo-section wide">
@(Html.Kendo().Chart()
.Name("chart")
.Title("Test Setting Scale")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
)
.Series(series => {
series.Line(new double[] { 0.1, 3.907, 7.943, -7.3, 7.848, -1.8, 9.263, -4.2, 3.890, 8.238, 9.552, 6.855 }).Name("MyData");
})
.CategoryAxis(axis => axis
.Categories("1.1", "2.2", "3.4", "4.2", "5.3", "6.1", "7.3", "8.2", "9..1", "10.2", "11.4", "12.1")
.MajorGridLines(lines => lines.Visible(false))
//.BaseUnit(ChartAxisBaseUnit.Fit)
.MajorTicks(t => t.Step(1))
)
.ValueAxis(axis => axis
.Numeric().Labels(labels => labels.Format("{0}%"))
.Line(line => line.Visible(false))
.AxisCrossingValue(-10)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
)
)
</div>