Questions on UI for ASP.NET MVC Forum

3 answers

924 views

Hi,

I am using the file upload template to customize the file upload. Currently Async is set to false, so on select event I am displaying the template. But I want to use the in built function which displays the file size. I am using the below template but I don't want to display the file size in bytes. Is there a way I can achieve this? I created a custom function called formatFileSize() but I want to utilize the inbuilt function if available.

<script type="text/javascript">

I am using the below version of Kendo Mvc
2017.3.1018.545

Upload

answered on 07 Jun 2018

4 answers

806 views

[ScaffoldColumn(false)] column ignored by Grid

HI

I have define a model with a [ScaffoldColumn(false)] column :

[ScaffoldColumn(false)]
public string Column1 { get; set; }

but when I want to show this column in grid but that column not shown :

columns.Bound(column => column.Column1).Width(100);

After remove the [ScaffoldColumn(false)] from that column,
the column shown correctly.

[ScaffoldColumn(false)] column ignored by Grid internally even if Bound explicitly ?

How could I show the [ScaffoldColumn(false)] column using Bound column ?

Best regards

Chris

Grid

answered on 07 Jun 2018

1 answer

614 views

Disable and/or Hide specific button

Is it possible to disable/hide a specific button within the ButtonGroup?

ButtonGroup (Mobile)

answered on 07 Jun 2018

2 answers

327 views

Allow ButtonGroupFor and Data Binding

I find this particular component anti-MVC as it is not offering features compared to every other Kendo UI MVC components. I need to have it bind to a model's property and generate button(s) from a data source. Each generated button can be customized like a Grid's columns are customized using the HtmlHelper. This is how I use it right now:

<div class="row">

<div class="col-sm-12">

<div class="form-group">

@Html.LabelFor(m => m.PaymentModeId, new { @class = "control-label" })

@(Html.Kendo().ButtonGroup()

.Name("PaymentModeTest")

.HtmlAttributes(new { @class = "form-control" })

.Selection("single")

.Index(0)

.Items(t =>

{

t.Add().Text("Cash");

t.Add().Text("Cheque");

t.Add().Text("Debit");

t.Add().Text("Free");

t.Add().Text("Credit Card");

t.Add().Text("eDirham");

})

.Events(ev => ev.Select("UpdateUiPaymentMode"))

)

</div>

Here is the binding trick:

<input type="hidden" name="PaymentModeId" id="PaymentModeId" value=1 />

And the JS:

@section Scripts

{

<script type="text/javascript">

$(document).ready(function () {

$('#divPaymentModeCheque').hide();

$('#divPaymentModeDebit').hide();

$('#divPaymentModeCreditCard').hide();

$('#divPaymentModeEDirham').hide();

});

function UpdateUiPaymentMode(e) {

// 0: Cash, 1

// 1: Cheque, 2

// 2: Debit, 3

// 3: Free, 4

// 4: Credit Card, 5

// 5: e-Dirham, 9

$('#divPaymentModeCheque').hide();

$('#divPaymentModeDebit').hide();

$('#divPaymentModeCreditCard').hide();

$('#divPaymentModeEDirham').hide();

switch (e.indices.toString()) {

case "0":

// Cash

$('#PaymentModeId').val(1);

break;

case "1":

// Cheque

$('#divPaymentModeCheque').show();

$('#PaymentModeId').val(2);

break;

case "2":

// Debit

$('#divPaymentModeDebit').show();

$('#PaymentModeId').val(3);

break;

case "3":

// Free

$('#PaymentModeId').val(4);

break;

case "4":

// Credit Card

$('#divPaymentModeCreditCard').show();

$('#PaymentModeId').val(5);

break;

case "5":

// eDirham

$('#divPaymentModeEDirham').show();

$('#PaymentModeId').val(9);

break;

}

</script>

}

ButtonGroup (Mobile)

answered on 07 Jun 2018

3 answers

1.2K+ views

binding a dropdownlist to a column of a Grid thats inside a Popup editor

Here is the scenario.

I have an Index page with a Grid. The Grid's popup displays another Grid. And I'm using Inline editing in this popup grid. I'm trying to bind a column to a . When trying to bind it using the ClientTemplate grid in Inline edit mode the editor doesn't appear. Instead, the page breaks and displays on the Index page itself. If I comment the ClientTemplate line, everything works fine.

Is it possible to display a in an InLine editing of a Popup Grid?

Below is the relevant code snippets from my project.

Index.html - this page has a grid containing a list of records and I used a popup for editing data. This uses MembersEditorTemplate.cshtml for editing data.

@(Html.Kendo().Grid<Aamva.Api.Common.WebSite.Models.WebUser>()

.Name("membersGrid")

.Columns(columns =>

{

columns.Command(command => { command.Edit(); command.Destroy().Text("DeleteCustomer"); }).Width("15%");

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

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

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

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

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("MembersEditorTemplate").Window(w => w.Title("Edit Employee")))

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

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

.Read(read => read.Action("ListMembers", "Home"))

.Destroy(destroy => destroy.Action("DeleteCustomer", "Home"))

.Update(update => update.Action("PopupUpdate", "Home"))

)

MembersEditorTemplate.cshtml - this editor template again contains a grid and the editing in this grid is InLine
This grid has a column that displays AddressTypeName
For this, I used ClientTemplate and referred the Object type UserAddressType.AddressTypeName
If I comment the ClientTemplate line, everything works fine.

<div class="row" style="margin-left:10px;">

@(Html.Kendo().Grid<Models.WebUserAddress>()

.Name("addressGrid")

.Columns(columns =>

{

columns.Command(command => { command.Edit(); command.Destroy(); }).Width("15%");

columns.Bound(model => model.UserAddressType).ClientTemplate("#= UserAddressType.AddressTypeName #");

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

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

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

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

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

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

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

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

.Read(read => read.Action("ListAddresses", "Home").Data("getCurrentCstKey"))

.Destroy(destroy => destroy.Action("DeleteAddress", "Home"))

.Update(update => update.Action("UpdateAddress", "Home"))

.Create(create => create.Action("AddAddress", "Home"))

)

.ToolBar(toolBar =>

{

toolBar.Create();

})

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

)

</div>

AddressTypeEditor.
This has a DropDownList that refers to all the available Address Types.

@model Models.WebUserAddressType

@(Html.Kendo().DropDownList()

.Name("UserAddressType")

.DataTextField("AddressTypeName")

.DataValueField("AddressTypeKey")

.DataSource(d => d

.Read("GetAllAddressTypes", "Home")

)

ViewModels are as below
Used UIHint as AddressTypeEditor

public class WebUserAddress

{

[UIHint("AddressTypeEditor")]

public WebUserAddressType UserAddressType { get; set; }

public string AddressLine1 { get; set; }

public string AddressLine2 { get; set; }

public string City { get; set; }

public string State { get; set; }

public string Country { get; set; }

}

public class WebUserAddressType

{

public string AddressTypeKey { get; set; }

public string AddressTypeName { get; set; }

}

Is it possible to display a in an InLine editing of a Grid(Grid that is inside a Popup)?

Grid

answered on 06 Jun 2018

3 answers

169 views

Documentation for Kento

Hello,

We would like to use Telerik for our applications but need to read a good documentations how to start to create in chtml, we are using Razor for right now. How to convert from Razor to Kento like dropdownlist using model and ajax?

Thank you!

General Discussions

answered on 06 Jun 2018

4 answers

722 views

Fixed column width with grouping enabled

Good morning,

I've currently got an issue with fixed column widths not being respected when I use grouping. I can see that the grid table has a table-layout value of fixed and understand from the docs why the behaviour I'm seeing is happening. When a table has a layout value of fixed, the column gets its width from the first row in the table. When grouping is enabled, the first row contains a td which spans the whole row and therefore there is no fixed width to apply to the column.

Please see this Fiddle which demonstrates my issue.

The first table allows fixed column widths as expected.

The second table has a first row spanning all columns (as per a grid with grouping enabled) and disregards the column width.

The third table is the only way I've been able to resolve the issue so far, by adding a row above the row containing the spanned column and removing all spacing in order to 'hide' it.

Could you please advise whether there is any other way to resolve this issue? If not, could this functionality (i.e. adding a 'hidden' column) possibly be added to the Grid?

Many thanks for your assistance.

Antony

Grid

answered on 06 Jun 2018

1 answer

788 views

Excluding enum values from grid column filter

Hello! I have a scenario in which i have a dropdownlist (in a column) with enum-values for filtering. The data that gets sent to the grid only contains items whose order status is of the UsefulUiValue variety, but since the property OrderStatus is MyEnum, all of the enum values are added to the filter-dropdown for the column. Is there any way to tell the filter or the grid to only take the enum values i want?

01.public enum MyEnum

02.{

03. UsefulUiValue1, //Useful for filtering in the grid

04. UsefulUiValue2, //Useful for filtering in the grid

05. UsefulUiValue3, //Useful for filtering in the grid

06. Value4, //Not useful for filtering in the grid (should be excluded from dropdown filter)

07. Value5, //Not useful for filtering in the grid (should be excluded from dropdown filter)

08.}

09.

10.public class MyClass

11.{

12. public MyEnum OrderStatus { get; set; }

13. public DateTime OrderDate { get; set; }

14. public decimal OrderSum { get; set; }

15.}

Grid

answered on 06 Jun 2018

6 answers

587 views

Grid Grouping by Foreign Key - Group header wrong

I'm trying to enable grouping by a foreign key column. However, a default Ajax setup will display the id of the column, not the display text for the group header. With server binding, the group header displays as expected. With Ajax binding however, it won't.



Using Kendo 2012.2.607. I know this used to work with Telerik, used it all the time.


@(Html.Kendo().Grid(Model.Users)
    .Name("Users")
    .DataSource(c => c.Ajax()
        .Read("_Roles", "Users")
        .Group(g => g.Add(o => o.RoleId)))
    .Columns(c => {
        c.Bound(o => o.UserName);
        c.ForeignKey(o => o.RoleId, Model.Roles);
        c.Bound(o => o.IsActive);
    })
    .Sortable()
    .Filterable()
    .Groupable()
    .Pageable())



With this, the group headers will read as "Role: 1", "Role: 2" and so on.  Expected "Role: Admin", "Role: User", etc. Can't really find any options to fix this. Trying to add a ClientGroupHeaderTemplate doesn't work either - always yields an error about whatever value being undefined. The anonymous function called to display the template has no real data to display the correct label.




c.ForeignKey(o => o.RoleId, Model.Roles)
    .ClientGroupHeaderTemplate("#= Title #");



Edit - I setup a jsfiddle here to illustrate.

Grid

answered on 05 Jun 2018

1 answer

246 views

Displays my DateTime picker along with a textbox with the value of the datetimepicker

Hello,

I'm presently using asp.net core Kendo DateTimePicker control -

@(Html.Kendo().DateTimePickerFor(m => m.DateTime)
.HtmlAttributes(new { style = "width:300px;", id = "DateTime" })
.Value(Model.DateTime)
)

Also, I have a hidden variable in the form,

<input type="hidden" asp-for="DateTime" />

The problem here is it displays two controls, it gets and sets the data in the right way! Would appreciate any help! Thanks in advance!

Date/Time Pickers

answered on 04 Jun 2018