or
1 answer
498 views
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?
Mihaela
Telerik team
answered
on
11 Jan 2023
1 answer
112 views
Why is OrgChart not zoomable? Is there a workaround?
Alexander
Telerik team
answered
on
09 Jan 2023
0 answers
123 views
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>
1 answer
125 views
I have a grid which has a custom popup editor. When the editor opens I need to know whether I am in Edit or Create mode.
.Editable(e=>
e.Mode(GridEditMode.PopUp)
.TemplateName("CompanyOwnersEditor")
.Window(w => {
w.Animation(false);
w.HtmlAttributes(new { @class = "grid-popup-window" });
w.Name("companyOwnersEditor");
})
)
When I am in Edit mode my datasource for one of my DropDownList will be different than Create.
I am unable how to figure this out and Model is always null.
1 answer
525 views
Hello...
I have a grid on a razor page that shows related data to the main model. The grid has the usual CRUD operation buttons and there are corresponding post code in the .CS file. The anti-forgery token is configured and sent with each call back to the server. The grid is using in-line editing, so nothing custom at all. I have a Read operation defined, but because I am binding from the server it never gets called (just there for consistency). This is the grid in the CSHTML page:
@(Html.Kendo().Grid<SettlementHistoryModel>(Model.CoDefendantList)
.Name("coDefendantGrid")
.Mobile(MobileMode.Phone)
.DataSource(ds => ds
.Ajax()
.PageSize(30)
.Events(ev => ev.Error("errorHandler"))
.Model(m =>
{
m.Id(cod => cod.SettlementId);
m.Field(f => f.SettlementId).Editable(false);
})
.Batch(false)
.Create(c => c.Url("/CaseEdit?handler=NewCoDefendant").Data("forgeryToken"))
.Read(r => r.Url("/CaseEdit?handler=ReadCoDefendant").Data("forgeryToken"))
.Update(u => u.Url("/CaseEdit?handler=UpdateCoDefendant").Data("forgeryToken"))
.Destroy(d => d.Url("/CaseEdit?handler=DeleteCoDefendant").Data("forgeryToken"))
.ServerOperation(false)
)
.Pageable()
.Sortable(s => s
.AllowUnsort(true)
.SortMode(GridSortMode.Mixed)
.ShowIndexes(true)
)
.ToolBar(tb => tb.Create())
.Editable(ed => ed.Mode(GridEditMode.InLine))
.Scrollable(s => s.Enabled(true).Height("auto"))
.Columns(c =>
{
c.Command(c =>
{
c.Edit();
c.Destroy();
}).Width("15%").HtmlAttributes(new { style = "vertical-align: top;"}).Title("Actions");
c.Bound(res => res.SettlementId).Title("ID").Width("5%");
c.Bound(res => res.CaseId).Title("Case").Width("5%");
c.Bound(res => res.Codefendant).Title("Co-Defendant").Width("15%");
c.Bound(res => res.Settlement).Title("Settlement").Format("{0:c2}").Width("10%");
c.Bound(res => res.SettlementDate).Title("Settlement Date").Format("{0:MM/dd/yyyy}").Width("10%");
c.Bound(res => res.Comments).Title("Comments").Encoded(false);
})
.ColumnMenu(m => m
.ComponentType("modern")
.Columns(cm => cm.Sort("asc")))
.Reorderable(r => r.Columns(true))
.Resizable(rs => rs.Columns(true)))
Ok, so data populates in the grid with no problem and the appropriate Add, Edit and Delete buttons appear where they should. The appropriate post method is called. Here, for example, is the Update method:
public JsonResult OnPostUpdateCoDefendant(SettlementHistoryModel settlement, [DataSourceRequest] DataSourceRequest request)
{
// Check for a valid object
if (settlement != null)
{
//_context.SettlementHistories.Update(settlement);
//_context.SaveChanges();
}
// And return the JSON for the object
return new JsonResult(new[] { settlement }.ToDataSourceResult(request, ModelState));
}
The problem? When this method is hit, the SettlementHistoryModel object is not null, but all of the properties of the singular object ARE null (except the SettlementId, which is 0). It doesn't matter how the grid gets the data (server binding or Read action), which order the items are in the method signature, etc. The method is called, but ultimately the operation will fail because there is nothing in the SettlementHistoryModel object.
I've downloaded the grid demo and that seems to work. My code is pretty much exactly the same as the demo code, yet there is no way I have tried that gets my code working.
What am I missing?
Mihaela
Telerik team
updated answer
on
06 Jan 2023
1 answer
132 views
In my webAPI i'm using the [Authorize] control.
When I call my webAPI to populate a grid or a dropdown with this code
.DataSource(source=>source.Custom()
.Transport(transport=>transport.Read(read=>
{
read.Url($"{WebApiUrl}")
.DataType("json").Data("forgeryToken");
})
)
.PageSize(12)
only in localhost it returns this error <Failed to load resource: the server responded with a status of 401 (Unauthorized)> .
Instead if I use an ajax call in javascript it works
$.ajax({
url: `${WebApiUrl}`,
method: 'get',
crossDomain: true,
cache: false,
xhrFields: {
withCredentials: true,
},
success: function (data) {
options.success(data)
}
})
I've searched in google but i didn't find anything that can help me. Do I have to pass the credentials somehow?
Thank you
Stoyan
Telerik team
answered
on
04 Jan 2023
1 answer
143 views
Hello,
I'm evaluating Telerik as a possible reporting solution. I'm totally new to Telerik and I currently use SQL Server SSRS for all reporting. There are some things that SSRS does easily but I don't see a parallel in Telerik, at least not yet.
Example: I have data that I retrieve from an SQL Server DB based on the client which contains style information for my reports. I can retrieve a path for the client's logo, their preferred color patterns for headers, footers, table styles, backgrounds, fonts, font styles (bold, italic, etc.) and then in SSRS I can define these settings as expressions taken from the datasource. Each client can have their own specific formatting so I want the report to be standardized in form but customized to the client with styles.
As a simple example, suppose I retrieve data that tell me the client wants Arial size 14 font for the title with gray background and Blue font color. These are stored as separate values that I retrieve from a stored procedure and the datasource is bound to the report. I created a mock report with the title, subtitle and rundate textboxes placed where they should be in the header section.
How can I assign the font styles and coloring to the text boxes?
1 answer
901 views
I am setting up a custom kendo window for a grid popup. On the window I have a form that will be posted via ajax. I am attempting to use a numeric text box in the template for the popup but I need to set the max value based on the data item that is using the popup. Is it possible to use a numeric text box in a kendo template and set the max value to a field in the data item for the template? Also, I can't seem to figure out how to set up validation for numeric text box either. How do I use a numeric text box that is not bound to the model but still validates the input?
This is the grid columns. The custom command opens my kendo window.
.Columns(columns =>
{
columns.Bound(m => m.Name).Groupable(false);
columns.Bound(m => m.InventoryTypeName);
columns.Bound(m => m.Description).Hidden().Groupable(false);
columns.Bound(m => m.Active);
columns.Bound(m => m.BulkItems).Hidden();
columns.Bound(m => m.QuantityOnHand).Hidden();
columns.Bound(m => m.QuantityAssigned).Hidden();
columns.Bound(m => m.QuantityTotal).Hidden();
columns.Bound(m => m.Brand).Title("Brand Required").Hidden();
columns.Bound(m => m.SerialNumber).Title("S/N Required").Hidden();
columns.Bound(m => m.ModelNumber).Title("Model# Required").Hidden();
columns.Bound(m => m.Size).Title("Size Required").Hidden();
columns.Bound(m => m.Color).Title("Color Required").Hidden();
columns.Bound(m => m.CreatedBy).Title("Creator").Hidden();
columns.Bound(m => m.CreatedDate).Title("Creation Date").Hidden();
columns.Bound(m => m.UpdatedBy).Title("Last Editor").Hidden();
columns.Bound(m => m.UpdatedDate).Title("Last Edit Date").Hidden();
columns.Command(m => { m.Edit(); m.Custom("Assign").Click("AssignInventory"); });
})Here is the script for the custom command.
@*Assign inventory script for command button*@
<script type="text/javascript">
function AssignInventory(e) {
e.preventDefault();
var assignTemplate = kendo.template($("#AssignInventoryTemplate").html());
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#AssignInventoryWindow").data("kendoWindow");
wnd.content(assignTemplate(dataItem));
wnd.center().open();
}
function AssignmentTypeData() {
var inventoryTypeId = $("#InventoryTypeId").val();
return { inventoryTypeId: inventoryTypeId };
}
function FilterAssignees(e) {
return {
assignmentTypeId: $("#AssignmentType").val()
}
}
</script>This is my template script for the window.
<script type="text/x-kendo-template" id="AssignInventoryTemplate">
<form id="AssignInventoryForm" class="k-edit-form-container" action="/Inventory/AssignInventory" 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#" />
<div class="k-edit-label">
<label>Assignment Type</label>
</div>
<div class="k-edit-field">
@(Html.Kendo().DropDownList()
.Name("AssignmentType")
.DataTextField("Name")
.DataValueField("Id")
.OptionLabel("Select Assignment Type")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
});
})
.ToClientTemplate()
)
</div>
<div class="k-edit-label">
<label>Assign To</label>
</div>
<div class="k-edit-field">
@(Html.Kendo().DropDownList()
.Name("Assignee")
.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("AssignmentType")
.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">
</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 QuantityToAssign field is required.</span>
<span class="k-callout k-callout-n"></span>
</div>*@
@(Html.Kendo().NumericTextBox()
.Name("QuantityToAssign")
.Value(1)
.Min(1)
.Max(@<text>#:QuantityOnHand#</text>)
.ToClientTemplate()
)
<span class="k-invalid-msg" data-for="QuantityToAssign"></span>
</div>
#}#
</form>
</script>
Stoyan
Telerik team
answered
on
03 Jan 2023
0 answers
114 views
I have a custom popup editor which has a DropDownListFor which has a datasource. I need to pass a parameter to the Read method which is a .NET action. The parameter needs to be whether or not we are in update or create mode.
I currently pass CompanyId from the ViewData but I need one more param as mentioned above. Since Model is null always in Edit or Create mode I cannot key off of that.
@Html.LabelFor(m => m.UserId)
@(Html.Kendo().DropDownListFor(m => m.UserId)
.OptionLabel("Select..")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(dataSource => {
dataSource.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport => transport.Read("Global_SalesUsers_DropDown", "Company", new {companyId = companyId}))
.Schema(schema => schema.Data("Data"))
.Events(events => events.RequestEnd("processViewDataResponse"));
})
)
@Html.ValidationMessageFor(m => m.UserId)0 answers
116 views
I have a custom popup grid editor (which is a partial view). Model is always null in the editor so I cannot access the Model to key off values.
I have a datasource for this dropdown list as you can see below. I need to add a userId parameter to this datasource when in edit mode. Unfortunately I have not been able to figure out how to get that value since Model is null.
Any tricks I can do here?
<div class="editor-container">
<div class="row">
<div class="col">
@Html.LabelFor(m => m.UserId)
@(Html.Kendo().DropDownListFor(m => m.UserId)
.OptionLabel("Select..")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(dataSource => {
dataSource.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport => transport.Read("Global_SalesUsers_DropDown", "Company", new {companyId = companyId}))
.Schema(schema => schema.Data("Data"))
.Events(events => events.RequestEnd("processViewDataResponse"));
})
)
@Html.ValidationMessageFor(m => m.UserId)
</div>
</div>
