Questions on UI for ASP.NET Core Forum

2 answers

618 views

I have the following in a Kendo UI MVC Core Grid to declare that a popup shows when adding or inserting a record:

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Template").Window(x => x.Width(500).Height(500)))

That works to bring up the editor template popup which is stored in the Shared/EditorTemplates folder. And validation is working as well as the Insert or Update methods on the controller are working.
Yet the when I click the +ADD NEW RECORD button on the Toolbar when the dialog shows it always shows as an update action. The title bar displays "Edit" and the button displays "Update". This is happening in another grid as well. Shouldn't it display "Insert" and "Save" or "Insert" and "Add" when the +ADD NEW RECORD button on the Toolbar is clicked? Why always "Edit"?

I also need to know if it is in Insert or Edit mode at run-time because I am doing a lookup using Ajax when the user enters a value to check for duplicates on that particular field.

Please advise.

Grid

answered on 02 Jan 2019

11 answers

975 views

Grid Update Not Firing. Getting 400 Error

Not sure what I am doing wrong. When I click the update button nothing happens. I do an Inspect and I get a status code:400. Any way to get more details on that error code? I am following the demo and no matter what I do, I get that error.

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

.Name("Users")

.Columns(columns =>

{

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

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

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

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

columns.Bound(p => p.DateCreated).ClientTemplate("#= DateCreated? kendo.toString(kendo.parseDate(DateCreated, 'yyyy-MM-ddTHH:mm:ssZ'), 'MM/dd/yyyy'): '' #"); ;

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

columns.Command(command => { command.Edit(); }).Width(172);

})

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

.Pageable()

.Navigatable()

.Sortable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model => model.Id(p => p.Id))

.Events(events => events.Error("error_handler"))

.Update(update => update.Action("update", "Account"))

)

Grid

answered on 31 Dec 2018

2 answers

144 views

How to get reference to RadComboBox with JQuery in different page

I need to access a RadComboBox that is defined in one .ascx file from a different .ascx file so that I can get/set values in it. I've read this information https://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference#using-jquery-selectors but it isn't working. All help is greatly appreciated. Here are the details about what I have:

In View.ascx the control is specified:

<telerik:RadComboBox RenderMode="Lightweight" ID="cmbReportTool" filter="Contains" runat="server"
oWrap="false" class="cmb-report-tool" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" width="400px">
</telerik:RadComboBox>

and the following JavaScript exists in a different .ascx file:

function () {

var combo = $telerik.$("[id$='cmbReportTool']").get(0).control;

}

I've played around with the JS and used an alert() to quickly see what I have. The following code presents "combo: [object HTMLDivElement]"

function () {
var combo = $telerik.$("[id$='cmbReportTool']").get(0);

alert('combo: ' + combo);
}

The following code presents "combo: undefined"

function () {
var combo = $telerik.$("[id$='cmbReportTool']").get(0).control;
alert('combo: ' + combo);
}

Here are some specifics about my environment:

OS: Windows 7 Enterprise with service pack 1
Browser: Internet Explorer 11
Telerik Web UI version 2016.3.1027.40

General Discussions

answered on 31 Dec 2018

2 answers

1.1K+ views

Maximum width for the Grid

I need to know how to set the maximum width of the Grid. I have it inside a DIV with a style setting the width but it extends beyond that and there seems to be nothing that changes that. I am setting the column widths.

Grid

answered on 28 Dec 2018

3 answers

1.2K+ views

Validation Attributes not working on Kendo Editor

Decorating a string field on a view model with [DataType(DataType.MultilineText)] and [Required] and then creating an @Html.Kendo().EditorFor(x => x.Field) does not add the "data-val-required" validation attribute to the Kendo Editor's underlying textarea element. In fact, no DataAnnotation attribute, nor custom validation attributes that implement ValidationAttribute and IClientModelValidator get handled properly for the Kendo Editor. From what I've seen, other controls seem to handle them just fine.

Do you have any plans on adding validation support for the Kendo Editor? We've been working around this by manually adding the html attributes to the controls, but this really isn't desirable as it adds a higher maintenance cost to our application.

Editor

answered on 24 Dec 2018

4 answers

824 views

Column Resizing not working

I have many, many grids in the ASP.NET Core application but there is one template where the column resizing is not working. So the resize icon shows up when you hover but moving it left or right does nothing. And the hard coded column widths if I change the values have no effect.

.Resizable(resize => resize.Columns(true))

Grid

answered on 24 Dec 2018

1 answer

495 views

Add _LoginPartial to Panel

I want to require a credential to be entered so I can track a users role, etc. What is the recommend way to display the _LoginPartial in the Menu? Or, do I accomplish this by making it part of the <div> ?

What DOESN'T look right:

<div class="container menu-content">

<div class="navbar-collapse collapse">

<partial name="_CookieConsentPartial"/>

<div id="responsive-panel">

@(Html.Kendo().Menu()

.Name("Menu")

.Items(items =>

{

items.Add()

.Text("About")

.Action("About", "Home");

items.Add()

.Text("Customers")

.Action("Index", "Customers");

}))

</div>

<partial name="_LoginPartial"/>

</div>

<button id="configure" class="k-rpanel-toggle k-button k-primary btn-toggle"><span class="k-icon k-i-hbars"></span></button>

</div>

ResponsivePanel

answered on 21 Dec 2018

5 answers

146 views

Update/Destroy Parameter [new]

I am using the TreeList as defined below. I can successfully get and display my hierarchy. However, when I go to update, the [Group group] is empty like it newed up an instance of the object instead of took it from the tree. What am I missing?

TreeList Definition:

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

<div class='group-photo'

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

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

</script>

<div class="demo-section k-content">

<h4>Customer Groups</h4>

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

.Name("treelist")

.Columns(columns =>

{

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

columns.Add().Field(e => e.DisplayName);

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

columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");

columns.Add().Command(c =>

{

c.CreateChild().Text("Add child");

c.Edit();

c.Destroy();

})

.HtmlAttributes(new

{

style = "text-align: center;"

});

})

.Editable(e => e.Mode(TreeListEditMode.InLine))

.Pageable()

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

.Navigatable()

.Sortable()

.Scrollable(true)

.Filterable()

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

.DataSource(dataSource => dataSource

.PageSize(20)

.Model(m =>

{

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

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

m.Expanded(true);

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

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

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

m.Field(f => f.AddTimestamp).Editable(false);

m.Field(f => f.LastActionTimestamp).Editable(false);

})

.Create(create => create.Action("CreateJson", "Groups"))

.Read(read => read.Action("AllJson", "Groups"))

.Update(update => update.Action("UpdateJson", "Groups"))

.Destroy(delete => delete.Action("DestroyJson", "Groups"))

))

<style>

.group-photo {

display: inline-block;

width: 40px;

height: 40px;

border-radius: 50%;

background-size: 40px 44px;

background-position: center center;

vertical-align: middle;

line-height: 41px;

box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);

}

.group-name {

display: inline-block;

vertical-align: middle;

line-height: 41px;

padding-left: 10px;

}

</style>

Control Methods

public async Task<JsonResult> AllJson([DataSourceRequest] DataSourceRequest request)

{

var all = await groupService.GetAllAsync();

var result = await all.ToTreeDataSourceResultAsync(request,

e => e.Id,

e => e.ParentId,

e => e);

return Json(result);

}

public async Task<JsonResult> CreateJson([DataSourceRequest] DataSourceRequest request, Group group)

{

if (ModelState.IsValid)

{

customerDbContext.Add(group);

await customerDbContext.SaveChangesAsync();

}

return Json(new[] { group }.ToTreeDataSourceResult(request, ModelState));

}

public async Task<JsonResult> UpdateJson(

[DataSourceRequest] DataSourceRequest request,

Group group)

{

if (ModelState.IsValid)

{

customerDbContext.Update(group);

await customerDbContext.SaveChangesAsync();

}

return Json(new[] { group }.ToTreeDataSourceResult(request, ModelState));

}

public async Task<JsonResult> DestroyJson([DataSourceRequest] DataSourceRequest request, Group group)

{

if (ModelState.IsValid)

{

customerDbContext.Group.Remove(group);

await customerDbContext.SaveChangesAsync();

}

return Json(new[] { group }.ToTreeDataSourceResult(request, ModelState));

}

Also, I have attached a picture of the TreeLIst

TreeList

answered on 21 Dec 2018

5 answers

1.5K+ views

DatePicker Does Not Respect Javascript Form Reset

I have an asp.net form with various textboxes and datepickers. I allow the user to fill in the form and if they decide to start again I have a reset button for them.

The reset button should reset the form to its original model data. To be clear I don't want to reset the form to blank values, I want to reset all the inputs to their original modal values.

This works nicely for the textboxes however after hitting reset button the datepicker simply displays a "d" and not the original model value.

I use the following javascript/jquery to reset the form:

$(this).closest('form')[0].reset();

Here is my extract form code with the datepicker:

<tr>

<td><label asp-for="Aircraft.SerialNumber" class="frm-label"></label></td>

<td>

<input asp-for="Aircraft.SerialNumber" autocomplete="off" class="k-textbox k-state-disabled" style="width:400px" disabled />

<span asp-validation-for="Aircraft.SerialNumber" class="text-danger"></span>

</td>

</tr>

<tr>

<td><label asp-for="Aircraft.ManufactureDate" class="frm-label"></label></td>

<td>

<kendo-datepicker name="DatePicker" for="Aircraft.ManufactureDate" class="" style='width: 400px;' />

<span asp-validation-for="Aircraft.ManufactureDate" class="text-danger"></span>

</td>

</tr>

Date/Time Pickers

answered on 19 Dec 2018

1 answer

275 views

Auto Upload and RedirectToAction failed

Hi,

I use Telerik UI for ASP.NET Core Upload to upload an image to Azure storage, and it works.

I tried to use RedirectToAction to show the uploaded image in Details action, and the page keep stayed and didn't redirect. The codes are in PaperCognitionController, Index page for upload, and Details page to show image.

I tried another action CharacterCognitionController Index to use RedirectToAction to test the redirect function, it worked but only the PaperCognitionController.SaveAsync didn't.

Is there any problem with using Upload control?

And how to upload my code? The attachments cannot be zip file?

Upload

answered on 19 Dec 2018