Questions on UI for ASP.NET Core Forum

3 answers

193 views

I have a grid where I am trying to allow users to Update a Boolean value with a dropdown list. The grid displays correctly, and when I change the value of the dropdown list and click Update, the grid displays the correct value. All the other fields are updated to the new values and sent through to the controller correctly, but the new value set by the custom editor is still the old value.

<script>

function GridBooleanEditor(container, options) {

$('<input required name="' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

dataSource: {

data: [

{ text: "True", value: true },

{ text: "False", value: false }

]

},

dataTextField: "text",

dataValueField: "value",

valuePrimitive: true

});

}

function ClassificationSchemeEnabledTemplate(data) {

var iconClass = data.IsVisible ? 'k-i-check' : 'k-i-close';

return '<span class="k-icon ' + iconClass + '"></span>';

}

</script>

<kendo-datasource name="schemeDataSource"

type="DataSourceTagHelperType.Ajax"

page-size="20" server-operation="true"

on-error="DataSourceError">

<transport>

<read url="@Url.ActionLink("_ReadSchemes", "ControlPanel")" type="POST" />

<update url="@Url.Action("_UpdateScheme", "ControlPanel")" type="POST" />

</transport>

<schema>

<model id="FolderID">

<fields>

<field name="FolderID" type="number"></field>

<field name="Name" type="string"></field>

<field name="Description" type="string"></field>

<field name="IsVisible" type="boolean"></field>

</fields>

</model>

</schema>

</kendo-datasource>

<kendo-grid name="schemegrid" datasource-id="schemeDataSource" style="height:100%;">

<editable mode="inline" enabled="true" />

<sortable enabled="true" />

<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">

</pageable>

<columns>

<column field="FolderID" title="Folder ID" hidden="true"></column>

<column field="Name" title="Name"></column>

<column field="Description" title="Description"></column>

<column field="IsVisible" title="Enabled" editor="GridBooleanEditor" template="#=ClassificationSchemeEnabledTemplate(data)#"></column>

<column>

<commands>

<column-command name="edit"></column-command>

</commands>

</column>

</columns>

</kendo-grid>

Grid

answered on 25 Jun 2020

4 answers

445 views

New Form - Bool fields handling

I have a couple of issues with using bool fields on the new Form.
1.Why a bool field is automatically a required field? How to make it so that it can be on or off?
2. On submit bool fields are set with 'on' for true, what am I doing wrong?

....

item.Add()

.Field(f => f.MakeExtensions)

.Label(l => l.Text("Make Extensions"))

.Editor(e =>

{

e.Switch().Messages(c => c.Checked("YES").Unchecked("NO"));

});

....

If the field is uncheck, then validation fails, but when I check it I get the following in the form header on submit:

....

Id: 14

Secret:

MakeExtensions: on

RunningState: 0

....

Form

answered on 25 Jun 2020

4 answers

169 views

MultiSelect: read items from table

Hello,
starting from this example of multiselect:

https://demos.telerik.com/kendo-ui/multiselect/index

where items values are "cabled" in code, how can I read items from a SQL data source?

My need is to have a popup multiselect where the user can select one or more cities from a list of
cities in a SQL Server table.

Thank you in advance.

Luigi

MultiSelect

answered on 25 Jun 2020

1 answer

174 views

Security Authorization - Expiry

I use IdentityServer4 to generate tokens. Tokens have an Expiration associated with them. I also have a grid that has an MVC handler on the secured Controller that makes a call. I have a series of grid filter controls whose purpose is to allow the user to filter the data that shows up in the grid then a refresh button.

Now, to glue it all together, if the Token expires and the user hits refresh on the filter button which tells the grid to "read" again, I get redirected to the error page. Instead, I want Refresh button action to have the token refreshed using the typical process and then for the request to go through. Because your grid makes a call to the controller I don't see how authorization can intercept the request.

Any idea how I can get the expired token refreshed on Grid.Read?

Grid

answered on 25 Jun 2020

1 answer

340 views

Capture the Clear Event

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

151 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.7K+ 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

278 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

301 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

214 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