Questions on UI for ASP.NET Core Forum

2 answers

647 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

161 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

155 views

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

1 answer

254 views

Bootstrap 4 update needed for Color Theme Sass Tool ?

I using VS 2017 15.9.3 + asp.net core + mcv ( + razor )

created the project with telerik Project Asp.net core + Grid selection.and created 3 times with the sass theme generator a template and replaced in

_Layout.cshtml the stylesheet

<environment names="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <!--link rel="stylesheet" href="~/css/site.css" /-->
    <link rel="stylesheet" href="~/css/all.css" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <!--link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /-->
    <link rel="stylesheet" href="~/css/all.css" asp-append-version="true" />
</environment>

but anyhow the Grid looks ugly in the footer any time.

i found this blog https://www.telerik.com/blogs/getting-started-telerik-ui-for-asp-net-core-and-bootstrap-4

but i do not understand how to do the update

>>No matter how you choose to manage your dependencies, the default layout (i.e _Layout.cshtml) should contain references to them. The default layout >>defines a top level template for views in your web application. These references include the following:

where to store the references , where to reference them etc..

it´s a little bit confusing me so please is there some better help tan this how to update or maybe it´s not needed anyhow to solve the grid ui problem ?

thanks br thomas

General Discussions

answered on 11 Dec 2018

2 answers

362 views

[Solved] Cascading binding and tag helpers

I am having some strange issue with cascading binding.

This code here does work:

<kendo-dropdownlist name="Countries" bind-to="@(new SelectList(Model.Countries,"Id","CountryName"))"></kendo-dropdownlist>

@(Html.Kendo().DropDownList()

.Name("DocumentTypes")

.DataTextField("Name")

.DataValueField("Id")

.BindTo(Model.GovIdTypes)

.CascadeFrom("Countries")

.CascadeFromField("IssuingCountry.Id")

)

But this one does not:

<kendo-dropdownlist name="Countries" bind-to="@(new SelectList(Model.Countries,"Id","CountryName"))"></kendo-dropdownlist>

<kendo-dropdownlist name="DocumentTypes" bind-to="@(new SelectList(Model.GovIdTypes,"Id","Name"))" cascade-from="Countries" cascade-from-field="IssuingCountry.Id"></kendo-dropdownlist>

I don't know why I cannot se the tag helper here.

The first dropdown I got to work with tag helper but the second one not.

DropDownList

answered on 08 Dec 2018

1 answer

107 views

Place variable in title

As you have read the title. I want to add a variable in my title. When I put a property in my model, and also define the model in my div. It still gives me the error:

The name 'property' does not exist in the current. But when I add series for example I can do Model => Model.propname Why is it not possible to do this? sTotalCount is in Model2
The code:

@model model1

<div class="demo-section k-content wide">

@(Html.Kendo().Chart<App.Model2>()

.Name("test" + Model1.ID)

.Title(sTotalcount + "this is the total")

General Discussions

answered on 07 Dec 2018

3 answers

109 views

Line plotband

Hello,

I want for my bar to have a Y-axis line. Just the same as this Dojo Example

I have removed the first plotband so only the line will be visible. But then I see this:

from: 30000,

to: 30500,

Is there a way to just set it at 30000 and not to 35000?

Kind regards

General Discussions

answered on 07 Dec 2018

4 answers

2.7K+ views

Resize IFrame window based on size of parent

Hi! I'm using IFrame windows for modal forms and want to be able to resize the modal window dynamically, based on the size of the calling parent.

Here is the calling parent:

@page

@addTagHelper "*, Kendo.Mvc"

@model MySite.Test.CustomerModel

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Customer</title>

<link href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.aspnetmvc.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.timezones.min.js"></script>

</head>

<body>

@{

string[] actions = new string[] { "Close" };

}

<kendo-window name="addEditCustomer"

modal="true"

title="Add a New Customer"

draggable="true"

iframe="true"

resizable="true"

on-close="onClose"

style="display:none"

actions="actions">

<content>

loading user info...

</content>

<popup-animation enabled="true" />

</kendo-window>

<a href="javascript:void(0);" onclick="openWindow(5)" class="btn btn-sm btn-outline-primary right">Click here to open the window.</a>

<div class="responsive-message"></div>

<script>

function onClose() {

//alert("closed");

}

function openWindow(id) {

var url = "/test/testaddcustomer?id=" + id;

$("#addEditCustomer").data("kendoWindow").refresh({ url: url }).title("Edit Customer");

$("#addEditCustomer").data("kendoWindow").open();

$("#addEditCustomer").data("kendoWindow").center();

}

</script>

</body>

</html>

And here is the window page:

@page

@model MySite.Test.AddCustomerModel

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>@ViewBag.Title</title>

<link rel="stylesheet" href="~/css/bootstrap.css" asp-append-version="true" />

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

<link href="~/lib/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet" />

<script src="~/js/site.js" asp-append-version="true"></script>

<script src="~/js/bundle.js"></script>

<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

</head>

<body>

<div>

<br />

<h2>TestAddCustomer</h2>

<p> This would be a form to add the customer.</p>

</div>

</body>

</html>

<script>

$(document).ready(function () {

//var showWidth = $(window).parent.width()*.8;

//var showHeight = $(window).parent.height() * .8;

var showWidth = 400;

var showHeight = 400;

window.parent.$("#addEditCustomer").data("kendoWindow").setOptions({ width: showWidth, height: showHeight });

window.parent.$("#addEditCustomer").data("kendoWindow").center();

});

</script>

I am able to get the width and height to set to static values (400x400) and recenter, but I'd like to get the height dynamically, as in the commented lines.

Any help would be much appreciated!

Window

answered on 06 Dec 2018

3 answers

1.7K+ views

[Solved] Styling the Panel behind the Toolbar Buttons

I cannot figure out how to color the background of the Toolbar in a Kendo UI Grid. I can style the buttons but I want the <div> or panel behind the buttons to be a different color that what you see in the attachment, white.

Thanks

Grid

answered on 06 Dec 2018