Questions on UI for ASP.NET MVC Forum

1 answer

107 views

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.

Grid

answered on 27 Feb 2017

1 answer

4.0K+ views

Type arguments for method cannot be inferred from the usage

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

Chart

answered on 27 Feb 2017

4 answers

191 views

MVC Grid Wrapper with Popup Editing and Dropdown

Could someone provide or point me to a working example of how to popup add and edit a grid item that also contains a foreign key.
e.g.

ProductType:
ID
Name

Product:
ProductID
ProductName
ProductType

Product            Product Type
Peas                Vegetable
Melon               Fruit

Grid

answered on 27 Feb 2017

4 answers

460 views

How to hide Recurrence section of custom editor

I've incorporated a custom editor by using a project found on a forum post. I needed to add custom controls. When you don't use a custom editor the built in editor hides the recurrence section when you select Edit Current Occurrence. How can determine if the user selected Edit Current Occurrence so I can hide the recurrence section?

Here is my template:

@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;

}

Scheduler

answered on 27 Feb 2017

2 answers

298 views

Formatting Bar Chart legend to short date

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>

Regards,

Shawn

Chart

answered on 24 Feb 2017

3 answers

547 views

expandPath triggers Expand event of TreeView after Read

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?

TreeView

answered on 24 Feb 2017

3 answers

614 views

Get aggregates result in ClientTemplate

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

Grid

answered on 24 Feb 2017

3 answers

642 views

Example of Window with toolbar or footer?

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 class="panel-footer">

<button id="btnSave" class="btn btn-primary" type="submit">Save</button>

</div>

}

Are there any examples of windows with a toolbar or footer that contains buttons?

Window

answered on 24 Feb 2017

1 answer

321 views

ClientTemplate column doesn't work when grid is ClientDetailTemplate

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.

Grid

answered on 24 Feb 2017

2 answers

99 views

Some of web font icons are unavailable

I have a button like that

I choose icons from the link: http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web.

When I use redo, funnel, It is okay there is no problem but I try to use "arrow-60-right" (is also from the list which can be found in the above link), "arrow-chevron-up" is coming instead of "arrow-60-right".

Is there anyone who knows why it is happening?

Button

answered on 24 Feb 2017