I using VS 2017 15.9.3 + asp.net core + mcv ( + razor )
created the project with telerik Project Asp.net core + Grid selection.and created 3 times with the sass theme generator a template and replaced in
_Layout.cshtml the stylesheet
<environment names="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <!--link rel="stylesheet" href="~/css/site.css" /--> <link rel="stylesheet" href="~/css/all.css" /> </environment> <environment names="Staging,Production"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> <!--link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /--> <link rel="stylesheet" href="~/css/all.css" asp-append-version="true" /> </environment>
but anyhow the Grid looks ugly in the footer any time.
i found this blog https://www.telerik.com/blogs/getting-started-telerik-ui-for-asp-net-core-and-bootstrap-4
but i do not understand how to do the update
>>No matter how you choose to manage your dependencies, the default layout (i.e _Layout.cshtml
)
should contain references to them. The default layout >>defines a top
level template for views in your web application. These references
include the following:
where to store the references , where to reference them etc..
it´s a little bit confusing me so please is there some better help tan this how to update or maybe it´s not needed anyhow to solve the grid ui problem ?
thanks br thomas
I am having some strange issue with cascading binding.
This code here does work:
<
kendo-dropdownlist
name
=
"Countries"
bind-to
=
"@(new SelectList(Model.Countries,"
Id","CountryName"))"></
kendo-dropdownlist
>
@(Html.Kendo().DropDownList()
.Name("DocumentTypes")
.DataTextField("Name")
.DataValueField("Id")
.BindTo(Model.GovIdTypes)
.CascadeFrom("Countries")
.CascadeFromField("IssuingCountry.Id")
)
But this one does not:
<
kendo-dropdownlist
name
=
"Countries"
bind-to
=
"@(new SelectList(Model.Countries,"
Id","CountryName"))"></
kendo-dropdownlist
>
<
kendo-dropdownlist
name
=
"DocumentTypes"
bind-to
=
"@(new SelectList(Model.GovIdTypes,"
Id","Name"))"
cascade-from
=
"Countries"
cascade-from-field
=
"IssuingCountry.Id"
></
kendo-dropdownlist
>
I don't know why I cannot se the tag helper here.
The first dropdown I got to work with tag helper but the second one not.
As you have read the title. I want to add a variable in my title. When I put a property in my model, and also define the model in my div. It still gives me the error:
The name 'property' does not exist in the current. But when I add series for example I can do Model => Model.propname Why is it not possible to do this? sTotalCount is in Model2
The code:
@model model1
<
div
class
=
"demo-section k-content wide"
>
@(Html.Kendo().Chart<
App.Model2
>()
.Name("test" + Model1.ID)
.Title(sTotalcount + "this is the total")
Hello,
I want for my bar to have a Y-axis line. Just the same as this Dojo Example
I have removed the first plotband so only the line will be visible. But then I see this:
from: 30000,
to: 30500,
Is there a way to just set it at 30000 and not to 35000?
Kind regards
Hi! I'm using IFrame windows for modal forms and want to be able to resize the modal window dynamically, based on the size of the calling parent.
Here is the calling parent:
@page
@addTagHelper "*, Kendo.Mvc"
@model MySite.Test.CustomerModel
@{
Layout = null;
}
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
title
>Customer</
title
>
<
link
href
=
"https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap-v4.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.aspnetmvc.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.timezones.min.js"
></
script
>
</
head
>
<
body
>
@{
string[] actions = new string[] { "Close" };
}
<
kendo-window
name
=
"addEditCustomer"
modal
=
"true"
title
=
"Add a New Customer"
draggable
=
"true"
iframe
=
"true"
resizable
=
"true"
on-close
=
"onClose"
style
=
"display:none"
actions
=
"actions"
>
<
content
>
loading user info...
</
content
>
<
popup-animation
enabled
=
"true"
/>
</
kendo-window
>
<
a
href
=
"javascript:void(0);"
onclick
=
"openWindow(5)"
class
=
"btn btn-sm btn-outline-primary right"
>Click here to open the window.</
a
>
<
div
class
=
"responsive-message"
></
div
>
<
script
>
function onClose() {
//alert("closed");
}
function openWindow(id) {
var url = "/test/testaddcustomer?id=" + id;
$("#addEditCustomer").data("kendoWindow").refresh({ url: url }).title("Edit Customer");
$("#addEditCustomer").data("kendoWindow").open();
$("#addEditCustomer").data("kendoWindow").center();
}
</
script
>
</
body
>
</
html
>
And here is the window page:
@page
@model MySite.Test.AddCustomerModel
@{
Layout = null;
}
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
title
>@ViewBag.Title</
title
>
<
link
rel
=
"stylesheet"
href
=
"~/css/bootstrap.css"
asp-append-version
=
"true"
/>
<
link
rel
=
"stylesheet"
href
=
"~/css/site.css"
asp-append-version
=
"true"
/>
<
link
href
=
"~/lib/open-iconic/font/css/open-iconic-bootstrap.css"
rel
=
"stylesheet"
/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<
script
src
=
"~/js/site.js"
asp-append-version
=
"true"
></
script
>
<
script
src
=
"~/js/bundle.js"
></
script
>
<
script
src
=
"~/lib/bootstrap/dist/js/bootstrap.min.js"
></
script
>
</
head
>
<
body
>
<
div
>
<
br
/>
<
h2
>TestAddCustomer</
h2
>
<
p
> This would be a form to add the customer.</
p
>
</
div
>
</
body
>
</
html
>
<
script
>
$(document).ready(function () {
//var showWidth = $(window).parent.width()*.8;
//var showHeight = $(window).parent.height() * .8;
var showWidth = 400;
var showHeight = 400;
window.parent.$("#addEditCustomer").data("kendoWindow").setOptions({ width: showWidth, height: showHeight });
window.parent.$("#addEditCustomer").data("kendoWindow").center();
});
</
script
>
I am able to get the width and height to set to static values (400x400) and recenter, but I'd like to get the height dynamically, as in the commented lines.
Any help would be much appreciated!
I cannot figure out how to color the background of the Toolbar in a Kendo UI Grid. I can style the buttons but I want the <div> or panel behind the buttons to be a different color that what you see in the attachment, white.
Thanks
Hi,
I have some question,how to disable column in popup grid.I have code :
View:
@model DevRedsMk3.Models.NpvCalculation
<style>
.k-grid {
font-size: 12px;
}
</style>
<div>
@(Html.Kendo().Grid<DevRedsMk3.Models.NpvCalculation>()
.Name("NpvCalculation")
.Columns(columns =>
{
columns.Bound(p => p.NpvCalculationId).Hidden();
columns.ForeignKey(p => p.TransactionId, (System.Collections.IEnumerable)ViewData["custTrans"], "TransactionId", "TransactionId").Title("TransactionId ID");
columns.Bound(p => p.LastPayment).Title("Last Payment");
columns.Bound(p => p.OutstandingAmount).Title("Outstanding Amount");
columns.Bound(p => p.Installment).Title("Installment");
columns.Bound(p => p.Interest).Title("Interest");//Title("Interest").Editable(false)
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
columns.Command(c => c.Custom("OK").Text("OK").Click("OK"));
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Events(e => { e.DataBinding("onchangeevent"); })
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Scrollable(s => s.Height(570))
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.NpvCalculationId);
model.Field(p => p.Interest).Editable(false);
})
.Read(read => read.Action("List", "NpvCalculations"))
.Update(update => update.Action("Update", "NpvCalculations"))
.Create(create => create.Action("Create", "NpvCalculations"))
.Destroy(destroy => destroy.Action("Destroy", "NpvCalculations"))
)
)
<script type="text/javascript">
function OK(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$.ajax({
url: "/NpvCalculations/GenerateNpvBaru",
//data: dataItem.id,
//data: { 'TransactionId': dataItem.TransactionId },
data: { TransactionId: dataItem.TransactionId },
success: function (response) {
//$('#viewDetails').html(response);
//alert('Approve done...');
}
});
}
</script>
<script>
function onchangeevent() {
$('#OutstandingAmount').val("10000");
//document.getElementById("OutstandingAmount").value = "10000";
}
</script>
</div>
I want in field Interest column disable,i have write code => model.Field(p => p.Interest).Editable(false) but it did not work.
Can you help me.
Thanks,
Regadrs,
Machriza
Dear,
Firstly, I downloaded the test grid file with https://www.telerik.com/forums/razor-pages-grid-binding-with-ajax-support, I tried, the grid works.
when I added "services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");" to ConfigureServices,the dome of grid doesn't work, it is no response to call the read and update handler.
Test Env:VS2017 .net core 2.1 Razor, Telerik:Ver 2018.3.1017
I would appreciate it if you can give me some ideas.
thanks.
......
services
.AddMvc()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
services.AddKendo();
}
razor page code
<h2>TestGrid</h2>
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@(Html.Kendo().Grid<WebApplication8.Models.Customer>().Name("grid")
.AutoBind(false)
.Groupable()
.Sortable()
.Columns(x =>
{
x.Bound(c => c.Address);
x.Bound(c => c.Name);
x.Command(c => c.Edit());
})
.DataSource(d => d.Ajax()
.Read(r => r.Action("Pages", "Contact", new { handler = "ReadRecords" }).Type(HttpVerbs.Post))
.Update(u => u.Action("Customer", "Index", new { handler = "UpdateRecord" }).Type(HttpVerbs.Post))
.Model(m => m.Id(id => id.CustomerId))
.PageSize(10)
)
.Pageable()
)
<script>
$(function () {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.transport.options.read.beforeSend = function (req) {
req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
};
grid.dataSource.transport.options.update.beforeSend = function (req) {
req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
};
grid.dataSource.read();
})
</script>
second, If I removed "services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");" from ConfigureServices, The Grid can work fine, but the ajax event doesn't work, I really don know the why.
<input asp-for="SearchString" onchange="HandlerTest()" class="form-control" />
<script>
function HandlerTest() {
$.ajax({
type: "POST",
contentType: "application/json",
url: "About?handler=LoginIn",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
//data: { UserName: $("#UserName").val(), PassWord: $("#PassWord").val() },
success: function (response) {
console.log(response);
},
failure: function (response) {
alert(response);
}
});
}
</script>
Hi,
I am currently using a trial version of Kendo UI for ASPNet Core. For my
application I am looking to use a Gantt like control.
I need to be able to show the Gantt displaying the Tasks that users need to
complete. These are assigned to a particular place in a factory.
Would there be a way in this control to show the "assigned
locations" down the left (where task id, title, start & end are in the
example), and then all the tasks are displayed on the right on the correct
location row; at the correct date/time etc.
Thanks
Ashley
@(Html.Kendo().DropDownTree()
.Name("DropDownTree")
.AutoClose(false)
.Checkboxes(true)
.Items(dropdowntree =>
{
dropdowntree.Add().Text("My Documents").Id("1")
.Expanded(true)
.Checked(true)
.Items(root =>
{
root.Add().Text("Kendo UI Project").Id("2")
.Expanded(true)
.Items(project =>
{
project.Add().Text("about.html").Id("3").Checked(true);
project.Add().Text("index.html").Id("4");
project.Add().Text("logo.png").Id("5");
});
root.Add().Text("New Web Site").Id("6")
.Expanded(true)
.Checked(true)
.Items(item =>
{
item.Add().Text("mockup.jpg").Id("7");
item.Add().Text("Research.pdf").Id("8");
});
root.Add().Text("Reports").Id("9")
.Expanded(true)
.Items(reports =>
{
reports.Add().Text("February.pdf").Id("10").Checked(true);
reports.Add().Text("March.pdf").Id("11").Checked(true);
reports.Add().Text("April.pdf").Id("12");
});
});
})
)