Questions on UI for ASP.NET Core Forum

1 answer

319 views

I have this combobox. As expected the select event fires when I select an item (plus the change event) but does not fire when I clear (X) the selection. The change event fires when I clear but then I don't know how to evaluate that nothing is selected. How do I evaluate if the selection was cleared?

In my script for the change event, I get the first alert. But, then the "if (e.item)" always falls to the else logic.

@(Html.Kendo().ComboBox()

.Name("isActiveFilter")

.Filter(FilterType.Contains)

.Placeholder("No filter...")

.DataTextField("Name")

.DataValueField("Value")

.BindTo(Model.IsActiveOptions)

.Suggest(true)

.Events(e =>

{

e.Select("onActiveFilterSelected");

e.Change("onActiveFilterChanged");

})

.HtmlAttributes(new { style = "width:100%;" }))

Here are my event handlers:

function onActiveFilterChanged(e) {

alert("change");

if (e.item) {

var dataItem = this.dataItem(e.item.index());

alert("event :: change (" + dataItem.Name + " : " + dataItem.Value + ")");

} else {

alert("event :: change");

}

function onActiveFilterSelected(e) {

alert("select");

if (e.item) {

var dataItem = this.dataItem(e.item.index());

alert("event :: select (" + dataItem.Name + " : " + dataItem.Value + ")");

} else {

alert("event :: select");

}

ComboBox

answered on 23 Jun 2020

5 answers

144 views

How to filter options as user chooses?

Say I have a multi-select that I am populating with music artists, each artist belongs to a genre (Rock, HipHop, Blues etc), so the POCO would look something like this:

public class Artist {

public int ArtistID { get; set; }

public string ArtistName { get; set; }

public int GenreID { get; set; } //FK

}

and the data might look like this:

[

{

"ArtistId": 1,

"ArtistName": "AC/DC",

"GenreID": 1

},

{

"ArtistId": 2,

"ArtistName": "Rolling Stones",

"GenreID": 1

},

{

"ArtistId": 3,

"ArtistName": "Jay Z",

"GenreID": 2

},

{

"ArtistId": 4,

"ArtistName": "Snoop Dogg",

"GenreID": 2

},

{

"ArtistId": 5,

"ArtistName": "BB King",

"GenreID": 3

},

{

"ArtistId": 6,

"ArtistName": "Muddy Waters",

"GenreID": 3

}

]

I want to limit them to only selecting one artist for any given genre. So for example, the control would first load with all 6 options, but if they choose 'AC/DC' I would want to filter out all artists of that genre (in this case the Rolling Stones would get removed). How best do I accomplish this? thanks

MultiSelect

answered on 23 Jun 2020

1 answer

2.6K+ views

Multi-Line Textbox

Hello,

I am currently using the textbox UI component for my webapp and i'm utilizing the floating label and I'm very pleased with the outcome. I came across many situations where I need a text field that would benefit from multi line capabilities.

it seems like there are currently no UI components at this time that allow multi-line capabilities. Are there any solutions at all, at this time, that will allow me to use a text field with multi-line??

Thanks,

TextBox

answered on 22 Jun 2020

2 answers

269 views

Tag Helper - Loading content with AJAX

I am trying to load a partial view inside of one of the splitter panes. I have done this previously using the HTML helpers in an old project, but I am having troubles replicating this with Tag Helpers.

If I use content-url, I get the page inside of an iframe, which doesn't have my styles applied and the iframe only takes up a small amount of the pane with overflow scrollers. The HTML Helper in the old project loaded the returned html in the pane.

How can I load the partial view using ajax with the tag helpers?

Splitter

answered on 20 Jun 2020

1 answer

288 views

Render dynamic json

How do you configure the treeview to accept unstructured but properly formed json?

It must be possible because Chrome Development Tools has no problems showing any json sent to it.

TreeView

answered on 19 Jun 2020

3 answers

206 views

upload error without detail

I'm trying to implement an upload into a window.

this is a code

@{Html.Kendo().Window()

.Name("importExcelFileWindow")

.Title("Importa file Excel")

.Width(500)

.Height(300)

.Content(@<text>

@using (Html.BeginForm("ImportExcelFile", "UploadContacts", FormMethod.Post))

{

@(Html.Kendo().Upload()

.Name("excelFiles")

.Validation(v=>v.AllowedExtensions(new string[] { ".xlsx", ".xls" }))

.Async(a => a

.Save("Async_Save", "UploadContacts")

.Remove("Async_Remove", "UploadContacts")

.AutoUpload(true)

).Events(e=>e.Error("uploadError"))

)

}

</text>)

.Visible(false)

.Render();

}

function uploadError(e) {
alert(e.XMLHttpRequest.response);
}

[...]

this is a controller

public class AsyncUploadContactsController : Controller

{

public IWebHostEnvironment HostingEnvironment { get; set; }

public string incomingFolder { get; set; }

private readonly BusinessDbContext _context;

public AsyncUploadContactsController(IWebHostEnvironment hostingEnvironment, BusinessDbContext context)

{

HostingEnvironment = hostingEnvironment;

_context = context;

incomingFolder = "App_Data";

}

[HttpPost]

public ActionResult ImportExcelFile()

{

return View();

}

public async Task<ActionResult> Async_Save(IEnumerable<IFormFile> files)

{

if (files != null)

{

foreach (var file in files)

{

var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);

var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));

var physicalPath = Path.Combine(HostingEnvironment.WebRootPath, incomingFolder, fileName);

using (var fileStream = new FileStream(physicalPath, FileMode.Create))

{

await file.CopyToAsync(fileStream);

}

// Return an empty string to signify success

return Content("");

}

public ActionResult Async_Remove(string[] fileNames)

{

// The parameter of the Remove action must be called "fileNames"

if (fileNames != null)

{

foreach (var fullName in fileNames)

{

var fileName = Path.GetFileName(fullName);

var physicalPath = Path.Combine(HostingEnvironment.WebRootPath, incomingFolder, fileName);

if (System.IO.File.Exists(physicalPath))

System.IO.File.Delete(physicalPath);

}

// Return an empty string to signify success

return Content("");

}

when I open the window and I try to upload a file, I obtain this effect (attached screen-shots)

The strange thing is that if I set a breakpoint into actions, I notice that it doesn't go into an action AsynchSave.

I create App_Data folder into wwwroot node's project (is it corrects?

Where I wrong?

Upload

answered on 19 Jun 2020

2 answers

126 views

Tag Helper Tools

Is there a place where I can see all of the tool names for the Tag Helpers?

I can't seem to get the TableEditing or the SuperScript tool too show. They both just say "undefined".

Editor

answered on 18 Jun 2020

4 answers

127 views

NoRecords() auto height size

Hi,

I am experiencing an odd behavior when using the .NoRecords() function of the grid. If I add .NoRecords() the height of the grid auto sizes to an extreme height beyond the view screen height when there are no records. If there are records, then the grid auto sizes appropriately. If I remove .NoRecords() then the grid is collapsed to a reasonable height when no records are available. I have not had this issue with previous versions. Using Developer Tools for the browsers I cannot see any .css file that is applying any height value that would be causing this issue. Is this a known issue, working as intended or am I missing something?

I am using version 2020.2.513.

Thanks.

Grid

answered on 18 Jun 2020

2 answers

1.4K+ views

Change Pager color when using Pageable with Kendo Grid

@(Html.Kendo().Grid<ViewModel>(Model)<br>

.Name("UserGrid")<br>

.Columns(columns =><br>

{

columns.Bound(p => p.Name);

columns.Bound(p => p.Status);

     columns.Bound(p => p.Id);<br>                })<br>                .Pageable(pager => pager.PageSizes(

new

[] { 10, 20, 50, 100 }))<br>                .Sortable(sortable => sortable<br>                    .AllowUnsort(

true

)<br>                    .SortMode(GridSortMode.MultipleColumn)<br>                    .ShowIndexes(

true))<br> .Filterable()<br> )

Grid

answered on 18 Jun 2020

3 answers

272 views

Referring to item value in embedded C# code in template

How do I refer to a model property value in the template? I have:

<div class="k-content">

@(Html.Kendo().ListView<MemberSkillModel>()

.Name("listViewSkills")

.TagName("div")

.ClientTemplateId("skillstemplate")

.BindTo(@Model.MemberSkills)

)

</div>

and

<script type="text/x-kendo-tmpl" id="skillstemplate">

<div class="k-widget" style="border:0px">

<div class="row">

<div class="col-12">

#:Name#

@if (@Model.MemberSkills.ExpiryDate != null)

{

@:(exp kendo.toString(ExpiryDate, "MMMM dd, yyyy")#)

}

</div>

</script>

Obviously @Model.MemberSkills.ExpiryDate throws an error as it needs a model item instead of the entire model contents.

ListView

answered on 18 Jun 2020