Questions on UI for ASP.NET MVC Forum

1 answer

629 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

341 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

179 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

761 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

815 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

600 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

260 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!

DatePicker

answered on 04 Jun 2018

1 answer

120 views

Plot scatter chart where the data should be plotted time(example:12:45:12) vs weekday(Monday).

Hi,
I am working on the scatter chart where the data should be plotted time(example:12:45:12) vs weekday(Monday).Where X-axis is Weekdays from Monday to Friday and Time is y-axis 9:00 am to 4:00 pm with Interval of 1 hour. I did not found any examples on this unable to achieve this.
Below is the sample code Kindly help me in this regard.

Thanks & Regards,
Sampath

<div class="roundbox" style="width:450px; height:350px; border: solid 5px steelblue; float:right; margin-top:10px; margin-bottom:20px">
            @(Html.Kendo().Chart<AdvantEdgePortal.Web.ViewModels.DayTimeStamp>()

          .Name("chartcallTimings")
          .Title("Call Timings")

            .DataSource(dataSource => dataSource.Read(
                    read => read.Action("GetCallDataCompletionTime", "Home"))
            )
          .Legend(legend => legend
              .Position(ChartLegendPosition.Bottom)
          )
          .SeriesDefaults(seriesDefaults => seriesDefaults
              .Scatter().Labels(labels => labels
                  .Visible(false)
              )
          )

          .Series(series =>
          {
              series.Scatter(m => m.WeekDay, m => m.TimeofDay);
              //series: [{ type: "scatterLine", name: "3.1C", data: [[10, 70], [13, 90], [25, 100]], dashType: "dot" }]
          }

      )
          .CategoryAxis(axis => axis
          .Categories("Monday", "Tuesday", "Wednesday", "Thrusday", "Friday")
          .MajorGridLines(lines => lines.Visible(false))
           .Categories(c => c.WeekDay)
          )
         .ValueAxis(axis => axis
                .Numeric()
                .MajorUnit(1)
                .Min(9)
                .Max(16)
                .Labels(labels => labels.Format("{0:N0}:00"))
            .Line(line => line.Visible(true))
            )

            .ChartArea(chartArea =>
            {
                chartArea.Height(340);
                chartArea.Width(440);
                chartArea.Margin(5);
            })

            )

        </div>

Chart

answered on 01 Jun 2018

3 answers

842 views

kendoValidator and AddModelError

Hello.

I'm using kendoValidator to display all my validation errors with the kendo validation template. Using this:

<script>

$(function () { $("form").kendoValidator();});

</script>

But I have certain errors that I handle server side in the controller. Because they are kind of complex. And then I added the errors to the model this way:



ModelState.AddModelError("Hours", "The hours and the minutes can't be both 0.");

But if I add an error this way it is displayed with the standard ASP NET MVC way:

<span class="field-validation-error text-danger" data-valmsg-for="Hours" data-valmsg-replace="true">The hours and the minutes can't be both 0</span>

¿Is some kind of way to display those errors like the kendoValidator way?

In the image attached I show one error client side like kendo validation and two error's server side. I would like to all of then be like the client side error.

Thank you.

<span class="field-validation-error text-danger" data-valmsg-for="Hours" data-valmsg-replace="true">The hours and the minutes can't be both 0.</span>

General Discussions

answered on 30 May 2018