Questions on UI for ASP.NET MVC Forum

6 answers

261 views

As pictured, I have 2 grids next to each other. On the left, I have a list of people who are in a group. On the right, I have a list of people who are not in the group but instead are candidates that could be added. I need to add people to the group by selecting one or multiple on the right grid then, on button press, all users should be should be added to the group. In the same way, those who are members of the group should be selectable in the same way and on button press, I should be able to remove all selected members.

Do you have a working example of this type of behavior? Where do I put the Add/Delete buttons? Must they be a custom button built into the grid or can they be separate from the grid? Must I perform a round-trip refresh after an Add/Delete action or can the control remain in play on the client?

Thanks in advance for your help,

Joel

Grid

answered on 25 Mar 2020

9 answers

708 views

German Umlaut in Client Detail Template

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

656 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.7K+ 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

160 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

156 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

84 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

164 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">