Questions on UI for ASP.NET Core Forum

2 answers

137 views

Results not being displayed in cascading MultiSelectComboBox in Grid

I have a grid:

@(Html.Kendo().Grid(Model.Lines)

.Name("lines")

.Columns(columns =>

{

columns.Bound(p => p.Item).ClientTemplate("#= (Item.Name) ? Item.Name : '' #");

columns.Command(command => command.Destroy());

})

.ToolBar(tools =>

{

tools.Excel();

tools.Pdf();

tools.Save().HtmlAttributes(new { style = "float:right" });

tools.Create().HtmlAttributes(new { style = "float:right" });

})

.AllowCopy(true)

.Excel(excel => excel.FileName("LinesExport.xlsx"))

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Navigatable()

.Sortable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(i => i.Id);

model.Field(i => i.Id).Editable(false);

model.Field(i => i.ItemId).Editable(false);

model.Field(i => i.Item).Editable(true).DefaultValue(new Item { ItemId = "", ItemGroup = "", Name = "", SearchName = "" });

})

.Batch(true)

.ServerOperation(false)

)

with a custom editor on a field:

@model Item

@(Html.Kendo().MultiColumnComboBoxFor(m => m)

.Placeholder("Select item")

.DataTextField("Name")

.DataValueField("ItemId")

.Columns(columns =>

{

columns.Add().Field("ItemId").Title("Item Number").Width("180px");

columns.Add().Field("Name").Title("Name").Width("180px");

columns.Add().Field("SearchName").Title("Search Name").Width("180px");

columns.Add().Field("ItemGroup").Title("Item Group").Width("180px");

})

.Filter(FilterType.Contains)

.FooterTemplate("Total #: instance.dataSource.total() # items found")

.Height(400)

//.Events(events => events.Change("onComboBoxChange"))

.DataSource(source => source

.Read(read =>

{

read.Action("GetItems", "Home").Data("getItemsData");

})

.ServerFiltering(false)

)

.CascadeFrom("CustomerId")

)

The custom editor displays correctly for the Item field. When Customer changes (happens elsewhere) it is cascading properly and the read action is getting called. The read action is returning results (can see this by inspecting the result in the RequestEnd event) but no results are actually displayed in the MultiColumnComboBox. I have another MultiColumnComboBox elsewhere on the page that is not in the grid that cascades from the same value and does an almost identical lookup and it works fine.

What am I missing here? or is this a bug and if so how do I work around it?

General Discussions

answered on 27 Mar 2019

4 answers

148 views

Multi-gauge problem

Hi, I have a problem displaying multiple needles with the radial gauge.

I have a radialGauge defined as such:

@(Html.Kendo().RadialGauge().Name("MultiGauge")

.Pointers(pointers =>

{

pointers.Add().Color("#c20000").Length(0.5).Cap(c => c.Size(0.15));

pointers.Add().Color("#ff7a00").Length(0.75).Cap(c => c.Size(0.1));

pointers.Add().Color("#ff7a22").Length(0.75).Cap(c => c.Size(0.1));

pointers.Add().Color("#ff1100").Length(0.75).Cap(c => c.Size(0.1));

})

.Scale(scale => scale

.MinorUnit(5)

.StartAngle(-60)

.EndAngle(240)

.Max(100)

.Labels(labels => labels

.Position(GaugeRadialScaleLabelsPosition.Inside)

)

.Ranges(ranges =>

{

ranges.Add().From(0).To(20).Color("#3bd11d");

ranges.Add().From(20).To(40).Color("#ffc700");

ranges.Add().From(40).To(60).Color("#ff7a00");

ranges.Add().From(60).To(100).Color("#c20000");

})

)

Then some js to set the values:

<script>

$(document).ready(function() {

var multiGauge = $("#MultiGauge").data("kendoRadialGauge");

multiGauge.pointers[0].value(15);

multiGauge.pointers[1].value(34);

multiGauge.pointers[2].value(55);

multiGauge.pointers[3].value(80);

multiGauge.pointers[5].value(80); //required lol???

multiGauge.redraw();

});

</script>

When I only set the pointer index 0,1,2, and 3, the gauge does not work. The needles remain at zero and do not go to the specified value.

However, if another value is added to an index that doesn't even exist... everything works.

-Steve

Gauge

answered on 27 Mar 2019

1 answer

269 views

Expander Arrows Don't Display Even Though Load On Demand and HasChildren Are Set To True

Hi,

I'm doing some testing with TreeView and want just the top level(level = 0) nodes to be loaded initially. I only want
to load second level nodes(level = 1) when I click on the arrow next to one of the top level nodes.

I set LoadOnDemand to true in the View file, and HasChildren to true for all of the top level nodes in the Controller,
but I still don't get arrows next to my top level nodes.

Here's the code from my View file that creates the TreeView:

@(
Html.Kendo().TreeView()
.Name("treeview")
.HtmlAttributes(new { style = "font-size: 11px; vertical-align: middle;" })
.Events(events => events
.Select("onSelect")
.Expand("onExpand")
)
.LoadOnDemand(true)
.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.Regions)
)

And here's the code from my Controller class that creates the collection of Regions that I bind to the tree in the View file:

List<TreeViewItemModel> regions = new List<TreeViewItemModel>();
foreach (DataRow r in dt.Rows)
{
TreeViewItemModel theModel = new TreeViewItemModel();
theModel.Text = (string)r["regionName"];
theModel.ImageUrl = "~/Shared/Images/db78.png";
theModel.HasChildren = true;
theModel.Id = r["RegionId"].ToString();
regions.Add(theModel);
}
ViewBag.Regions = regions;

If anyone can point me in the right direction, it would be greatly appreciated.

Thanks,

John

TreeView

answered on 27 Mar 2019

5 answers

747 views

Getting Started

I am an experienced developer and know the fundamentals of MVC. I bought Kendo UI Complete so that I can provide professional UI components on my websites at low development cost - i.e. avoid spending days experimenting. I've gone through http://docs.telerik.com/aspnet-core/getting-started and found it very disappointing in the following respects:

1. It contains typos - for example _Layout.cshtml is called Layout.cshtml

2. It creates a webapp with a lot of extra stuff that I don't want. I like to start with a minimal app and then add features.

3. The relationship between Bootstrap and Kendo style sheets / js isn't clear. I expect to be able to apply a custom theme to my website that works with all the Kendo widgets, but my attempts to change theme result in badly presented components.

4. There isn't clear differentiation of documentation that is Kendo UI for .NET Core specific.

5. Kendo documentation is badly organised. I'm not even told what version of what product it was last tested on.

In order to resolve these problems I am proposing this thread as an alternative starting point for people who are new to Kendo UI for .NET Core. Perhaps someone would kindly write a better set of instructions than http://docs.telerik.com/aspnet-core/getting-started and then keep them up-to-date.

General Discussions

answered on 27 Mar 2019

2 answers

364 views

TabStrip Wizard

I've seen a couple of Telerik examples written for creating a Wizard using the TabStrip but using different technologies. However, I have not had any luck with getting it to work in ASP.NET Core 2.2. Each Tab should be a step in the process that loads a Partial View sharing 1 model. The requirements are:

Tab 1 I have a Hierarchy using your TreeItem control
Tab 2 I have a Grid listing People
Tab 3 I capture some data entry
Tab 4 I submit the data that has been accumulated.

I'd appreciate your help with this,

Joel

TabStrip

answered on 26 Mar 2019

2 answers

1.1K+ views

Filtering a Grid's Template Column based on DropDownList value in ToolBar

Hello,

On my grid's toolbar I have a drop-down list box. Within my grid I have a template column that displays the aggregate of three other columns. When the user selects a value from the drop-down list box I want to filter the grid based on the value that's in the template column. How do I achieve this?

@(Html.Kendo().Grid<Models.GridData>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(c => c.ColumnA).Width(110).HeaderHtmlAttributes(new { style = "text-align: center;" }).Filterable(false);

columns.Bound(c => c.ColumnB).Width(110).HeaderHtmlAttributes(new { style = "text-align: center;" }).Filterable(false);

columns.Bound(c => c.ColumnC).Width(110).HeaderHtmlAttributes(new { style = "text-align: center;" }).Filterable(false);

columns.Bound("").ClientTemplate("#=calculateField(data)#").Title("Total").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(110).Filterable(false);

})

.ToolBar(toolbar =>

{

toolbar.ClientTemplateId("GridToolbarTemplate");

})

...

Here's the code for "GridToolbarTemplate"

<script id="GridToolbarTemplate" type="text/x-kendo-template">

<div style="float:left;">

<button class="k-button k-grid-add">New Item</button>

</div>

<div style="float:right;">

<label class="category-label" for="category">Threshold:</label>

@(Html.Kendo().DropDownList()

.Name("thresholds")

.OptionLabel("All")

.DataTextField("Text")

.DataValueField("Value")

.Events(e => e.Change("thresholdChange"))

.BindTo(new List<SelectListItem>()

{

new SelectListItem() {

Text = "3", Value ="3"

},

new SelectListItem() {

Text = "4", Value ="4"

},

new SelectListItem() {

Text = "5", Value ="5"

}

})

.ToClientTemplate()

)

</div>

</script>

The following is my JavaScript for the toolbar and the template column:

function calculateField(data) {

var result = data.ColumnA + data.ColumnB + data.ColumnC;

return result;

}

$(function () {

var grid = $("#Grid");

grid.find(".k-grid-toolbar").on("click", ".k-grid-add-row", function (e) {

e.preventDefault();

grid.data("kendoGrid").dataSource.read();

});

function thresholdChange() {

var value = this.value(),

grid = $("#Grid").data("kendoGrid");

if (value) {

grid.dataSource.filter({ field: "Total", operator: "gte", value: parseInt(value) });

} else {

grid.dataSource.filter({});

}

Your help is appreciated. Thanks.

Shawn A.

Grid

answered on 26 Mar 2019

1 answer

1.1K+ views

Dynamic @Url.Content Value

Can you help me understand this #: EmployeeId # syntax? It seems that is a dynamic value fed in using binding in the TreeList. But, it doesn't seem to work for me:

Your example from demos:

<script id="photo-template" type="text/x-kendo-template">

<div class='employee-photo'

style='background-image: url(@Url.Content("~/shared/web/treelist/people/#: EmployeeId #.jpg"));'></div>

<div class='employee-name'>#: FirstName #</div>

</script>

My instance that doesn't work:

<script id="icon-template" type="text/x-kendo-template">

<div class='group-icon'

style='background-image: url(@Url.Content("~/images/32/#: CurrentType.Name #.png"));'></div>

<div class='group-name'>#: Name #</div>

</script>

My treelist is bound to a list of Groups. On my Group object I have an Object named CurrentType that has a property on it called Name. I want to base the Icon on the Group.CurrentType.Name. So, for each group type I have a different Icon.

Thanks, Joel

TreeList

answered on 25 Mar 2019

2 answers

240 views

TreeList.Selectable(true)

Explain to me how I can work with the Selectable option. I have 2 controls on a page. On the left, I have a TreeList and on the right I have a Grid. The TreeList contains a hierarchical list of groups for which the user is authorized. I'm going to use this group selection to "filter" the data that will be displayed in the Grid control. So, I need the selection of a group in the TreeList to prompt the refresh of the Grid which then must use the groupId of the selected TreeList's node.

On load, how can selection of a TreeList Node be set to a default group from a MVC Action?
On selection, how can this value fire an event that will reload the Grid?

An example would be appreciated. Thanks for your help,

Joel

TreeList

answered on 25 Mar 2019

2 answers

295 views

Deleting from ListBox does not work as expected

Hello,
I am trying implement controls combo between TreeView and ListBox.
The available actions are Add - from TreeView to ListBox and Remove - only remove from the ListBox.
I am using simple buttons from both actions.

The problems after call ListBox.remove(..) are two:
1) the collection listBox.dataItems() remains the same - i.e. the item is deleted only from UI
2) the underlying select HTML controls remains the same - i.e. the MVC/Kenod validators validates the page even the ListBox seems empty

Here is my remove button handler:

function removeFromListBox() {

var listBox = $("#myListBox").data("kendoListBox");

var selected = listBox.select(); // this is an array

listBox.remove(listBox.select()); // Does not deletes the actual data item

console.log(listBox.dataItems()); // listBox.dataItems() is not reduced

}

ListBox

answered on 25 Mar 2019

1 answer

252 views

Incorrect icons with Bootstrap-v4 style

I've recently started working on a new ASP.NET Core project and one element I've been working on is using a Kendo UI grid with a custom button with a text of "Approve". I'm using the Kendo Bootstrap-v4 style but this seems to be causing issues with the button icons. In my grids the standard edit and delete buttons show with the correct icons but if I set my "Approve" button to have a .IconClass("k-i-check") I actually get the download icon. If I choose the "k-i-edit" .IconClass instead then i seem to get k-i-check. If I choose "k-i-checkmark-outline" I seem to get "k-i-email". Is this something I'm missing or an issue with the latest version of the files I have in place? I'm using "Kendo UI v2019.1.220". This is only on my development machine currently.

Css reference as below:

<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap-v4.min.css" />

Grid column

columns.Command(command => { command.Edit(); command.Custom("Approve").Click("approveUser").IconClass("k-i-checkmark-outline"); }).Width(120);

Thanks in advance for any advice.

Grid

answered on 22 Mar 2019