Questions on UI for ASP.NET MVC Forum

1 answer

239 views

When i use .Mobile(MobileMode.Phone) to get the "add scheduler entry" box to open on tablet / iPhone with one press, this work fine.

However, This same option then opens strangely on the desktop, full width. I would like the desktop to open a popup window, as it would normally do if the additional .Mobile(MobileMode.Phone) was not added. The site is a responsive site and needs this functionality.

Thank you in advance...

Scheduler

answered on 16 Mar 2015

7 answers

262 views

Custom Editor minor issues and 1 major calendar issue

Continuing my evaluation, after finding this project:
http://www.telerik.com/support/code-library/custom-editor-9fd60fca3c02

most of my questions from the previous thread about customizing the scheduler were answered. Building off the above example I have run into a few problems.

1. While the custom editor will allow me to save events to the database, the calendar will not display these events.

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

.Name("scheduler")

.Date(new DateTime(2015, 2, 1))

.StartTime(new DateTime(2015, 2, 1, 7, 00, 00))

.Height(600)

.Timezone("Etc/UTC")

.Views(views =>

{

views.DayView();

views.WeekView();

views.MonthView(monthView => monthView.Selected(true));

})

.DataSource(d => d.Model(m =>

{

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

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

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

m.Field(f => f.IsAllDay).DefaultValue(false);

})

.Read("Read", "Scheduler")

.Create("Create", "Scheduler")

.Destroy("Destroy", "Scheduler")

.Update("Update", "Scheduler")

)

.Editable(editable =>

{

editable.TemplateName("CustomEditorTemplate");

})

)

It appears to be pulling and pushing the data just fine using a clone of the the ScheduleTaskService from the demo solution, just not displaying for whatever reason.

2. After clicking save on the CustomEditorTemplate the pop-up is not closing as it does with the standard editor.

The rest of the issues are really about specific components in the CustomEditorTemplate but rather than splash all over the forums figured I would list them here.

3. DropDownList component -- is there a way to set a default/selected value. I found in my testing that if I did not change the value of the ddl it returned a null on submit.

4. MultiSelect component -- is there a way to set a ":water mark" or a "click me" a "down arrow" rather than a blank box. After you use it once it is intuitive but the first time I saw it, I thought the list didn't load.

5. DateTimePicker component -- is there a way to set the default time to something other than 12:00 AM?

6. In the CustomEditorTemplate by default it isAllDayEvent is set to true. How on earth do you change that? I tried setting the value to false, the data-val to false, and scripting I attempted broke the form so I am at a loss.

@model PokerLeagueMVCv2.Models.SchedulerViewModel

@{

//required in order to render validation attributes

ViewContext.FormContext = new FormContext();

}

@functions{

public Dictionary<string, object> generateDatePickerAttributes(

string elementId,

string fieldName,

string dataBindAttribute,

Dictionary<string, object> additionalAttributes = null)

{

Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

datePickerAttributes["id"] = elementId;

datePickerAttributes["name"] = fieldName;

datePickerAttributes["data-bind"] = dataBindAttribute;

datePickerAttributes["required"] = "required";

datePickerAttributes["style"] = "z-index: inherit;";

return datePickerAttributes;

}

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

@(Html.LabelFor(model => model.Title))

</div>

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

@(Html.Kendo().DropDownListFor(model => model.VenueId)

.Name("Venue")

.HtmlAttributes(new { data_bind = "value:VenueId", style = "width: 300px" })

.DataTextField("VenueName")

.DataValueField("VenueId")

.DataSource(source =>

{

source.Read(read => { read.Action("VenueDropDownList", "DropDownList"); });

})

)

</div>

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

@(Html.LabelFor(model => model.RegionIds))

</div>

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

@(Html.Kendo().MultiSelectFor(model => model.RegionIds)

.Name("AssignRegions")

.HtmlAttributes(new { data_bind = "value:RegionIds", style = "width: 200px" })

.DataTextField("RegionName")

.DataValueField("RegionId")

.DataSource(source =>

{

source.Read(read => { read.Action("RegionDropDownList", "DropDownList"); });

})

)

</div>

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

@(Html.LabelFor(model => model.Start))

</div>

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

@(Html.Kendo().DateTimePickerFor(model => model.Start)

.HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))

@(Html.Kendo().DatePickerFor(model => model.Start)

.HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))

<span data-bind="text: startTimezone"></span>

<span data-for="start" class="k-invalid-msg"></span>

</div>

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

@(Html.LabelFor(model => model.End))

</div>

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

@(Html.Kendo().DateTimePickerFor(model => model.End)

.HtmlAttributes(generateDatePickerAttributes(

"endDateTime",

"end",

"value:end,invisible:isAllDay",

new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

@(Html.Kendo().DatePickerFor(model => model.End)

.HtmlAttributes(generateDatePickerAttributes(

"endDate",

"end",

"value:end,visible:isAllDay",

new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

<span data-bind="text: endTimezone"></span>

<span data-for="end" class="k-invalid-msg"></span>

</div>

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

@(Html.LabelFor(model => model.IsAllDay))

</div>

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

<input id="IsAllDay" data-bind="checked: isAllDay" data-val="false" name="IsAllDay" type="checkbox" />

</div>

<div class="endTimezoneRow">

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

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

<label class="k-check">

<input checked="checked" class="k-timezone-toggle" type="checkbox" value="true" />

Use separate start and end time zones

</label>

</div>

<script>

$(".k-timezone-toggle").on("click", function () {

var isVisible = $(this).is(":checked");

var container = $(this).closest(".k-popup-edit-form");

var endTimezoneRow = container.find("label[for='EndTimezone']").parent().add(container.find("div[data-container-for='endTimezone']"));

endTimezoneRow.toggle(isVisible);

if (!isVisible) {

var uid = container.attr("data-uid");

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

var model = scheduler.dataSource.getByUid(uid);

model.set("endTimezone", null);

}

});

var endTimezone = '${data.endTimezone}';

if (!endTimezone || endTimezone == "null") {

$(".k-timezone-toggle").trigger('click');

}

</script>

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

@(Html.LabelFor(model => model.StartTimezone))

</div>

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

@(Html.Kendo().TimezoneEditorFor(model => model.StartTimezone)

.HtmlAttributes(new { data_bind = "value:startTimezone" }))

</div>

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

@(Html.LabelFor(model => model.EndTimezone))

</div>

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

@(Html.Kendo().TimezoneEditorFor(model => model.EndTimezone)

.HtmlAttributes(new { data_bind = "value:endTimezone" }))

</div>

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

@(Html.LabelFor(model => model.RecurrenceRule))

</div>

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

@(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)

.HtmlAttributes(new { data_bind = "value:recurrenceRule" }))

</div>

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

@(Html.LabelFor(model => model.Description))

</div>

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

@(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))

</div>

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

@(Html.LabelFor(model => model.Registration))

</div>

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

<input data-bind="checked: Registration" data-val="false" id="Registration" name="Registration" type="checkbox" class="k-registration-toggle" />

</div>

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

@(Html.LabelFor(model => model.MaxRegistrations))

</div>

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

@(Html.TextBoxFor(model => model.MaxRegistrations, new { @class = "k-textbox", data_bind = "value:MaxRegistrations" }))

</div>

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

@(Html.LabelFor(model => model.MaxWaitList))

</div>

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

@(Html.TextBoxFor(model => model.MaxWaitList, new { @class = "k-textbox", data_bind = "value:MaxWaitList" }))

</div>

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

@(Html.LabelFor(model => model.MaxWinsAllowed))

</div>

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

@(Html.TextBoxFor(model => model.MaxWinsAllowed, new { @class = "k-textbox", data_bind = "value:MaxWinsAllowed" }))

</div>

@{

ViewContext.FormContext = null;

}

Here is the ViewModel:

public class SchedulerViewModel: ISchedulerEvent

{

public string Title { get; set; }

private DateTime start;

public DateTime Start

{

get

{

return start;

}

set

{

start = value.ToUniversalTime();

}

private DateTime end;

public DateTime End

{

get

{

return end;

}

set

{

end = value.ToUniversalTime();

}

[DisplayName("Start Timezone")]

public string StartTimezone { get; set; }

[DisplayName("End Timezone")]

public string EndTimezone { get; set; }

public string Description { get; set; }

public bool IsAllDay { get; set; }

public string Recurrence { get; set; }

public int? RecurrenceID { get; set; }

[DisplayName("Recurrence")]

public string RecurrenceRule { get; set; }

public string RecurrenceException { get; set; }

//this is for charity events or session main events

public bool Registration { get; set; }

[DisplayName("Max Reg")]

public int MaxRegistrations { get; set; }

[DisplayName("Max Wins")]

public int MaxWinsAllowed { get; set; }

[DisplayName("Max Wait")]

public int MaxWaitList { get; set; }

//IDs

public int VenueId { get; set; }

public int EventId { get; set; }

[DisplayName("Regions")]

public ICollection<Region> RegionIds { get; set; }

public LeagueEvent ToEntity()

{

return new LeagueEvent

{

EventId = EventId,

VenueId =VenueId,

Start = Start,

End = End,

StartTimezone = StartTimezone,

EndTimezone = EndTimezone,

Description = Description,

IsAllDay = IsAllDay,

Recurrence = Recurrence,

RecurrenceID = RecurrenceID,

RecurrenceRule = RecurrenceRule,

RecurrenceException = RecurrenceException,

Registration = Registration,

MaxRegistrations = MaxRegistrations,

MaxWinsAllowed = MaxWinsAllowed,

MaxWaitList = MaxWaitList,

RegionIds = RegionIds

};

}

Any help or guidance you can provide would be greatly appreciated.

Thanks,
Chris

Scheduler

answered on 13 Mar 2015

4 answers

602 views

Refresh the content of a ClientDetailTemplateId

Hi,

Below is the beginning of the kendo grid and its template.

@(Html.Kendo().Grid<CompanyDomainView>()

.Name("customer-grid")

.ClientDetailTemplateId("customerTemplate")

........

<script id="customerTemplate" class="gridtemplates" type="text/x-kendo-tmpl">

<section>

<div class="k-widget inline-grid-box">

.....

The template have a SAVE and a CANCEL button and I have problem with the CANCEL button.
When the user makes some changes and hit the cancel button, the template content should go back and show its previous data.

I don't want to refresh all the controls in the template in code, just to remove current instance of the template from the kendo-list of created templates.
I am able to programmatically collapse and expand any row in the grid, but I don't know how to instruct kendo to forget a template.

Think this: I collapse the row, remove its created template and expand the row again and a fresh template with data from its parent (the row).
How can i do that ?
Thanks.

Grid

answered on 13 Mar 2015

1 answer

163 views

MVC Extension with Scaffolding

Hi,

I created a new project via the Telerik MVC template. When using Scaffolding to generate a controller and view for an EF domain, if there is a datetime field it'll be mapped to a Telerik DateTimePicker somehow as code in the razor view will look like this code, where at run time with 'view source' I can see the KendoUi control mentioned. My question is how to access the datetimepicker for example to add events?

<div class="form-group">

@Html.LabelFor(model => model.from_date, htmlAttributes: new { @class = "control-label col-md-2" })

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

@Html.EditorFor(model => model.from_date, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.from_date, "", new { @class = "text-danger" })

</div>

DatePicker

answered on 13 Mar 2015

1 answer

585 views

Label template of Column chart

My code:
.Series(series => {
series.Column(s => s.XXXXX)
.Overlay(ChartBarSeriesOverlay.None)
.Labels(labels => labels
.Background("transparent")
.Template("\n#= dataItem.XXXX#%\n#= dataItem.YYYY#")
.Visible(true));
})

I want to insert an image into label template. So, how to do it?

Chart

answered on 13 Mar 2015

1 answer

451 views

Grid Column TextEditor as EditorTemplate

Hi,

I am trying to use TextEditor as the EditorTemplate for Grid. When I click on Edit the column value is not being passed on the editor. Not sure what I am doing wrong. Any help is appreciated.

@(Html.Kendo()

.Grid<WellsRxWeb.Models.UserNotesModel>()

.Name("gridUserNotes")

.Columns(columns => {

columns.Bound(p => p.NotesId).Title("Id").Visible(false);

columns.Bound(p => p.UserName).Title("UserName").Visible(false);

columns.Bound(p => p.UserNoteText).Title("Notes").EditorTemplateName("TextEditor");

columns.Bound(p => p.ModifiedBy).Title("Saved By");

columns.Bound(p => p.Modified).Title("Saved").Format("{0:MM/dd/yyyy}");

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

})

.ToolBar(toolbar => { toolbar.Create(); })

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Filterable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Filterable()

.Reorderable(r => r.Columns(true))

.Resizable(r => r.Columns(true))

.ColumnMenu()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => {

model.Id(o => o.NotesId);

model.Field(p => p.UserName).Editable(false);

model.Field(p => p.ModifiedBy).Editable(false);

model.Field(p => p.Modified).Editable(false);

})

.Read(read => read.Action("UserNotes_Read", "User").Type(HttpVerbs.Get).Data("additionalData"))

.Create(create => create.Action("UserNotes_Create", "User").Data("additionalData"))

.Update(update => update.Action("UserNotes_Update", "User").Data("additionalData"))

.Destroy(destroy => destroy.Action("UserNotes_Destroy", "User").Data("additionalData").Type(HttpVerbs.Post))

.Events(events => { events.RequestEnd("gridRequestEnd"); }))

)

TextEditor.cshtml

@model WellsRxWeb.Models.UserNotesModel

@(Html.Kendo().EditorFor(model => model.UserNoteText)

.Name("TextEditor")

.HtmlAttributes(new { style = "width: 740px;height:440px" })

)

Grid

answered on 13 Mar 2015

9 answers

390 views

Scheduler Double Click on Mobile

Hello,

I use scheduler control in my project. It is like that http://demos.telerik.com/aspnet-mvc/scheduler/index
I have problem about double click event on ipad or other tablets for popup window. How I fix it ?

Scheduler

answered on 12 Mar 2015

9 answers

496 views

Escaping hash / pound / sharp inside link in ClientTemplate

I searched the forum for my issue but the suggestions here (escaping the # with \\ or \\\\) did not work.

columns.Bound(Function(l) l.Path).Title("File Path").ClientTemplate("<a href=""#= Path.replace('ROOT\\', '\\\\test123.com\\test\\WAV\\Compliance\\') #"" target=""_blank"">#= Path.replace('ROOT\\', '\\\\cmutual.com\\fsroot\\WAV\\Compliance\\') #</a>")

If my Path contains a "#", the link gets cut off after that symbol (and does not open the linked file, obviously).

Interestingly, when the link is clicked, for a second the whole correct path is in the address bar (with the "#" and everything after it), but after a second, it gets replaced with the cut off path.

Thanks,
Julia

Grid

answered on 12 Mar 2015

2 answers

272 views

Kendo Grid intermittantly will not hit the controller on an edit

Hello,

I am having an issue with a couple of Kendo grids on our Mvc project. I was on an older version of Kendo, and I thought upgrading to the latest might help, but after upgrading the problem remained the same. What happens is sometimes when I edit a row in the grid, the action will not get hit in the controller at all. When I first load the application, the first couple of edits will often go through (but not always), however once it stops working, it'll never work again until the page has been refreshed (but usually it requires the whole application to be reset). It's been very hard to pin down because no errors are getting thrown in either javascript or asp.net.

We are using a custom template for editing, but I have eliminated this as a possible culprit, because the problem occurs exactly in the same way if I change the edit type to InCell or InLine.

Here is the code:

@(Html.Kendo().Grid<AttorneyRequestPendingDeterminationViewModel>()
.Name("PendingDeterminationGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("onError"))
.Read(read => read.Action("Read", "PendingDetermination").Data("getSearchData"))
.Model(model => model.Id(p => p.Id))
.Update(read => read.Action("DecisionsEdit", "PendingDetermination"))
.Update(read => read.Type(HttpVerbs.Post))
.PageSize(20)
.Events(events => events.RequestEnd("onRequestEnd"))
)
.Columns(columns =>
{
columns.Bound(m => m.DateEntered).Title("Date Entered");
columns.Bound(m => m.LocalId).Title("Local ID");
columns.Bound(m => m.DefendantName).Title("Name");
columns.Bound(m => m.Offense).Title("Offense");
columns.Bound(m => m.EnteredBy).Title("FQ User ID");
columns.Bound(m => m.InterviewLocation).Title("Interview Location");
columns.Bound(m => m.CourtLocation).Title("Court Location");
columns.Bound(m => m.Recommendation).Title("Recommendation");
columns.Command(m => m.Edit()).Title("Actions");
})
.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("DecisionsTemplate"))
.Sortable(sortable => sortable
.Enabled(true)
.AllowUnsort(false)
.SortMode(GridSortMode.SingleColumn))
.Groupable()
.Pageable()
.Deferred()
)

<script type="text/javascript">
require(['/Content/js/config.js'], function() {
require(['jquery', 'lib/kendo/kendo.grid.min', 'lib/kendo/kendo.aspnetmvc.min'], function($, kendogrid, kendomvc) {
@Html.Kendo().DeferredScriptsFor("PendingDeterminationGrid", false)

function onRequestEnd(e) {
if (e.type == "update") {
location.reload();
}
}

$(".k-link").bind("click", function(e) {
$('#grid').data('kendoGrid').dataSource.page(1);
});

$('#SearchString').keyup(function(event) {
if (event.keyCode == 13) {
$('#SearchButton').click();
}
});

$("#SearchButton").click(
function() {
$('#grid').data('kendoGrid').dataSource.fetch();
$('#grid').data('kendoGrid').dataSource.page(1);
});

function getSearchData() {
return {
SearchString: $("#SearchString").val(),
SearchTypeSelected: $("#SearchTypeSelected").val(),
};
};
});
});
</script>

And the controller method in case you need it:

[HttpPost]
public ActionResult DecisionsEdit([DataSourceRequest] DataSourceRequest request,
AttorneyRequestPendingDeterminationViewModel attorneyRequest)
{
string href =
attorneyRequest.Links.FirstOrDefault(l => l.Rel == Constants.Rels.AttorneyRequestDecisions).Href;
int val;
if (attorneyRequest.EligibilityOverrideReason != null && int.TryParse(attorneyRequest.EligibilityOverrideReason.Value, out val))
{
attorneyRequest.EligibilityOverrideReasonId = val;
}
if (attorneyRequest.NotEligibleReason != null && int.TryParse(attorneyRequest.NotEligibleReason.Value, out val))
{
attorneyRequest.NotEligibleReasonId = val;
}

var response = HalClient.PutAsJsonAsync(href, attorneyRequest).Result;

if (!response.IsSuccessStatusCode)
{
if (response.StatusCode == HttpStatusCode.NotFound)
{
this.Toast(ToastType.Error, "The attorney request could not be located");
}
if (response.StatusCode == HttpStatusCode.BadRequest)
{
this.Toast(ToastType.Error, "The attorney request is invalid");
}
} else
{
this.Toast(ToastType.Success, "The decisions have been updated");
}
return Index();
}

Please let me know if you need any other information to help nail this down.

Grid

answered on 12 Mar 2015

1 answer

98 views

my grid column menu disappeared to fast on mouseout

בס"ד

hi ,
i'm using kendo 2012.1.419 version.

I need to delay the auto close grid column menu (of the sub filter window) on mouse out.

How can i do it ?

Regards,
Moshe Yariv Malka

Grid

answered on 12 Mar 2015