I'm using the bootstrap theme, although I am not using Bootstrap itself. My form fields and buttons, such as on the Kendo menu and panel bar, when selected have a blue glowing halo around it. I was able to modify it for the inputs with
input:focus
{
outline
:
thin
dotted
;
/*outline: 5px auto -webkit-focus-ring-color;*/
outline
:
2px
auto
#fe9827
;
outline-offset:
-2px
;
}
but this doesn't alter the color (which is what I really want) for the Kendo menu and panelbar. How can I accomplish that please?
Dear All,
I have a treeview & listview in different spliter panes.
I successfully retrieved the tree-view data, what I want now is to display the related items of the selected tree-view node.
here is what I have so far:
@(Html.Kendo().Splitter()
.Name(
"RefFilesSplitter"
)
.HtmlAttributes(
new
{ @style =
"height:100%;"
})
.Panes(panes =>
{
panes.Add()
.Size(
"310px"
)
.Collapsible(
true
)
.Content(
@<div id=
"RefFiles"
>
@(Html.Kendo().TreeView()
.Name(
"TVtoc"
)
.HtmlAttributes(
new
{ @style =
"height:100%;width:100%"
})
.DragAndDrop(
true
)
.DataTextField(
"Name"
)
.DataSource
(dataSource => dataSource
.Read(read => read.Action(
"GetGroups"
,
"TreeOfAccounts"
))
.Model(m => m.Id(
"GroupId"
))
.Events(e => { e.RequestEnd(
"requestEndHandler"
); })
)
.Events(e => e.Select(
"onSelect"
))
)
</div>);
panes.Add()
.Content(
@<div id=
"RefFilesContent"
>
@(Html.Kendo().ListView<IdeaGL.Models.IGL_account>()
.Name(
"LVAccounts"
)
.HtmlAttributes(
new
{ @style =
"height:100%;width:100%"
})
.ClientTemplateId(
"template"
)
.TagName(
"div"
)
.DataSource
(dataSource => dataSource
.Read(read => read.Action(
"GetAccounts"
,
"TreeOfAccounts"
,
new
{groupid=Model.GroupId}))
.Model(m => m.Id(
"account_id"
))
)
.Pageable()
)
</div>);
})
)
and here is the JavaScript OnSelect:
function
onSelect(e)
{
// this doesn''t work ...
$(
"#LVAccounts"
).data(
"kendoListView"
).dataSource.read();
$(
"#LVAccounts"
).data(
"kendoListView"
).refresh();
var
data = $(
'#TVtoc'
).data(
'kendoTreeView'
).dataItem(e.node);
$.ajax({
url:
"/TreeOfAccounts/GetAccounts?groupid="
+ data.id
}).success(
function
()
{
// what should i do here !!
})
}
I can see how to make the listview refresh the data for the selected treeview node.
any help ?
Hello,
Does anyone know if it's possible to set the popup editor window position?
I thought I could do something like:
$(".k-window").css('top', '35px');
in the Scheduler's Edit event. (This works in for the Grid btw).
Thanks in advace,
Paul
Dear All,
I have just downloaded the asp.net MVC product.
I started with the validation using DataAnnotation attributes, which works fine for client-side validation on the UI.
I then searched for implementation of server-side validation attribute for DataAnnotation where I found the [Remote] attribute that allow to call methods on the controller, looks pretty good.
I started with the following at the Controller:
public
JsonResult IsValidName(
string
coin_name_2)
{
bool
found = db.IGL_coin.Any(name => name.coin_name_2 == coin_name_2);
if
(!found)
{
return
Json(
true
, JsonRequestBehavior.AllowGet);
}
return
Json(
false
, JsonRequestBehavior.AllowGet);
}
Then I decorate my model (IGL_coin) with MetaData class that holds the validation as follows:
// Metadata defenitions
public
class
CoinMetadata
{
public
int
coin_id {
get
;
set
; }
public
string
coin_name_1 {
get
;
set
; }
[Required(ErrorMessageResourceType =
typeof
(Errors), ErrorMessageResourceName =
"NameReq"
)]
[Display(Name =
"CoinName"
, ResourceType =
typeof
(ScreenRes))]
[Remote(
"IsValidName"
,
"Coin"
, ErrorMessageResourceType =
typeof
(Errors), ErrorMessageResourceName =
"NameDuplicate"
)]
public
string
coin_name_2 {
get
;
set
; }
[Display(Name =
"Rate"
, ResourceType =
typeof
(ScreenRes))]
[Required(ErrorMessageResourceType =
typeof
(Errors), ErrorMessageResourceName =
"RateReq"
)]
[Range(0.00001,100000, ErrorMessageResourceType=
typeof
(Errors), ErrorMessageResourceName=
"RateInvalid"
)]
public
decimal
coin_rate {
get
;
set
; }
}
// Partial Classes defenitions
[MetadataType(
typeof
(CoinMetadata))]
public
partial
class
IGL_coin
{}
Then my CoinCustomEditor partial view has the following markup to show the details:
<
div
style
=
"margin: 5px 15px 5px 15px; height: auto; width: 350px"
>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.coin_id)
@Html.ValidationSummary()
<
ul
id
=
"fieldlist"
>
<
li
>
@Html.LabelFor(model => model.coin_name_2)
@Html.TextBoxFor(model => model.coin_name_2)
@*@Html.Kendo().MaskedTextBoxFor(model => model.coin_name_2).Name("coin_name_2").HtmlAttributes(new { style = "width: 100%;" })*@
@Html.ValidationMessageFor(model => model.coin_name_2)
</
li
>
<
li
>
@Html.LabelFor(model => model.coin_rate)
@Html.Kendo().TextBoxFor(model => model.coin_rate).Name("coin_rate").HtmlAttributes(new { style = "width: 100%;" })
@Html.ValidationMessageFor(model => model.coin_rate)
</
li
>
</
ul
>
}
</
div
>
@Scripts.Render("~/bundles/jqueryval")
This partial view is called from the add/edit action on the grid using GridEditMode.PopUp and .TemplateName("CoinCustomEditor")).
The problem is that the remote attribute calls the method IsValidName correctly as shown by fiddler (see attached file).
The result in the Partial view shows the red border around the TextBoxFor but the error message is not shown.
Just in case this is the jqueryval scripts loaded by partial : @Scripts.Render("~/bundles/jqueryval"), which are defined at the _Layout as follows:
<
head
>
<
title
>@ViewBag.Title - My App</
title
>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
@Styles.Render("~/Content/kendo/css")
<
link
href
=
"@Url.Content("
~/Content/kendo/kendo.common.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/kendo.mobile.all.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/kendo.dataviz.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/kendo.default.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/kendo.dataviz.default.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/kendo.rtl.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/jquery.min.js")"></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/angular.min.js")"></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/jszip.min.js")"></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/kendo.all.min.js")"></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/kendo.aspnetmvc.min.js")"></
script
>
</
head
>
and also the BundleConfig definitions:
public
class
BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public
static
void
RegisterBundles(BundleCollection bundles)
{
bundles.Add(
new
ScriptBundle(
"~/bundles/jquery"
).Include(
"~/Scripts/jquery-{version}.js"
));
//bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));
bundles.Add(
new
ScriptBundle(
"~/bundles/jqueryval"
).Include(
"~/Scripts/jquery.validate.min.js"
,
"~/Scripts/jquery.validate.unobtrusive.js"
));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(
new
ScriptBundle(
"~/bundles/modernizr"
).Include(
"~/Scripts/modernizr-*"
));
bundles.Add(
new
ScriptBundle(
"~/bundles/bootstrap"
).Include(
"~/Scripts/bootstrap.js"
,
"~/Scripts/respond.js"
));
//bundles.Add(new StyleBundle("~/Content/css").Include(
// "~/Content/bootstrap.css",
// "~/Content/Site.css"));
bundles.Add(
new
ScriptBundle(
"~/bundles/kendo"
).Include(
"~/Scripts/kendo/2016.2.504/kendo.all.min.js"
,
// "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
"~/Scripts/kendo/2016.2.504/kendo.aspnetmvc.min.js"
));
//bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
// "~/Content/kendo/2016.2.504/kendo.common-bootstrap.min.css",
// "~/Content/kendo/2016.2.504/kendo.bootstrap.min.css"));
bundles.IgnoreList.Clear();
bundles.Add(
new
StyleBundle(
"~/Content/kendo/css"
).Include(
"~/Content/kendo/2016.2.504/kendo.common.min.css"
,
"~/Content/kendo/2016.2.504/kendo.default.min.css"
));
}
}
I hope to find some help, as server-side validation is crucial to go further.
Best
I have a grid with the export to excel functionality turned on:
@(Html.Kendo().Grid<
IncompleteCOATests
>()
.Name("IncompleteCOATestsGrid")
.HtmlAttributes(new { style = "width: 980px" })
.Columns(columns =>
{
columns.Bound(c => c.UnitId).Title("Unit Id");
columns.Bound(c => c.ParentId).Title("Parent Id");
columns.Bound(c => c.Qparam).Title("QParam");
columns.Bound(c => c.TestAlias).Title("Test Name");
})
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Missing Tests.xls")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
.NoRecords(x => x.Template(@ResourceMessages.NoRecordFoundForConsignee))
.AutoBind(false)
.Pageable(pageable => pageable
.Enabled(false)
.Refresh(true)
.PageSizes(false))
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("GlobalModule.onError"))
.Read(read => read.Url(Url.HttpRouteUrl("ActionApi", new { controller = "PoPsApi", action = "GetIncompleteCOATests" })).Type(HttpVerbs.Get).Data("IncompleteCoAsModule.getLoadOrderItem")))
)
It databinds on a client-side button press
export function showMissingTests(e) {
$('#IncompleteCOATestsGrid').data("kendoGrid").dataSource.read();
}
Is it possible to set the excel.Filename property client side?
When/how in the page lifecyle would I do that?
I have implemented a MVC controller which returns data. However that data is not getting bound to the kendo MVC grid. On further inspection, I have noticed is that the action method defined in the kendo grid isn't getting called.
When I check the developer tools I can see the following errors
Team:78 Uncaught ReferenceError: kendo is not defined
at Team:78
glyphicons-halflings-regular.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)
glyphicons-halflings-regular.woff Failed to load resource: the server responded with a status of 404 (Not Found)
<
p
> </
p
><
div
class
=
"reCodeBlock"
style
=
"border:solid 1px #7f9db9;width:10;height:10;overflow-y:auto;"
><
div
style
=
" background-color: #fff;"
><
span
style
=
" "
><
span
style
=
" margin-left: 0px !important;"
><
code
style
=
"color: #000;"
>@(Html.Kendo().Grid<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>CC.GRP.MCRequest.Models.TeamIn</
code
><
code
style
=
"color: #000;"
>>()<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Name("GridTeam")<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Columns(columns =><</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> {<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> columns.Bound(o => o.TeamID).Groupable(false);<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> columns.Bound(o => o.CountryCode);<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> columns.Bound(o => o.TeamName);<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> columns.Bound(o => o.TeamDescription);<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> })<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Pageable()<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Sortable()<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Filterable()<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Scrollable()<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Groupable()<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .DataSource(dataSource => dataSource<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Ajax()<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> .Read(read => read.Action("Team_Read", "Admin"))<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> )<</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>><</
code
><
code
style
=
"color: #069;font-weight: bold;"
>br</
code
><
code
style
=
"color: #000;"
>> )</
code
></
span
></
span
></
div
></
div
>
So according to the information on the Dialog demo page (http://demos.telerik.com/aspnet-mvc/dialog/index) there are:
But of course, it's not documented on the demo page. So how do I call one of the pre-built dialogs, and secondly how can I change the style of it without mucking up every other style I've overridden for the telerik components?
Hello!
In our application, the combo boxes are working good every time an item is selected by mouse. But, when selecting items by touch (Chrome browser on Windows 10), if the combo uses filter and has less than 4 values, the selected item is sometimes seen as null. This happens sometimes also on this demo: http://demos.telerik.com/aspnet-mvc/combobox/index (but not every time).
Is this a bug, or is there a solution to solve the problem?
Thank you,
Iuliana Maria Candea
So far all of the Telerik components I've used thus far have been fairly simple. Irritating to get it to look the way I want, but when it comes to binding to data, it's been pretty simple.
But this is my first time in using the PanelBar, and I'm confused beyond all belief. I have a database with Topic information such as Title, Description, Created by, etc... Some of these are marked as Active, and others are marked as In-Active. I'd like the panel bar to have two panels, one each for Active and In-Active, and upon opening each of them, display a list of Titles for the appropriate type.
So I have a controller action returning an IEnumerable<Topic> and tried using the DataSource Read action, but they just all get listed in the panel bar. I've tried coding two separate panels, and trying LoadContentFrom, but this is showing my topic information as JSON, and they're all grouped together.
I've seen examples using Model Binding, but I'm not passing the data in as a Model.
So how in the holy heck do I get this thing to do what I want it to do?
My class is pretty simple:
public
class
TopicBank
{
public
TopicBank();
public
bool
Active {
get
;
set
; }
public
string
CreatedBy {
get
;
set
; }
public
DateTime CreatedOn {
get
;
set
; }
public
string
Description {
get
;
set
; }
public
string
FormData {
get
;
set
; }
public
Guid ID {
get
;
set
; }
public
DateTime LastModified {
get
;
set
; }
public
string
LastModifiedBy {
get
;
set
; }
public
string
Title {
get
;
set
; }
}
And my controller is even more simple:
[HttpGet]
[ActionName(
"GetTopicList"
)]
public
ActionResult GetTopicList()
{
var hold = WebApiHelper.CallGetAPI<List<TopicBank>>($
"{_baseURL}api/Transcend/GetTopicList"
);
return
Json(hold, JsonRequestBehavior.AllowGet);
}
What do I need to do to get this thing to display how I want it to?
I'm trying to add a new view/controller using the Kendo UI Grid Scaffolding.
I am able to set the controller name, and select an existing model and view model; however, the drop down for the 'Data Context Class' is empty.
How do I specify a data context class? I'm using Nhibernate as an ORM.