Questions on UI for ASP.NET MVC Forum

8 answers

622 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

144 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

136 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

81 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

159 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

172 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

5 answers

480 views

Custom Template with Databound Resources

Hi guys
I've been having some problems with kendo scheduler passing the data from the create new meeting moal popup to the controller. I have an MVC solution where the user should select a location, my control will call off to the server to get a list of resources for that location. All working as expected except that my custom template for the modal popup won't pass the RoomID to the controller to create a new meeting room. Here is some of my code

Razor MVC

@(Html.Kendo().Scheduler<MeetingViewModel>()

.Name("scheduler")

.Date(startOfWeek)

.StartTime(startOfWeek.AddHours(8))

.EndTime(startOfWeek.AddHours(18))

.Height(670)

.AllDaySlot(false)

.Editable(e => e.TemplateId("customTemplate").Destroy(false).Create(true).Move(false).Resize(false).Update(false))

//.Editable(e => e.Destroy(false).Create(true).Move(false).Resize(false))

.Events(e =>

{

e.Save("scheduler_save");

})

.Views(views =>

{

views.DayView(x => x.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));

views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));

})

.Timezone("Etc/GMT")

.Resources(resource =>

{

resource.Add(m => m.RoomID)

.Title("Room")

.DataTextField("ResourceName")

.DataValueField("RoomID")

.DataColorField("ResourceColour")

.Multiple(false)

.DataSource(x => x.Read(s => s.Data("GetRoomFromDropdown").Action("Rooms_Get", "ExchangeCalendar", new { Area = string.Empty })));

})

.DataSource(d => d

.Events(x => x.RequestEnd("check_response"))

.Model(m =>

{

m.Id(f => f.MeetingID);

m.Field(f => f.Title).DefaultValue("No title");

m.RecurrenceId(f => f.RecurrenceID);

m.Field(f => f.Title).DefaultValue("No title");

})

.Read(x => x.Data("GetRoomFromDropdown").Action("Rooms_Read", "ExchangeCalendar", new { Area = string.Empty }))

.Create("Rooms_Create", "ExchangeCalendar", new { Area = string.Empty })

)

CustomTemplate

@*TEMPLATE FOR MODAL POPUP*@

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

<div class="k-edit-label">

<label for="title">Title</label>

</div>

<div class="k-edit-field" data-container-for="title">

<input type="text" class="k-input k-textbox" name="title" data-bind="value: title" />

</div>

<div class="k-edit-label">

<label for="start">Start</label>

</div>

<div class="k-edit-field" data-container-for="start">

<span style="display: none;" class="k-widget k-datetimepicker k-header">

<span class="k-picker-wrap k-state-default">

<input type="text" data-bind="value: start, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>

</span>

</span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: start, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind=" text: startTimezone"></span><span class="k-invalid-msg" data-for="start" style="display: none;"></span>

</div>

<div class="k-edit-label">

<label for="end">End</label>

</div>

<div class="k-edit-field" data-container-for="end">

<span style="display: none;" class="k-widget k-datetimepicker k-header">

<span class="k-picker-wrap k-state-default">

<input type="text" data-bind="value: end, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>

</span>

</span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: end, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind=" text: endTimezone"></span><span class="k-invalid-msg" data-for="end" style="display: none;"></span>

</div>

<div class="k-edit-label">

<label for="roomID">Room</label>

</div>

<div data-container-for="RoomID" class="k-edit-field" id="resourcesContainer"></div>

<script>

jQuery(function () {

var container = jQuery("\#resourcesContainer");

var resources = jQuery("\#scheduler").data("kendoScheduler").resources;

console.log(resources[0].dataSource._data);

jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[0].field))

.appendTo(container)

.kendoDropDownList({

dataTextField: resources[0].dataTextField,

dataValueField: resources[0].dataValueField,

dataSource: resources[0].dataSource,

valuePrimitive: resources[0].valuePrimitive,

optionLabel: "N1one",

template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[0].dataColorField, resources[0].dataTextField)

});

})

<\/script>

</script>

The Title, StartDate, EndDate are all coming through as the correct values but the RoomID is coming through NULL.
When I create a simple select like is passes the value correctly

<select name="RoomID" data-bind="value:RoomID">

<option value="2">Yo</option>

<option value="4">Blah</option>

<option value="6">Blah</option>

</select>

Any pointers?

Scheduler