I am trying to place an Editor inside of a pane in a Splitter. The only problem is that the Editor goes past the end of the Splitter when I set the height to 100%, creating overflow in the pane, which I have hidden.
The workaround that I have found is putting the editor to have a height of calc(100% - 0px), but I feel as though this should not be necessary. Have I missed something here?
Here is the Tag Helpers with the editor height at 100% which produces the overflow.
<
kendo-splitter
name
=
"cp-homepage-splitter"
orientation
=
"SplitterOrientation.Vertical"
style
=
"height:100%;"
>
<
pane
size
=
"115px"
collapsible
=
"false"
resizable
=
"false"
scrollable
=
"false"
id
=
"cp-homepage-top-pane"
>
<
p
class
=
"iv-title iv-title-2"
>Home page</
p
>
<
p
class
=
"alert"
>Set the content for the first page shown.</
p
>
</
pane
>
<
pane
collapsible
=
"false"
resizable
=
"false"
id
=
"cp-homepage-bottom-pane"
style
=
"height:100%;overflow-y:hidden;"
>
<
kendo-editor
name
=
"HomepageEditor"
aria-label
=
"editor"
style
=
"height:calc(100% - 0px);"
>
<
resizable
enabled
=
"false"
/>
<
tools
>
<
tool
name
=
"bold"
/>
<
tool
name
=
"italic"
/>
<
tool
name
=
"underline"
/>
<
tool
name
=
"strikethrough"
/>
<
tool
name
=
"fontName"
/>
<
tool
name
=
"fontSize"
/>
<
tool
name
=
"foreColor"
/>
<
tool
name
=
"backColor"
/>
<
tool
name
=
"copyFormat"
/>
<
tool
name
=
"applyFormat"
/>
<
tool
name
=
"justifyLeft"
/>
<
tool
name
=
"justifyCenter"
/>
<
tool
name
=
"justifyRight"
/>
<
tool
name
=
"justifyFull"
/>
<
tool
name
=
"insertUnorderedList"
/>
<
tool
name
=
"insertOrderedList"
/>
<
tool
name
=
"outdent"
/>
<
tool
name
=
"indent"
/>
<
tool
name
=
"createLink"
/>
<
tool
name
=
"unlink"
/>
<
tool
name
=
"subScript"
/>
<
tool
name
=
"superScript"
/>
<
tool
name
=
"tableEditing"
/>
<
tool
name
=
"viewHtml"
/>
<
tool
name
=
"formatting"
/>
<
tool
name
=
"cleanFormatting"
/>
<
tool
name
=
"homePageSaveTool"
template-id
=
"homePageSaveToolTemplate"
/>
</
tools
>
<
content
>
<
h1
>Test</
h1
>
</
content
>
</
kendo-editor
>
</
pane
>
</
kendo-splitter
>
<
script
id
=
"homePageSaveToolTemplate"
type
=
"text/x-kendo-template"
>
<
button
id
=
"saveHomePageBtn"
class
=
"k-button k-primary"
>Save</
button
>
</
script
>
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<
script
type
=
"text/x-kendo-tmpl"
id
=
"template"
>
<
a
class
=
"product CB"
href
=
"/de/Details/#:SEOLink#"
>
<
div
class
=
"H160 C"
>
#if (IsIMG == '1') { #
<
img
src
=
"https://xxxxx.com/img/#:SEOLink#-150.jpg"
alt
=
"#:SEOLink#"
/>
# } #
#if (IsIMG == '0') { #
<
div
class
=
"fxacce H160"
><
p
>No Image Available</
p
></
div
>
# } #
</
div
>
<
hr
class
=
"HRGld0"
/>
</
a
>
</
script
>
@(Html.Kendo().ListView<
TEST.Pages.Movies.BluRayModel
>()
.Name("listView")
.TagName("div")
.HtmlAttributes(new { style = "border: none;" })
.DataSource(dataSource => dataSource
.Ajax()
.Read(r => r.Url(Model.GetRead).Data("forgeryToken"))
.PageSize(30)
)
.ClientTemplateId("template")
.Pageable()
)
<
script
>
function forgeryToken() {
return kendo.antiForgeryTokens();
}
</
script
>
Standard List View, nothing special. In the template, there is an "a href" link which redirects the user to a details page for the item.
The user clicks on the item, which redirects them to the details page, this works well.
The problem is when the click the "back" button on the browser to get back to the list view, the paging starts at page 1 and not the page they were looking at (example: page 5)
How can I retain the current page value? I guess I need somehow to fetch the current page the user is looking at, and then store it in a session variable. Thanks for the guidance.
Hello,
I've followed the example found here: https://demos.telerik.com/aspnet-core/grid/remote-data-binding to create a grid that is bound to remote data. Everything works great. However, my IT security team has run the Rapid7 Appspider security scan on my web application and all that comes up is "vulnerabilities" related to the scanner sending bogus values for the filter, sort, and group parameters to the Grid controller. Here's an example:
Attack type: Buffer Overflow string of 100 characters
Basically it's sending a string of 100+ characters as a value to the "filter" parameter.
https://mysite.com/Grid/Orders_Read?filter=100characterlongstring
In other cases, it's sending potential harmful strings such as ./*][ and %s%f%d%x. The Grid seems to handle it by returning an error, but they may force me to handle/validate these parameters. The problem is I don't see where/how I can do that? Can you please shine some light on how I can prevent these "vulnerabilities"?
Thanks
I have 2 dopdowntree's with checkboxes on my page. They are basically cascading, depending on what they choose in #1 it will fill the 2nd one with specific options.
When the user clears all selections from the 1st one I want to clear out everything in the 2nd and reload its data with the default options.
All I'm doing in my code when they clear everything from #1 is this
var secondDDT = $("#ddt2").data("kendoDropDownTree");
secondDDT.dataSource.read();
secondDDT.value([]);
What happens is that it does indeed reload the data in #2, and if I open the dropdowntree, there is nothing checked in the control, so it has cleared the checked items. The issue is that the items are still showing up in the multiselect view of the control (see attached)
Additionally, the items that are still displaying in the multiselect view of the control are now 'frozen', you cannot manually delete them from the dropdowntree with the little 'x'. When you look at the html you can see how all the nodes have unselectable="on". Also you can see the select tag witht eh options in it. I tried clearing that manually in script but it made no different. What's going on here and how do I fix it?
<
div
class
=
"k-multiselect-wrap k-floatwrap"
unselectable
=
"on"
>
<
ul
role
=
"listbox"
unselectable
=
"on"
data-template
=
"tagTemplate"
data-bind
=
"source: tags"
class
=
"k-reset"
id
=
"3c0fe359-03e8-467f-b301-838dd5d7cd37_tagList"
data-stop
=
"true"
>
<
li
class
=
"k-button "
unselectable
=
"on"
role
=
"option"
>
<
span
unselectable
=
"on"
>DummyItem1</
span
>
<
span
title
=
"delete"
aria-label
=
"delete"
class
=
"k-select"
>
<
span
class
=
"k-icon k-i-close"
></
span
>
</
span
>
</
li
>
<
li
class
=
"k-button "
unselectable
=
"on"
role
=
"option"
>
<
span
unselectable
=
"on"
>DummyItem3</
span
>
<
span
title
=
"delete"
aria-label
=
"delete"
class
=
"k-select"
>
<
span
class
=
"k-icon k-i-close"
></
span
>
</
span
>
</
li
>
<
li
class
=
"k-button "
unselectable
=
"on"
role
=
"option"
>
<
span
unselectable
=
"on"
>DummyItem5</
span
>
<
span
title
=
"delete"
aria-label
=
"delete"
class
=
"k-select"
>
<
span
class
=
"k-icon k-i-close"
></
span
>
</
span
>
</
li
>
</
ul
>
<
span
unselectable
=
"on"
class
=
"k-input k-readonly"
style
=
"display: none;"
></
span
>
<
span
unselectable
=
"on"
class
=
"k-icon k-clear-value k-i-close k-hidden"
title
=
"clear"
role
=
"button"
tabindex
=
"-1"
></
span
>
</
div
>
<
select
id
=
"ddt2"
multiple
=
"multiple"
name
=
"ddt2"
style
=
"width: 100%; display: none;"
data-role
=
"dropdowntree"
>
<
option
value
=
"31"
selected
=
""
>DummyItem1</
option
>
<
option
value
=
"29"
selected
=
""
>DummyItem3</
option
>
<
option
value
=
"33"
selected
=
""
>DummyItem5</
option
>
</
select
>
Currently i can't find an option for radiobuttons like the one for other editors :
i.e. : .Editor(e =>
{
e.NumericTextBox();
});
});
What is the best way to add radiobuttons in the form since the form component doesn't seem supporting the radiobutton standard?
I am using MultiSelect Control in the EditItemTemplate for a Grid Column. The MultiSelect control was in the Partial view.
I had 2 issues here.
1. I am not able to make MultiSelect Column as Required Field. Kendo Validation is not firing when I make changes to this control, and is working for remaining all edit controls. As the model for this field is ICollection, Required DataAnnotation is not working and when I wrote custom validation in Model Class and use as Data Annotation, it is showing as Kendo Alert and losing the changes made to the Editor. How can I show it as Required field? (It should display like in the attachment).
the below code is not firing for multiselect
(function ($, kendo) {
//Extending the build in validator
$.extend(true, kendo.ui.validator, {
rules: {
2. Based on the value of this MultiSelect control I need to Enable/Disable one of the other control(checkbox) in Grid. How can I access the value of detect the MultiSelect value change event?
.
<
p
>Columns(columns =><
br
>
{<
br
>
<
br
>
columns.Bound(p => p.Type).EditorTemplateName("TypeEditor").ClientTemplate("#= data.TypeText #");<
br
>
columns.Bound(p => p.Something);<
br
>
columns.Bound(p => p.Something else);<
br
>
columns.Command(command =><
br
>
{<
br
>
command.Edit();<
br
>
command.Custom("Delete").Click("delete_click");<
br
>
});<
br
>
})</
p
> <
p
>This is my grid, there is an edit inline section to it, what I want, when the grid is in edit mode, and the type is set to a certain value, the checkboxes of the other two columns become disabled/ uneditable change the type, they become editable again, <
br
>
How do I do this? </
p
>
I am trying to style a numeric text box with bootstrap 4's form-control-sm. This is the code:
@(Html.Kendo().NumericTextBox<decimal>()
.Name("FundedAmount")
.Format("c")
.Min(0)
.HtmlAttributes(new { style = "width: 100%", @class = "form-control form-control-sm"})
)
When I've used this control without the '-sm' it works fine even if I leave off the 'form-control' class. When I add the classes as shown above what I get is in the attached image. Looks like one of the inputs is correctly sized and the other isn't. Also the font size is the regular size rather than the .875em that the '-sm' gives. I found some random things online but haven't had any luck getting it to format correctly.
Any ideas how to style this to match the regular bootstrap 4 'form-control-sm' sizing ?
Hi All.
Kind of confused about where to go for this. Is it possible in the current Asp.net Core product offering? I've seen demos oriented around the other product packages, but not for Asp.net Core.
Thanks much.
-K
I have a grid where I am trying to allow users to Update a Boolean value with a dropdown list. The grid displays correctly, and when I change the value of the dropdown list and click Update, the grid displays the correct value. All the other fields are updated to the new values and sent through to the controller correctly, but the new value set by the custom editor is still the old value.
<
script
>
function GridBooleanEditor(container, options) {
$('<
input
required
name
=
"' + options.field + '"
/>')
.appendTo(container)
.kendoDropDownList({
dataSource: {
data: [
{ text: "True", value: true },
{ text: "False", value: false }
]
},
dataTextField: "text",
dataValueField: "value",
valuePrimitive: true
});
}
function ClassificationSchemeEnabledTemplate(data) {
var iconClass = data.IsVisible ? 'k-i-check' : 'k-i-close';
return '<
span
class
=
"k-icon ' + iconClass + '"
></
span
>';
}
</
script
>
<
kendo-datasource
name
=
"schemeDataSource"
type
=
"DataSourceTagHelperType.Ajax"
page-size
=
"20"
server-operation
=
"true"
on-error
=
"DataSourceError"
>
<
transport
>
<
read
url
=
"@Url.ActionLink("
_ReadSchemes", "ControlPanel")"
type
=
"POST"
/>
<
update
url
=
"@Url.Action("
_UpdateScheme", "ControlPanel")"
type
=
"POST"
/>
</
transport
>
<
schema
>
<
model
id
=
"FolderID"
>
<
fields
>
<
field
name
=
"FolderID"
type
=
"number"
></
field
>
<
field
name
=
"Name"
type
=
"string"
></
field
>
<
field
name
=
"Description"
type
=
"string"
></
field
>
<
field
name
=
"IsVisible"
type
=
"boolean"
></
field
>
</
fields
>
</
model
>
</
schema
>
</
kendo-datasource
>
<
kendo-grid
name
=
"schemegrid"
datasource-id
=
"schemeDataSource"
style
=
"height:100%;"
>
<
editable
mode
=
"inline"
enabled
=
"true"
/>
<
sortable
enabled
=
"true"
/>
<
pageable
button-count
=
"5"
refresh
=
"true"
page-sizes
=
"new int[] { 5, 10, 20 }"
>
</
pageable
>
<
columns
>
<
column
field
=
"FolderID"
title
=
"Folder ID"
hidden
=
"true"
></
column
>
<
column
field
=
"Name"
title
=
"Name"
></
column
>
<
column
field
=
"Description"
title
=
"Description"
></
column
>
<
column
field
=
"IsVisible"
title
=
"Enabled"
editor
=
"GridBooleanEditor"
template
=
"#=ClassificationSchemeEnabledTemplate(data)#"
></
column
>
<
column
>
<
commands
>
<
column-command
name
=
"edit"
></
column-command
>
</
commands
>
</
column
>
</
columns
>
</
kendo-grid
>