Questions on UI for ASP.NET Core Forum

5 answers

439 views

DatePicker - Input field is of type text and hence doesn't serialize properly

The input field generated by DatePicker is of type text. Hence, when I serialize the form in which the input is contained into json, the date is not properly formatted. Especially as the culture of the browser can be anything while the rest service the form is posted to expect a culture-invariant date. The same is true with NumerictextBox by the way.

Date/Time Pickers

answered on 19 Feb 2019

1 answer

230 views

Razor Many-To-Many View

I need to manage group membership. I'll select the group then I'll need a grid on the left that represents all people currently in the group. I then need a grid on the right representing all people available that are not in the group. In this middle, I need an Add and Remove button. The add button shouldn't be enabled unless the grid on the right has focus and a user is selected. The remove button should not be enabled unless the left grid has focus and a user is selected.

If you have an example of this type of functionality, can you please post a link. If not, some feedback on how I would go about this using a ASP.NET Core 2.2 components would be appreciated.

Grid

answered on 19 Feb 2019

1 answer

265 views

Load tree with already selected data

Hi,

I am looking for a way where in I can achieve the following.

1. Load tree with nodes and some nodes selected and expanded. (Typically a edit screen where in some nodes are selected and saved to database)

2. I would like to Bind custom properties as well.

For achieving 1 I used .ItemDataBound event. But for 2 I can use DataSource. If I use datasource I can bind custom properties but not able to set Expanded, Selected, Checked properties.

Is there a way I can achieve both? or I am making some mistakes in my approach.

Ultimately I need to be able to retrieve all the selected nodes. Please guide me to links/examples/posts if you have any.

TreeView

answered on 19 Feb 2019

1 answer

175 views

Can I customize the appointment details?

I have a request to add and remove some fields in the appointment details. Can I do that? How can I achieve this? I'm attaching a print screen of what I'm trying to customize.

Thank you.

Scheduler

answered on 18 Feb 2019

4 answers

106 views

Hiding Sheetsbar disables scroll bars

I'm using the "Basic usage" spreadsheet example as the start to my code. When I set .Sheetsbar(false) the scroll bars are disabled. I would like to hide the sheetsbar but keep the scroll bars enabled. How is this done?

Spreadsheet

answered on 15 Feb 2019

1 answer

258 views

Best practice for manually loading data from database

I've created a spreadsheet in a View that is somewhat complex. The first 10 rows are frozen and function as an informational header to the data which is in rows 11 and greater. The header has merged cells and labels for data. For example, it's a time card spreadsheet and row 1 has just the employee name with the label for the name just to the left of it. I am assuming I can't use a datasource because the spreadsheet is not a simple column/row display of data. What is the best practice to load a spreadsheet like this with data read from the database?

Spreadsheet

answered on 15 Feb 2019

1 answer

204 views

Entity Framework Core 2.2 + Hierarchy

I use Entity Framework Core 2.2. It does me a solid by constructing the entire hierarchy from the database without me asking it to. That said, your TreeList actually binds to a Flat structure. Your model definition then defines how the hierarchy is built.

Do you have an example of how you use EF with your TreeList? Do you have tools or a method that I could use to convert what I get from EF over to what your control needs?

I have a self-referencing Group table:

Id
ParentId
Name
Description

ParentId references Id

@(Html.Kendo().TreeList<GsiPortal.Models.Group>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").Click("toDetails"); }).Width(120);

columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");

columns.Add().Field(e => e.Description).Width(220);

columns.Add().Command(c => { c.Custom().Text("Create").Name("createButton").Click("toCreate"); }).Width(120);

})

.Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))

.DataSource(dataSource => dataSource

.ServerOperation(false)

.Read(read => read.Action("IndexJson", "Groups").Data("readParams"))

.Model(m =>

{

m.Id(f => f.Id);

m.ParentId(f => f.ParentId);

m.Expanded(true);

m.Field(f => f.Name);

m.Field(f => f.Description);

}

)

.Events(events =>

{

events.Error("onError");

})

))

<script>

var groupId = Number(@(ViewBag.GroupId));

function readParams() {

return { id: groupId };

}

function toDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

if (dataItem != null) {

window.location.href = '@Url.Action("Details", "Groups")/' + dataItem.Id;

}

function toCreate(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

if (dataItem != null) {

window.location.href = '@Url.Action("Create", "Groups")/?parentId=' + dataItem.Id;

}

function onError(e) {

alert(e.toString());

}

</script>

TreeList

answered on 15 Feb 2019

1 answer

149 views

Conditional Filter on Line 1

I have the following grid. However, I was given the requirement that we shouldn't have the search exposed full time. We should only display it when we have more than 1 page worth of data. How do I accomplish this?

@using Portal.Configuration

@using Portal.Models

@{

ViewData["Title"] = "Customers";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Customers</h2>

<p>

<a asp-action="Create">Create New</a>

</p>

<div class="row">

<div class="col-xs-18 col-md-12">

@(Html.Kendo().Grid<Customer>()

.Name("grid")

.Columns(columns =>

{

columns.Command(command => command

.Custom("Detail")

.Click("goDetail"))

.Width(Glossary.ButtonWidth);

columns.Bound(p => p.Name)

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")

.ShowOperators(false)

.SuggestionOperator(FilterType.Contains)));

columns.Bound(p => p.ProfileId)

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")

.ShowOperators(false)

.SuggestionOperator(FilterType.Contains)));

columns.Bound(p => p.DatabaseStatus.Name).Title("Database Status")

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")

.ShowOperators(false)

.SuggestionOperator(FilterType.Contains)));

columns.Bound(p => p.AddTimestamp).Format("{0:MM/dd/yyyy}");

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("IndexJson", "Customers"))

)

<script type="text/javascript">

function goDetail(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

window.location.href = '@Url.Action("Details", "Customers")/' + dataItem.Id;

}

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors,

function (key, value) {

if ('errors' in value) {

$.each(value.errors,

function () {

message += this + "\n";

});

}

});

alert(message);

}

</script>

</div>

Grid

answered on 15 Feb 2019

2 answers

1.3K+ views

Dynamically Pass RouteValueDictionary values

Hi,

I have a treeview and I want to bind hierarchical data.

Country

State

Offices in State

I want to make call to the controller and get the data based on the node that is being expanded. To get the right data I want send the parameter of the currently selected node (Id, level) so that I can get the appropriate data to expand.

@(Html.Kendo().TreeView()
.Name("exampleTreeView")
.LoadOnDemand(true)
.Checkboxes(checkboxes => checkboxes
.Name("checkbox")
.CheckChildren(true)
)
.Events(events => events
.Check("onCheck")
)
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Model(model=>model.Id("Value").HasChildren("HasChildren"))
.Read(read => read.Action("GetData", "MyController"))
)
)

Right now I can get the first set of data from getdata method and bind it. want to expand a nde which will call the same action method with some additional data to get the right data.

I have two questions -

1. (How) can I attach or bind additional property (level which could be country,state or office)

2. How can I pass this value to the GetData Action to get the right data.

TreeView