Questions on UI for ASP.NET Core Forum

4 answers

904 views

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

545 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

185 views

[Solved] 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.6K+ 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

350 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

2 answers

2.4K+ views

Grid delete confirmation using Kendo Dialog

I have managed to get my Kendo Dialog working properly with the grid however I cannot figure out the proper JQuery code to have it delete the record on confirmation.

Here is the my grid and dialog:

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

.Name("grd_OrderStatus")

.Columns(columns =>

{

columns.Command(command =>

{

command.Edit()

.Text(" ")

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

command.Custom("Destroy")

.IconClass("k-icon k-i-close")

.Click("showDeleteConfirmation")

.Text(" ")

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

}).Width("15%");

columns.Bound(p => p.OrderStatusId).Hidden(controller.IsLoggedInUserRootAdmin != true).Width("15%").Title("ID");

columns.Bound(p => p.Description).Width("70%");

})

.ToolBar(toolbar => toolbar.ClientTemplateId("GridToolbarTemplate"))

.Editable(editable => editable.DisplayDeleteConfirmation(false)

.Mode(GridEditMode.PopUp))

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

.Scrollable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.AutoBind(controller.IsLoggedInUserRootAdmin != true)

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("OrderStatus_Read", "OrderStatus", new {area = "OrderPad"}).Data("GetSelectedClientID"))

.Create(update => update.Action("OrderStatus_Create", "OrderStatus", new {area = "OrderPad"}).Data("GetSelectedClientID"))

.Update(update => update.Action("OrderStatus_Update", "OrderStatus", new {area = "OrderPad"}).Data("GetSelectedClientID"))

.Destroy(update => update.Action("OrderStatus_Destroy", "OrderStatus", new {area = "OrderPad"}))

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

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

))

@(Html.Kendo()

.Dialog()

.Name("dlg_DeleteConfirmation")

.Modal(true)

.Title("Confirm Delete")

.Content("Are you sure you want to delete this Order Status?")

.Visible(false)

.Actions(a =>

{

a.Add().Text("No").Action("cancelDelete");

a.Add().Text("Yes").Action("confirmDelete").Primary(true);

})

)

And here is my confirmDelete script, this is one of a dozen different pieces of code I have found scattered across the internet related to this topic however none of them work.

function confirmDelete(e) {

var grid = $("#grd_OrderStatus").data("kendoGrid");

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

var data = grid.dataItem(tr);

grid.dataSource.remove(data); //prepare a "destroy" request

grid.dataSource.sync();

$('#dlg_DeleteConfirmation').data("kendoDialog").close();

}

Any suggestions on how to get this to work?

Thanks

M

Grid

answered on 19 Dec 2018

1 answer

140 views

Tab Titles

Hello,

Is there a way to change the width of the tab titles so that longer title names can be use without truncation or word wrapping to the next line. I could not find anything in the API docs or demos.

Please refer to the attached image.

Thanks,

Doug

TabStrip

answered on 19 Dec 2018

4 answers

1.2K+ views

[Solved] Navigation with Parameter on Button Click

Using this Grid with the Groups command button definition, I want to navigate to another MVC Action passing a CustomerId value as a parameter. I have an Event handler (with no JavaScript) but am not sure if this is the right approach. Should this be some type of HTML call? If JavaScript is the right way to do this then please supply some code.

This is for ASP.NET Core. Thanks in advance for your help, Joel.

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

.Name("grid")

.Columns(columns =>

{

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

columns.Bound(p => p.DisplayName).Title("Display Name");

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

columns.Command(command => command.Custom("Groups").Click("goGroups"));

columns.Command(command => command.Edit()).MinResizableWidth(75);

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

})

.Editable(editable => editable.Mode(GridEditMode.InLine)) //.TemplateName("CustomerEdit")) //Turn on the inline cell editing by setting

.Pageable()

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

.PersistSelection(true)

.Navigatable()

.Sortable()

.Scrollable()

.Filterable()

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.ServerOperation(false)

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

.Model(model =>

{

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

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

model.Field(p => p.AddTimestamp).Editable(false);

})

.Read("IndexJson", "Customers")

.Update("Edit", "Customers")

.Create("CreateJson", "Customers")

.Destroy("DeleteJson", "Customers")

))

Grid

answered on 18 Dec 2018

1 answer

1.0K+ views

Passing field data from master to detail grid

How do I pass field data from the master grid to the detail grid in the modal popup editor in kendo ui mvc? And how do I do the opposite?

Thanks,

James

DropDownList

answered on 18 Dec 2018

4 answers

395 views

[Solved] Event Handler Example

I need a TreeView example for ASP.NET Core 2.2 that uses Binding and shows me how I can capture the drag/drop events from the control with some context information. Your example shows that it can be done but I see no way to capture the data item that is bound to the node or even wire up a KeyValue to a node so when it is clicked that I have a breadcrumb back to my data store.

I appreciate your help,

Joel

My current TreeView:

Html.Kendo().TreeView()

.TemplateId("treeview-template")

.DragAndDrop(true)

.Name("kendoTreeView")

.Events(events => events

.Change("onChange")

.Select("onSelect")

.Drop("onDrop")

.DragEnd("onDragEnd")