I have a grid that I am editing InCell. When I use the tab to navigate to the next cell it retains entered data and refocuses on the next cell as expected. But, If I enter data in a cell and then click into another cell the data I entered is not retained and I don't get the warning message that the data was required. I also have an issue where if I click off the cell with an active required warning it hangs up sometimes and won't refocus on the cell if I click on it. I can get around this sometimes by tabbing twice which refocus on the cell with the warning. Also, if I return to a cell to edit the contents the curser is positioned before the first character and I have to use the arrow keys to reposition within the text to make corrections. I can't just click into the text to the position where I want to edit. Is this how it is supposed to work? I have used IE, Firefox, and Chrome and it works the same way regardless of the browser. Any help would be greatly appreciated.
Operating System - Windows 7 64bit
.Net framework - Version 4.5.1
Visual Studio version - Visual Studio 2015
Preferred Language - C Sharp
MVC Version - MVC 5
View Engine - Razor
Version - 2016.3.1118
Product - Kendo UI Grid for ASP.NET MVC
JQuery - 2.2.0 as advised under ticket ID 1069790
I'm trying to use a grid with an existing db table that can't be altered.
There's no key, just a CAR_CD and CAR_DESC, both defined as strings.
In my datasource, when I don't specify a model.Id (like below), I get an error "There is no DataSource Model Id property specified." in the Visual Studio debugger. It's looking for an Id.
.DataSource(dataSource =>
dataSource.Ajax()
.PageSize(50)
.Batch(true) // Enable batch updates
.Model(model =>
{
model.Field(car => car.CAR_CD).Editable(true);
model.Field(car => lob.CAR_DESC).Editable(true);
})
SO... I change the CAR_CD to an Id (see below) and then get "CS1660: Cannot convert lambda expression to type 'string' because it is not a delegate type".
{
model.Id(car => car.CAR_CD).Editable(true);
model.Field(car => lob.CAR_DESC).Editable(true);
})
Is there an easy way to use a natural key (CAR_CD + CAR_DESC)? I can test them for uniqueness in the .net code, but I need to get the grid to function.
Thanks.
I am trying to create a line chart binding to grouped data, but when I use the code below I get a "CS0411: The type arguments for method 'Kendo.Mvc.UI.Fluent.DataSourceGroupDescriptorFactory<object>.Add<TValue>(System.Linq.Expressions.Expression<System.Func<object,TValue>>)' cannot be inferred from the usage. Try specifying the type arguments explicitly." error when I run it and in Visual Studio it underlines the ".Add" for group.Add and all the property names of the model (see attached screenshot).
Any ideas why?
View:
@model IEnumerable<
IntegrationLoader.Models.Application
>
@(Html.Kendo().Chart()
.Name("chart")
.Title("Fatal Exceptions In Last 10 Days")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
)
.DataSource(dataSource => dataSource
.Read(read => read.Action("AppCounts_Read", "LogEntries"))
.Group(group => group.Add(model => model.Name))
.Sort(sort => sort.Add(model => model.Day).Ascending())
)
.Series(series =>
{
series.Line(model => model.FatalCount)
.Name("#= group.value # (Count)");
})
.CategoryAxis(axis => axis
.Categories(model => model.Day)
.Labels(labels => labels.Format("yyyyMMdd"))
)
.ValueAxis(axis => axis
.Numeric().Labels(labels => labels.Format("{0}"))
.Line(line => line.Visible(false))
.AxisCrossingValue(-10)
.Title("Errors")
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
Thanks,
Bill
@model GIS.Services.Pulse.Types.Models.TaskAsset
@{
//required in order to render validation attributes
ViewContext.FormContext = new FormContext();
}
@functions{
public Dictionary<
string
, object> generateDatePickerAttributes(
string elementId,
string fieldName,
string dataBindAttribute,
Dictionary<
string
, object> additionalAttributes = null)
{
Dictionary<
string
, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<
string
, object>(additionalAttributes) : new Dictionary<
string
, object>();
datePickerAttributes["id"] = elementId;
datePickerAttributes["name"] = fieldName;
datePickerAttributes["data-bind"] = dataBindAttribute;
datePickerAttributes["required"] = "required";
datePickerAttributes["style"] = "z-index: inherit;";
return datePickerAttributes;
}
}
<
div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.Title))
</
div
>
<
div
data-container-for
=
"Title"
class
=
"k-edit-field"
>
@(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
</
div
>
<
div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.Start))
</
div
>
<
div
data-container-for
=
"Start"
class
=
"k-edit-field"
>
@(Html.Kendo().DateTimePickerFor(model => model.Start)
.HtmlAttributes(generateDatePickerAttributes(
"startDateTime",
"start",
"value:start,invisible:isAllDay")))
@(Html.Kendo().DatePickerFor(model => model.Start)
.HtmlAttributes(generateDatePickerAttributes(
"startDate",
"start",
"value:start,visible:isAllDay")))
<
span
data-for
=
"Start"
class
=
"k-invalid-msg"
></
span
>
</
div
>
<
div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.End))
</
div
>
<
div
data-container-for
=
"End"
class
=
"k-edit-field"
>
@(Html.Kendo().DateTimePickerFor(model => model.End)
.HtmlAttributes(generateDatePickerAttributes(
"endDateTime",
"end",
"value:end,invisible:isAllDay",
new Dictionary<
string
, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))
@(Html.Kendo().DatePickerFor(model => model.End)
.HtmlAttributes(generateDatePickerAttributes(
"endDate",
"end",
"value:end,visible:isAllDay",
new Dictionary<
string
, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))
<
span
data-for
=
"End"
class
=
"k-invalid-msg"
></
span
>
</
div
>
<
div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.IsAllDay))
</
div
>
<
div
data-container-for
=
"isAllDay"
class
=
"k-edit-field"
>
<
input
id
=
"is-all-day"
data-bind
=
"checked: isAllDay"
data-val
=
"true"
id
=
"isAllDay"
name
=
"isAllDay"
type
=
"checkbox"
/>
</
div
>
<
div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.RecurrenceRule))
</
div
>
<
div
data-container-for
=
"RecurrenceRule"
class
=
"k-edit-field"
>
@(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
.HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
</
div
>
<
div
class
=
"k-edit-label"
>
@(Html.LabelFor(model => model.Description))
</
div
>
<
div
data-container-for
=
"description"
class
=
"k-edit-field"
>
@(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
</
div
>
<
div
class
=
"k-edit-label"
>
Asset
</
div
>
<
div
data-container-for
=
"AssetID"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.AssetID)
.HtmlAttributes(new { data_bind = "value:AssetID", style = "width: 400px" })
.DataTextField("Name")
.DataValueField("AssetID")
.OptionLabel("Select")
.ValuePrimitive(true)
.DataSource(ds => ds.Read("Assets", "Asset"))
.ToClientTemplate()
)
</
div
>
<
div
class
=
"k-edit-label"
>
Owner
</
div
>
<
div
data-container-for
=
"OwnerID"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.OwnerID)
.HtmlAttributes(new { data_bind = "value:OwnerID", style = "width: 400px" })
.DataTextField("DisplayName")
.DataValueField("UserID")
.OptionLabel("Select")
.ValuePrimitive(true)
.DataSource(ds => ds.Read("Users", "Users"))
.ToClientTemplate()
)
</
div
>
<
div
class
=
"k-edit-label"
>
Work Type
</
div
>
<
div
data-container-for
=
"WorkTypeID"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.WorkTypeID)
.HtmlAttributes(new { data_bind = "value:WorkTypeID", style = "width: 400px" })
.DataTextField("Name")
.DataValueField("WorkTypeID")
.OptionLabel("Select")
.ValuePrimitive(true)
.DataSource(ds => ds.Read("WorkTypes", "MaintenanceSchedule"))
.ToClientTemplate()
)
</
div
>
<
div
class
=
"k-edit-label"
>
Duration Freq
</
div
>
<
div
data-container-for
=
"DurationFreq"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.DurationFreq)
.HtmlAttributes(new { data_bind = "value:DurationFreq", style = "width: 400px" })
.DataTextField("Name")
.DataValueField("ID")
.OptionLabel("Select")
.ValuePrimitive(true)
.DataSource(ds => ds.Read("Frequency", "UnitOfMeasure"))
.ToClientTemplate()
)
</
div
>
<
div
class
=
"k-edit-label"
>
Duration UOM
</
div
>
<
div
data-container-for
=
"DurationUomId"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.DurationUomId)
.HtmlAttributes(new { data_bind = "value:DurationUomId", style = "width: 400px" })
.DataTextField("Name")
.DataValueField("UnitOfMeasureID")
.OptionLabel("Select")
.ValuePrimitive(true)
.DataSource(ds => ds.Read("UnitOfMeasures", "UnitOfMeasure", new { type = 1 }))
.ToClientTemplate()
)
</
div
>
<
div
class
=
"k-edit-label"
>
Grace Period Freq
</
div
>
<
div
data-container-for
=
"GraceFreq"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.GraceFreq)
.HtmlAttributes(new { data_bind = "value:GraceFreq", style = "width: 400px" })
.DataTextField("Name")
.DataValueField("ID")
.OptionLabel("Select")
.ValuePrimitive(true)
.DataSource(ds => ds.Read("Frequency", "UnitOfMeasure"))
.ToClientTemplate()
)
</
div
>
<
div
class
=
"k-edit-label"
>
Grace Period UOM
</
div
>
<
div
data-container-for
=
"GraceUomId"
class
=
"k-edit-field"
>
@(Html.Kendo().DropDownListFor(model => model.GraceUomId)
.HtmlAttributes(new { data_bind = "value:GraceUomId", style = "width: 400px" })
.DataTextField("Name")
.DataValueField("UnitOfMeasureID")
.OptionLabel("Select")
.ValuePrimitive(true)
.DataSource(ds => ds.Read("UnitOfMeasures", "UnitOfMeasure", new { type = 1 }))
.ToClientTemplate()
)
</
div
>
<
div
class
=
"k-edit-label"
>
Color
</
div
>
<
div
data-container-for
=
"Color"
class
=
"k-edit-field"
>
@(Html.Kendo().ColorPicker()
.Name("Color")
.Value("f0d0c9")
.HtmlAttributes(new { data_bind = "value:Color" })
.TileSize(s => s.Width(34).Height(19))
.Palette(new string[] {
"f0d0c9", "e2a293", "d4735e", "65281a",
"eddfda", "dcc0b6", "cba092", "7b4b3a",
"fcecd5", "f9d9ab", "f6c781", "c87d0e",
"e1dca5", "d0c974", "a29a36", "514d1b",
"c6d9f0", "8db3e2", "548dd4", "17365d"
})
)
</
div
>
@{
ViewContext.FormContext = null;
}
I have a Bar Chart using a DateTime as a series group. Everything works as I expected, but the legend values appear as the long UTC format as shown in the attached screenshot. How to I get this to format to a short date (i.e. Thu Feb 16 2017).
<
div
class
=
"panel panel-default"
>
<
div
class
=
"demo-section k-content wide"
>
@(Html.Kendo().Chart<
CBECloudBO2.ViewModels.ChartHourlySales7Day
>()
.Name("chartHourlySales7Days")
.Title("Hourly Sales 7-day Comparitive")
.DataSource(datasource => datasource
.Read(read => read.Action("Chart_HourlySales7Day", "Home"))
.Group(group => group.Add(model => model.SaleDate))
.Sort(sort => sort.Add(model => model.Hour).Ascending())
)
.Legend(legend => legend.Visible(true))
.ChartArea(chartArea => chartArea.Background("transparent"))
.Series(series =>
{
series.Column(model => model.Value).Name("#= group.value #").CategoryField("Hour");
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Title("Store Hour")
.Categories(p => p.Hour)
)
.ValueAxis(axis => axis
.Numeric()
.Title("Sale Totals")
.AxisCrossingValue(0, int.MinValue)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
.Template("#= series.name #: #= value #")
)
)
</
div
>
</
div
>
Regards,
Shawn
Hi,
we are using TreeView with on demand loading of nodes. There is case when we need to select specific node that possibly wasn't loaded yet. So we get all needed IDs and use .expandPath expand one by one parent node of the target node. This was working fine with old 2014 kendo for mvc version. However, after switching to newest 2017.1 we are having a problem.
When .expandPath is called, we expect Expand event is called first - where we set up some values that will be used in reading of data. Then, expand would call reading of data where this prepared values are used. However, with new 2017.1 it always happens that .Data function of Read is called before Expand, which doesn't make sense for me, but could be I'm not understanding how it works.
Here are the code samples.
@(Html.Kendo().TreeView()
.Name(
"treeview"
)
.DataTextField(
"Name"
)
.DataImageUrlField(
"image"
)
.DataSource(dataSource => dataSource
.Read(read => read
.Action(
"GetFolderDefinitionsProjectsAndActs"
,
"ProjectsCrud"
).Data(
"additionalData"
)
)
).Events(events => events
.Expand(
"onExpand"
).Select(
"onNodeSelected"
).DataBound(
"onTreeViewDataBound"
)
)
)
function
additionalData(e) {
return
{
id: startFolderID,
nodeType: expandLevel,
folderDefinitionID: folderDefinitionID
};
}
function
onExpand(ex) {
var
tree = $(
'#treeview'
).data(
'kendoTreeView'
);
var
dataItem = tree.dataItem(ex.node);
expandLevel = dataItem.levelName;
folderDefinitionID = dataItem.FolderDefinitionID;
return
true
;
}
So, at some point we call
var
treeview = $(
"#treeview"
).data(
"kendoTreeView"
);
treeview.expandPath(returnData);
and we would expect function onExpand to be called before additionalData, but instead additionalData is called before onExpand.
Is this expected behavior?
Hi all:
Can I get aggregates result in ClientTemplate?
I tried columns.Bound(c => c.idno).ClientGroupHeaderTemplate("# (Count: #= count#)");
with DataSource(DataSourceResult from MVC Action)
added .Aggregates(aggregates => { aggregates.Add(c => c.idno).Count(); }).Group(g => g.Add(c => c.idno))
The "count" value can be shown in Row.
But I want to create new a column with "count" value in each row,
columns.Bound(c => c.idno).ClientTemplate("#= count#"); and columns.Template(e => { }).ClientTemplate("#= count#");
It will get an error : Uncaught ReferenceError: count is not defined
Is it possibale to get aggregates result in ClientTemplate?
Thanks
I am loading the content of an MVC Window
@(Html.Kendo().Window()
.Name(modalWindowName)
.Visible(false)
.Title("Loading...")
.Modal(true)
.Actions(actions => actions
.Maximize()
.Close()
)
.Scrollable(true)
.Pinned(true)
//.Draggable(true)
.Resizable()
.Animation(false)
.Height(600)
.Width(navbarWindowWidth)
.Events(events => events.Refresh(onWindowRefresh))
)
via url, so I can re-use the window
var navbarWindow = $("#@(modalWindowName)");
var navbarWindowData = navbarWindow.data("kendoWindow");
var navbarWindowURL = "@Html.Raw(@Url.Action("actionName", "controllerName")
navbarWindowData.refresh({
url: navbarWindowURL
}).center();
But, I'm having trouble coming up with a way to put a toolbar or group of buttons in a footer at the bottom of the window.
Below is a brief example of what the view from the URL (navbarWindowURL) will look like. You can I created a panel with a footer and such, but if the body of the panel is very large I have to scroll through the window to get to the footer, which is not a very pleasing UI for the end-user. Is there some way I can create a footer that will always stick to the bottom of the window or something so the end-user can always see the button? It also has to be able to re-adjust if the size of the window changes.
@using (Ajax.BeginForm("Update", "Settings", FormMethod.Post,
new AjaxOptions
{
HttpMethod = "POST",
OnBegin = "saving();",
OnSuccess = "saved();",
OnFailure = "failed();",
}
))
{
<
div
class
=
"panel panel-default"
>
<
div
class
=
"panel-heading"
>
<
div
class
=
"row"
id
=
"settingsResults"
></
div
>
</
div
>
<
div
class
=
"panel-body"
>
<
div
>
@(Html.EditorFor(m => Model.Settings))
</
div
>
</
div
>
<
div
class
=
"panel-footer"
>
<
button
id
=
"btnSave"
class
=
"btn btn-primary"
type
=
"submit"
>Save</
button
>
</
div
>
</
div
>
}
Are there any examples of windows with a toolbar or footer that contains buttons?
Hello,
we use Kendo MVC Grid to display some documents. We have column for actions on document with dropdown of actions. Code of the column looks like this:
columns.Bound(p => p.ID).ClientTemplate(Html.Kendo().DropDownList().DataTextField("Text")
.Events(e => e.Change("actionsDDLChange").Open("actionsDDLDataBound"))
.HtmlAttributes(new { docID = "\\#=ID\\#", @lock = "\\#=Lock\\#", documentName = "\\#=DocumentName\\#", lockedBy = "\\#=ChangedBy\\#" })
.DataValueField("Value").Name("ddl\\#=ID\\#").BindTo(ViewBag.DocActionsDDL)
.ToClientTemplate().ToString()).Title("Actions").HtmlAttributes(new { @class = "templateCell" }).Sortable(false).Filterable(false);
Everything works fine in normal Grid. Then we tried to use the same code to be ClientDetailTemplate of another Grid and it doesn't work. We had to change this column to be like:
columns.Bound(p => p.ID).ClientTemplate("<
button
class=\"k-button\" >Download</
button
>"
This is just part of new code with buttons for other actions following. In other words, we had to lose .DropDownList approach. We get "Script error" in appgui.js if we try dropdown approach.
Is there a way to make this work with .DropDownList as tempalte for column, because we want this grid to look the same? We will probably want to reuse it as ClientDetailTemplate in other grids as well, or have Tab control as ClientDetailTemplate with this grid for documents in one of tabs, so we would use it as partial view. But we want to solve this problem first and we are out of ideas.