Questions on UI for ASP.NET Core Forum

1 answer

292 views

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

110 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.1K+ views

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

979 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

365 views

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")

)

.BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>

{

mappings.For<Group>(binding => binding.ItemDataBound((item, group) =>

{

item.Text = group.Name;

item.Id = $"{group.Id}";

item.ImageUrl = group.ImageUrl;

item.Expanded = true;

})

.Children(group => group.Children));

})

)

<script>

var treeview;

function onSelect(e) {

alert(e.node);

}

function onChange(e) {

alert(e.node);

}

function onDrop(e) {

alert(e.node);

}

function onDragEnd(e) {

alert(e.node);

}

$(document).ready(function() {

treeview = $("#treeview").data("kendoTreeView");

});

</script>

TreeView

answered on 18 Dec 2018

2 answers

591 views

MultiSelect always returns null as Editor Template

I have a multiselect setup as an Editor Template utilized by the grids popup editor, the control loads properly, displays the data, allows me to select multiple Order Types, but then returns null to my model every time when I save the changes on the popup editor.

How do I wire up the value of the MultiSelect to my model when it is an Editor Template for a Grid Popup?

Here is my Editor Template code:

@model IEnumerable<int>

@(Html.Kendo().MultiSelect()

.Name("OrderTypeIDs")

.DataTextField("Description")

.DataValueField("OrderTypeID")

.DataSource(d => d

.Ajax()

.Read(r => r

.Action("OrderTypes_Read", "Locations")

.Data("GetSelectedClientID")))

.TagMode(MultiSelectTagMode.Multiple)

.Value(Model)

)

Here is the underlying model class:

public class LocationsModel : INotifyPropertyChanged

{

public LocationsModel() : base()

{

}

[ScaffoldColumn(false)]

public decimal LocationId { get; set; }

[ScaffoldColumn(false)]

public string ClientID { get; set; }

[DisplayName("Code")]

[Required]

public string LocationCode { get; set; }

[Required]

public string Name { get; set; }

[DisplayName("Address 1")]

[Required]

public string Address1 { get; set; }

private string address2;

[DisplayName("Address 2")]

public string Address2

{

get => address2 ?? "";

set => address2 = value ?? "";

}

[Required]

public string City { get; set; }

[Required]

public string State { get; set; }

[Required]

public string Country { get; set; }

[DisplayName("Zip Code")]

[Required]

public string ZipCode { get; set; }

[DisplayName("Phone")]

[Required]

public string PhoneNumber { get; set; }

[UIHint("OrderTypeIDs")]

[DisplayName("Allowed Order Types")]

public IEnumerable<int> OrderTypeIDs { get; set; }

[DisplayName("# of O Types")]

[ReadOnly(true)]

public int OrderTypeCount => OrderTypeIDs?.Count() ?? 0;

[ScaffoldColumn(false)]

public string CreatedBy { get; set; }

[ScaffoldColumn(false)]

public DateTime CreatedOn { get; set; }

[ScaffoldColumn(false)]

public string LastUpdatedBy { get; set; }

[ScaffoldColumn(false)]

public DateTime LastUpdatedOn { get; set; }

public event PropertyChangedEventHandler PropertyChanged;

}

MultiSelect

answered on 18 Dec 2018

3 answers

89 views

EditorTemplate Example for BitMask field

Does anyone have an example of an EditorTemplate for a Grid that handles a BitMask field?

Thanks

M

Grid

answered on 18 Dec 2018

1 answer

132 views

How to sum per row plus previous row using row index

Hi,

could you help me about following calculations in the grid for telerik asp.net core (C#)

IN - OUT = SALDO (for row index 0)
IN - OUT = SALDO (for row index 1) + SALDO from previous row

image example attached

Grid

answered on 13 Dec 2018

4 answers

1.3K+ views

grid only show 20 rows

My grid only show max 20 row

It does not matter if paging is disabled

<kendo-grid name="grdAfdeling" selectable="true" on-change="onChangeAfdeling" deferred="true">
            <datasource server-operation="false" type="DataSourceTagHelperType.Ajax">
                <transport>
                    <read url="/Medarbejder/Hent_Medarbejder_Afdeling" data="hentAfdID" />
                </transport>
            </datasource>
            <scrollable enabled="false" />
            <columns>
                <column field="ID" hidden="true" />
                <column field="Navn" title="Navn" />
                <column field="Lokalnr" title="Lokalnr." width="80" />
                <column field="Mobilnet" title="Mobil Lokalnr." width="90" />
                <column field="Mobilnr" title="Mobilnr." />
                <column field="Email" title="Email" />
                @if (User.IsInRole("w_Paaroerende"))
                {
                <column field="Familie" title="Familie" encoded="false" />
                }
                <column field="BilledUrl" title="Billed" template="<img src='#= BilledUrl #' alt='image' width='70' />" />
            </columns>
        </kendo-grid>

Grid

answered on 13 Dec 2018