Hi,
We are using Kendo controls for MVC. There was a security scan done in our application, it capture few of the security issues.
We are able to fix all of the security issues except one.
CWE 829 - The application contains unsafe Content-Security-Policy (CSP) directives that could allow malicious script code to be included on the page.
So, as a result we have removed all the custom inline javascript and css to an external files and refer those external .js and .css files in our .cshtml page.
But when we use any of the Kendo controls like Kendo grid or Kendo calendar then in the runtime it create some inline scripts and we are getting application contains unsafe Content-Security-Policy (CSP) directives.
How to bypass those runtime inline scripts created by Kendo controls so that we don't get unsafe Content-Security-Policy (CSP) directives
during the security scan of the application.
Please let me know if you need any more information on this.
I have a div tag which has all three controls within the tag
1. TabStrip as the main container
2. Panel bar inside the tab
3.Dropdown inside the panel bar.
But the code is giving me the error - Inline markup blocks (@<p>Content</p>) cannot be nested. Only one level of inline markup is allowed.
Can somebody help me to resolve and fix it.
Below is my code structure
<div class="InputArea">am using Kendo UI with Razor as the frontend and .NET Framework 4.8.1 as the backend.
I have the following code, but it does not initially display "Switzerland".
It is present in the list, but I do not want to select it manually.
I want it to be preselected from the start. Could you please help me?
@model int?
@{
var initialItems = new List<SelectListItem>()
{
new SelectListItem{ Text = "Schweiz", Value = "1" }
};
}
<div class="k-floating-label-container mb-3">
@(Html.Kendo().DropDownListFor(x => x)
.DataTextField("Text")
.DataValueField("Value")
.AutoBind(false)
.BindTo(initialItems)
.Value(Model?.ToString())
.Events(e => e.Open("onDropDownOpen"))
.Deferred()
)
@Html.LabelFor(x => x, new { @class = "k-label k-input-label" })
@Html.ValidationMessageFor(x => x)
</div>
<script>function onDropDownOpen(e) {
var dropdown = $("#Store_DefaultLanguageId").data("kendoDropDownList");
if (dropdown.dataSource.total() === 1) {
dropdown.setDataSource(new kendo.data.DataSource({
transport: {
read: {
url: "/Language/LanguageList",
dataType: "json",
}
},
serverFiltering: true
}));
}
}
</script>
I have a grid popup edit template that includes a Kendo dropdown. I need to pass a model property value as the parameter to the Read() method of the dropdown. But the model is null when the Read() method gets called. So the value is always 0.
I've defined the Field in the parent grid. I even added it as a column too. Model.ProductId is always 0.
How do I pass a value from the popup editor model to the controller for the dropdown?
@(Html.Kendo().DropDownList() .Name("WarehouseId") .OptionLabel("Select a warehouse...") .HtmlAttributes(new { style = "width: 100%" }) .DataTextField("Text") .DataValueField("Value") .Value("-1") .DataSource(source => { source.Read(read => { read.Action("Inventory_Warehouse_Read", "Purchasing", new { productId = @Model.ProductId}); }); }) .Height(400) )
After upgrading Kendo MVC from v2021.2.616 to v2024.2.514 (KendoUIProfessional), the dropdownlist "SeriesType" on the grid is not firing the onChange event anymore. I saw an error message in the browser console.
Can you guys suggest a migration solution for it? Thanks!
Browser console error:
cshtml
@(Html.Kendo().Grid<MySeriesModel>().Name("drpSeries")
.Columns(column =>
{
column.Bound(model => model.SeriesName).HtmlAttributes(new { style = "font-weight: bold" }).Title("No.").Width(40);
column.ForeignKey(c => c.SeriesType, (IEnumerable<SelectListItem>)ViewBag.LstSeriesType, "value", "text").HtmlAttributes(new { style = "text-align: left", onChange = "onChangeSeriesType('#=ID#'); setSerieXml();" }).Title("Series Type").MinScreenWidth(60);
column.Bound(model => model.SeriesTitle).Title("Series Title").HtmlAttributes(new { onChange = "setSerieXml();" }).MinScreenWidth(120).Encoded(false);
column.Bound(model => model.Axis).Title("Axis").ClientTemplate("#=getAxisActionLink(ID,Axis)#").MinScreenWidth(120);
column.ForeignKey(c => c.Y_Format, (IEnumerable<SelectListItem>)ViewBag.LstSeriesFormat, "value", "text").HtmlAttributes(new { style = "text-align: left", onChange = "onChangeFormat(this);" }).Title("Format").MinScreenWidth(150);
column.ForeignKey(c => c.Y_Axis, (IEnumerable<SelectListItem>)ViewBag.ListSerriesYAxis, "value", "text").HtmlAttributes(new { style = "text-align: left", onChange = "onChangeYAxis(this,'#=ID#');" }).Title("Y Axis Scale").Width(100);
column.Bound(x => x.ID).ClientTemplate("<button class= 'k-button' type='button' onclick=onRemoveSeries('#=ID#')>" + "Remove" + "</button>").HtmlAttributes(new { style = "text-align: center" }).Title("").Width(120);
})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(item => item.ID);
model.Field(item => item.ID).Editable(false);
model.Field(item => item.SeriesName).Editable(false);
model.Field(item => item.Axis).Editable(false);
model.Field(item => item.SeriesTitle).Editable(false);
})
.Read(read => read.Action("SeriesList_DataSource", "Dashboard").Data("getDataForDgdSeries_Read"))
)
.Events(e =>
{
e.DataBound("onDataBoundDgdSeries");
})
.Resizable(x => x.Columns(true))
.AutoBind(true)
.Scrollable(x => x.Enabled(true))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.HtmlAttributes(new { style = "overflow: auto; width:100%", @class = "form-group" })
)
JS
function onChangeSeriesType(id) {
drpSeries = $('#drpSeries').data('kendoGrid');
dataSource = drpSeries.dataSource;
var lstSerieRow = dataSource.data();
if (lstSerieRow[id - 1].Axis.length > 0) {
lstSerieRow[id - 1].SeriesTitle = "";
lstSerieRow[id - 1].Axis = "";
dataSource.fetch();
}
}
Model
public class MySeriesModel
{
public string ID { get; set; }
public string SeriesName { get; set; }
public string AxisName { get; set; }
public string Axis { get; set; }
[AllowHtml]
[UIHint("GridDropDownList")]
public string SeriesType { get; set; }
public string SeriesTitle { get; set; }
public string X_Ordinate { get; set; }
public string X_Format { get; set; }
[AllowHtml]
[UIHint("GridDropDownList")]
public string Y_Format { get; set; }
[AllowHtml]
[UIHint("GridDropDownList")]
public string Y_Ordinate { get; set; }
[AllowHtml]
[UIHint("GridDropDownList")]
public string Y_OrdinateTo { get; set; }
public string TOOLTIP_FORMAT { get; set; }
[AllowHtml]
[UIHint("GridDropDownList")]
public string Y_Axis { get; set; }
}
controller
public ActionResult RenderSeriesConfig(string viewName)
{
List<SelectListItem> seriesType = GetDashboadChartStyleTypeList();
string arrSeriesType = "";
for (int i = 0; i < seriesType.Count; i++)
{
arrSeriesType += seriesType[i].Text.ToString() + "," + seriesType[i].Value.ToString() + ";";
}
ViewBag.LstSeriesType = seriesType;
ViewBag.ArrSeriesType = arrSeriesType;
ViewBag.LstSeriesAxis_Ordinate = GetLstFieldNamesSelectListItem(viewName);
ViewBag.LstSeriesFormat = GetFormatShortList();
ViewBag.ListSerriesYAxis = GetYAxisSettingList();
return PartialView("_ChartDetail_Series");
}
In a normal form which uses html validation adding required to a KendoDropDownList fails
Ive tried to research to find a solution, but its due to the field being hidden field behind the control
Thus you end up with an error similar to this
An invalid form control with name='CountryId' is not focusable.
I wish to know the proper way to show a validation message for a required dropdownlist in MVC
Hi! I have a Kendo UI Filter with a column bound with a DropDownList. Everything works fine, except the ExpressionPreview gives me "[object Object]". I read that I could use the PreviewFormat, but I have no clue about how that works if it's not for numeric values. Your documentation is very thin about the subject. Can you tell me how could I see the property set as DataTextField in the preview? Or at least the DataValueField.
My razor looks like :
@(Html.Kendo().Filter<OrderSearchBindingModel>()
.Name("filter")
.ApplyButton()
.ExpressionPreview()
.MainLogic(FilterCompositionLogicalOperator.Or).Fields(f =>
{
f.Add(x => x.Symbole).Label("My values list").Operators(c => c.String(x =>
x..Contains("Contient")).EditorTemplateHandler("getSymboleList")
}).DataSource("source"))
And the script containing the dropdown logic is like this :
.kendoDropDownList({
dataTextField: "SymboleDisplayName",
dataValueField: "Symbole",
dataSource: {
type: "json",
transport: {
read: "https://myodataurl.com/symbols/getSymbols"
},
schema: {
data: "value"
}
}
});
Note that my datasource is an OData query, so I defined a schema with data: "value" in my kendo.data.DataSource object as well as type: "json". The type is aslo specified in the transport.read preperties datatype: "json"