Questions on UI for ASP.NET Core Forum

1 answer

1.3K+ views

Paging not visible in modal without resizing the window

The kendo grid is not displaying the paging footer correctly if the grid is part of a modal dialog (Bootstrap Modal). It only shows one page with the possibility to move to the next one (that's working). As you can see in the attached screenshot kendo_grid_paging_wrong.png.

After a resizing event of the browser - e.g. change browser window size or show developer tool bar (F12), ... - the grid becomes displayed correctly. As you can see in the attached screenshot kendo_grid_paging_right.png.

Is this a kind of an incompatibility or bug? We use this kind of code snipped all the time outsite of modals and they do not experience this behaviour.

The associated code to display this grid is as follows:

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

.Name("accountGrid")

.ToolBar(tlb => {

tlb.Search();

})

.DataSource(dataSource => dataSource

.Ajax()

.FullCrud("AccountCrud")

.PageSize(5)

)

.Selectable(sel => sel.Enabled(true).Type(GridSelectionType.Row))

.Columns(columns =>

{

columns.Bound(i => i.Id).Width(100);

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

columns.Bound(b => b.LoginName);

columns.Bound(b => b.Description);

})

.DefaultOverview(StringLocalizer)

.Search(search =>

{

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

search.Field(f => f.LoginName);

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

})

.Pageable(p => p

.PageSizes(new[] { 5, 10, 25 })

)

Grid

answered on 08 May 2020

2 answers

923 views

How to call Export Excel externally grid

Hi to all, I would create a view to show several custom functions before grid, these functions will generate several effect to loading data into a grid.

But I would also a Export Excel button, but not above the grid, but enternally, into a div group that contains other controls.

How can I do this?

I don't want use ToolBar of grid.

Can i call a javascript code for example $("#myGrid").exportExcel(); ? Is it possibile?

Grid

answered on 08 May 2020

2 answers

271 views

Disable Autocorrect

Hey,

I know there are ways to automatically validate with a kendo validator on a form. However, when I set a min and max value on a Numeric Text Box, after leaving the text box focus, it automatically corrects the value to said range, so the validation always passes. I may be missing it, but I don't see an option with the Razor helper to disable the autocorrect. Is this an option in the .NetCore version or do I need to override this somehow in javascript? I'd like to avoid that if possible as there are numerous (34 to be exact) numeric text boxes that need similar validation. Below is a sample numeric text box.

@(Html.Kendo().NumericTextBoxFor(x=>x.PlanDefault.EmployerMatchPercentMax).Spinners(false).Value(Model.PlanDefault.EmployerMatchPercentMax ?? 0).Min(0).Max(100).HtmlAttributes(new { @class = "form-control" }))

NumericTextBox

answered on 07 May 2020

1 answer

165 views

Value DataTextField with DataAnnotations

I have a comboBox

@(Html.Kendo().ComboBox()

.Name("contactTypeDropDownList")

//.DataTextField("Type") ??

//.DataValueField("Type") ??

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetContactTypes", "ListBox");

})

.ServerFiltering(true);

})

.SelectedIndex(0)

the action returns items of enum

public IActionResult GetContactTypes()

{

var contactTypes = new List<ContactTypes>();

contactTypes.Add(ContactTypes.Company);

contactTypes.Add(ContactTypes.Person);

return Json(contactTypes);

}

this enum contains DataAnnotation with "caption"

public enum ContactTypes

{

[Display(Name = "Società")]

Company = 0,

[Display(Name = "Persona")]

Person = 1

}

how can I retrieve this "caption" into DataTextField property?

ComboBox

answered on 07 May 2020

2 answers

520 views

How to show picture into Telerik Window from array byte

I need to retrieve a product picture that it stored into ERP database.

Using EF Core I receive a byte array data for this field.

I would using a Telerik Window to click a custom button into a Grid, where user can click it to show a picture.

How can I do this?

Grid

answered on 07 May 2020

3 answers

217 views

Installed without errors but control does not work

I followed all of the instructions to install Telerik into my exising ASP.NET Core 2.1 application and it all worked fine. The application compiled fine and came up in the website, but when the Index page loaded the date picker did not work and was just a simple text box.

I did not miss any of the steps from what I can see, so I'm not sure why this would not be working.

I'm using Visual Studio 17, and this is an ASP.NET Core 2.1 application.

I'm evaluating Telerik to see if it will be a fit for my needs. The controls look great, but I need to get them working to test this out.

Any help or advice would be greatly appreciated.

Installer and VS Extensions

answered on 06 May 2020

2 answers

442 views

Timeline - Vertical - Reverse Chronological order

How can I get the timeline control to show events in reverse chronological order, I am using the control to show a vertical timeline but would like the most recent dates to appear at the top, I tried the obvious things like reversing the order of the items in the data I was sending to the control but it seems to make no difference.

Hopefully I am just missing something obvious!

Regards

Barry Compuesto

Timeline

answered on 06 May 2020

3 answers

503 views

Resize grid into a window with template

Hi to all,

I followed example in dojo to do this (example in dojo.PNG) that is exactly what I need.

In my case, instead, I'm using a text/x-kendo-template, it's an only difference between my code and example's dojo.

Instead see same effect, I found that my grid is overflowed of window perimeter (examplemy grid.PNG), to see the footer of my grid I need to scroll down at the end (end of grid overflowed.PNG)

This is my style script

style>

#itemLedgerEntriesWindow {

padding: 0;

}

#ileGrid {

border-width: 0;

height: 100%; /* DO NOT USE !important for setting the Grid height! */

}

#ileTemplate {

border-width: 0;

height: 100%; /* DO NOT USE !important for setting the Grid height! */

}

This is my code

<input type="hidden" id="purchaseKey" name="purchaseKey" value="false" />

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

<input type="hidden" id="itemNoKey" name="itemNoKey" value="#= No #" />

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

.Name("ileGrid")

.Filterable()

.AutoBind(true)

.Columns(columns =>

{

columns.Bound(f => f.DocumentNo);

columns.Bound(f => f.OrderNo);

columns.Bound(f => f.VendorNo);

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

columns.Bound(f => f.EntryType);

columns.Bound(f => f.UnitOfMeasureCode);

columns.Bound(f => f.Quantity).Format("{0:N2}").HtmlAttributes(new { style = "text-align: right;" });

})

.Sortable() // Enable sorting

.Pageable()

//.Scrollable(scrollable => scrollable.Virtual(true))

.DataSource(dataSource => dataSource //Configure the Grid data source.

.Ajax() //Specify that Ajax binding is used.

.PageSize(25)

.ServerOperation(true)

.Read(read => read.Action("LedgerEntries", "ItemLedgerEntry").Data("itemNoData"))

).ToClientTemplate()

)

</script>

@(Html.Kendo().Window()

.Name("itemLedgerEntriesWindow")

.Title("Movimenti Magazzino")

//.LoadContentFrom("GetItemLedgerEntries", "Home")

.Visible(false)

//.Iframe(true)

.Height(600)

.Width(1100)

//.Resizable()

//.Draggable()

.Modal(true)

//.Events(e=>e.Activate("onActivateIleWindow"))

)

How can I do this?

Grid

answered on 06 May 2020

3 answers

414 views

Ajax Editing in Razor Pages (not MVC)

Hi,

we try to use the Grid in Razor Pages (not MVC).

So we have only the page and the page model, not view, controller and model.

All works fine, but how to enable AJAX editing with popup form?

To define the update, create, read and destroy actions via HTML Helper, we need a Controller for the CrudOperationsBuilder. But we dont have one.

Do you have an example, how we can achieve this with Razor Pages?

Thanks in Advance

Ralf

Grid

answered on 05 May 2020

15 answers

1.6K+ views

Binding to a Core Razor Page - Here's a simple Sample

Hi,

Just putting this here in case anybody else might like to use the new Razor Pages:

Here is how I bound to a PageModel (ie no Action or Controller)

So the PageModel simply has a public property

public List<MyOjectToBindTo> {get;set;}

@(Html.Kendo().DropDownList()
.Name("size")
.BindTo(new List<MyOjectToBindTo>(Model.MyOjectToBindTo))
.DataValueField("Id")
.DataTextField("Name")
.HtmlAttributes(new { style = "width: 100%" })
)

DropDownList

answered on 05 May 2020