Questions on UI for ASP.NET MVC Forum

9 answers

700 views

Hello,

in my application I use a grid that works with client detail template via ClientDetailTemplateId property. In the client detail template I want to show a label with german umlauts like:

@Html.Label("olb_currentaccount_overdraftcommission", "Überziehungsprovision", new { @class = "detail-label" })

Whenever there is a german umlaut in the label text I receive an invalid template exception. The raw HTML code looks like this:

<label class="detail-label" for="olb_currentaccount_overdraftcommission">&';220;berziehungsprovision</label>

Is there any way to use german umlauts for a HTML label in a client detail template?

Any help is appreciated.

Regards

Raphael

Grid

answered on 23 Mar 2020

8 answers

643 views

Grid Column, filterable.UI with Foreign Key Column

I'm tyring to customize the UI that appears when filtering a foriegn key column on the grid. It seems that when I specify a javascript function (like below) for customization as mentioned at the following url (https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization) it doesn't get called.

.Filterable(filterable => filterable.UI("customFilter"))

If I add the same lines to a non-foreign key column the function gets called.

Is there something different that needs to be done for Foreign Key Columns?

Grid

answered on 23 Mar 2020

3 answers

2.6K+ views

How to add TabStrip in Layout and create dynamic tabs

Hi All

I have an idea i want to create a web page with Tabstrip and Layout page will be tabstrip , when i select new page from menu it will create new Tab and show view inside that and if its created no need to destroy and create again?

Is it possible to do this with Kendo TabStrip ?

Thanks

TabStrip

answered on 20 Mar 2020

30 answers

1.2K+ views

Multi-function Toolbar?

Hi All,

Just wondering if kendo can have multifunction toolbar.

I know that its not out of the box but wanted to know if toolbar cable of

- Adding Field drowpdown with search

- breadcrumb based on dynamic filter set by user

- client can add as many condition as he want

Note that toolbar.ClientTemplate(@<text>html template here</text> is giving me error on my Razor page

Please see screenshot taken from SeviceNow

Thanks!

Ryan

Grid

answered on 20 Mar 2020

1 answer

152 views

Basic setup in an MVC project

I see the demo and the setup instructions make no sense to me because the JS that is checking existing theme goes as:

<script>

$(document).ready(function () {

// Initialize ripple container

if (kendoTheme == "material-v2") {

$(".row").kendoRippleContainer();

$(".demo-section").show();

} else {

$(".demo-section").hide();

}

});

</script>

Now, I have just the kendo.material-v2.min.css referenced after bootstrap.css. I'm using the files that are installed and not the SCSS or nugets. What is kendoTheme variable? If my site has only the one css reference to kendo.material-v2.min.css (but also has reference to bootstrap v3.3.7 before) how do I setup the ripple site-wide? Do i need to get rid of old bootstrap? Do I need to use kendo's bootstrap (or common)?

Ripple

answered on 20 Mar 2020

1 answer

145 views

Gantt task delete action button is not clickable if progress at 100% when bootstrap 4 theme is used

We are using Gantt in our project, the added tasks are using a template and we noticed that when the task progress covers the delete task button and it is not clickable anymore.

The template is similar to the one below:

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

<div class="template">

<div class="wrapper">

<strong class="title">#= title # </strong>

<span class="resource">no resource assigned</span>

</div>

<div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div>

</div>

</script>

I have tried to reproduce this issue in the Kendo Dojo and noticed that it is reproducible only when bootstrap 4 is used (for bootstrap 3 works fine). Here is the link to the kendo dojo where I was able to reproduce this issue: https://dojo.telerik.com/eyutamel

Please help me get the functionality for the delete (k-task-delete) on the task.

Thank you in advance!

Gantt

answered on 18 Mar 2020

4 answers

82 views

SetWidth on multiple column ranges at once

Is there a way to SetWidth() on multiple column ranges at once? Kind of like below:

//get columns 0 to 2, 5 to 10 and 26 to 29 and set width

worksheet.Columns[0,2].Columns[5,10].Columns[26,29].SetWidth(new ColumnWidth(400, true));

Spreadsheet

answered on 17 Mar 2020

21 answers

1.5K+ views

Default create command in toolbar template

Hello,

I want to put the default button with the create command in a toolbar template with razor. How is this possible? I use the popup mode for editing.

Grid

answered on 14 Mar 2020

9 answers

161 views

Cannot migrate standard RadioButtons and DropDowns to Kendo UI

I cannot successfully migrate this code to Kendo UI:

<div class="form-group">

<div class="col-md-3 col-lg-offset-2">

@Html.RadioButtonFor(m => m.IsNewDeveloper, false, new { @onchange = "chooseExisting(event)" }) Choose from existing developers

</div>

<div class="col-md-3">

@Html.RadioButtonFor(m => m.IsNewDeveloper, true, new { @onchange = "addNew(event)" }) Add a new developer

</div>

<div class="form-group">

@Html.LabelFor(m => m.AssignedDeveloper.Email, new { @class = "col-md-2 control-label" })

<div class="col-md-10">

@Html.DropDownList("ExistingDeveloper", new SelectList(Model.DeveloperEmails), "Select an email", new { @class = "form-control", @onchange = "existingDevSelected(event)" })

@Html.TextBoxFor(m => m.AssignedDeveloper.Email, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.AssignedDeveloper.Email)

</div>

<div class="form-group">

@Html.LabelFor(m => m.AssignedDeveloper.FirstName, new { @class = "col-md-2 control-label" })

<div class="col-md-10">

@Html.TextBoxFor(m => m.AssignedDeveloper.FirstName, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.AssignedDeveloper.FirstName)

</div>

<div class="form-group">

@Html.LabelFor(m => m.AssignedDeveloper.LastName, new { @class = "col-md-2 control-label" })

<div class="col-md-10">

@Html.TextBoxFor(m => m.AssignedDeveloper.LastName, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.AssignedDeveloper.LastName)

</div>

<script type="text/javascript">

$(function () {

if ('@Model.IsNewDeveloper' === 'True') {

addNew();

} else {

chooseExisting();

}

});

function chooseExisting(e) {

$('input#AssignedDeveloper_Email').hide();

$('select#ExistingDeveloper').show();

$('#AssignedDeveloper_FirstName').attr('readonly', 'readonly');

$('#AssignedDeveloper_LastName').attr('readonly', 'readonly');

// if was triggered by user, clear previous values

if (e) {

if ($('select#ExistingDeveloper').val()) {

existingDevSelected();

} else {

$('#AssignedDeveloper_FirstName').val('');

$('#AssignedDeveloper_LastName').val('');

}

function addNew(e) {

$('select#ExistingDeveloper').hide();

$('input#AssignedDeveloper_Email').show();

$('#AssignedDeveloper_FirstName').removeAttr('readonly');

$('#AssignedDeveloper_LastName').removeAttr('readonly');

// if was triggered by user, clear previous values

if (e) {

$('input#AssignedDeveloper_Email').val('');

$('#AssignedDeveloper_FirstName').val('');

$('#AssignedDeveloper_LastName').val('');

}

function existingDevSelected() {

// populate email input with the selected one

var selectedEmail = $('select#ExistingDeveloper').val();

$('input#AssignedDeveloper_Email').val(selectedEmail);

// populate first and last names

$.post('@Url.Action("GetDeveloperNames", "Licenses")' + '?email=' + selectedEmail, getAntiForgery())

.done(function (res) {

if (res.firstName && res.lastName) {

$('#AssignedDeveloper_FirstName').val(res.firstName);

$('#AssignedDeveloper_LastName').val(res.lastName);

} else {

// if for some reason a user is not found with this email, go to adding a new user

addNew();

$('#AssignedDeveloper_FirstName').val('');

$('#AssignedDeveloper_LastName').val('');

}

});

}

</script>

Here is the new version:

<div class="form-group">

@Html.Label(" ", new { @class = "col-md-2 control-label" })

<div class="col-md-3">

@Html.Kendo().RadioButtonFor(m => m.IsNewDeveloper).Checked(false).HtmlAttributes(new { onchange = "chooseExisting(event)"}) Choose from existing developers

</div>

<div class="col-md-3">

@Html.Kendo().RadioButtonFor(m => m.IsNewDeveloper).Checked(true).HtmlAttributes(new { onchange = "addNew(event)"}) Add a new developer

</div>

<div class="form-group">

@Html.LabelFor(m => m.AssignedDeveloper.Email, new { @class = "col-md-2 control-label" })

<div class="col-md-10">

@Html.Kendo().DropDownList().BindTo(Model.DeveloperEmails).OptionLabel("Select an email").Name("ExistingDeveloper").Events(e=>e.Change("existingDevSelected")).HtmlAttributes(new { style = "width: 280px" })

@Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.Email).HtmlAttributes( new {style = "width: 280px"} )

@Html.ValidationMessageFor(m => m.AssignedDeveloper.Email)

</div>

<div class="form-group">

@Html.LabelFor(m => m.AssignedDeveloper.FirstName, new { @class = "col-md-2 control-label" })

<div class="col-md-10">

@Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.FirstName).HtmlAttributes( new { style = "width: 280px" })

@Html.ValidationMessageFor(m => m.AssignedDeveloper.FirstName)

</div>

<div class="form-group">

@Html.LabelFor(m => m.AssignedDeveloper.LastName, new { @class = "col-md-2 control-label" })

<div class="col-md-10">

@Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.LastName).HtmlAttributes(new{ style = "width: 280px"})

@Html.ValidationMessageFor(m => m.AssignedDeveloper.LastName)

</div>

The javascript code is not called properly. Why?

I'm attaching the original working code. Thanks,

Alberto

DropDownList

answered on 13 Mar 2020

1 answer

181 views

Restoring default state

We are using getOptions and setOptions to allow the user to persist there current selections for column that are displayed, filters, etc. We are reloading this persisted stated when the page loads. How do get it to restore to the original default state? We would like a button that causes the state to go back to the default state.

Grid

answered on 13 Mar 2020