Questions on UI for ASP.NET MVC Forum

2 answers

162 views

[Solved] Popup for Event details does not work in Chrome, Safari or Opera

Visual Studio 2012 Pro MVC 5 Razor views
Kendo DevCraft MVC Web 2014.1.318.545

I have a scheduler with a custom edit template -

In IE and Firefox, double clicking an event in the calendar displays the popup perfectly.

In Chrome, Safari or Opera, the popup does not show up on double click.

Is there any way for me to decipher why? Is there a log to show why it's not working?

Scheduler definition:

01.@(Html.Kendo().Scheduler<HTServices.Models.TaskViewModel>()

02. .Name("scheduler")

03. .Date(new DateTime(2014,4,21,7,0,0))

04. .StartTime(new DateTime(2014,4,21,7,0,0))

05. .Height(600)

06. .Editable(edit =>

07. {

08. edit.TemplateName("ScheduleItemTemplate");

09. edit.Create(false);

10. edit.Destroy(false);

11. })

12. .Views(views =>

13. {

14. views.DayView();

15. views.WeekView(weekView => weekView.Selected(true));

16. views.MonthView();

17. views.AgendaView();

18. })

19. .Timezone("Etc/UTC")

20. .DataSource(d => d

21. .Model(m =>

22. {

23. m.Id(f => f.TaskID);

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

25. m.Field(f => f.OwnerID).DefaultValue(1);

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

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

28. })

29. .Read("Read", "Scheduler")

30. .Create("Create", "Scheduler")

31. .Destroy("Destroy", "Scheduler")

32. .Update("Update", "Scheduler")

33. )

34.)

and the edit item template:

001.@model HTServices.Models.TaskViewModel

002.@{

003. //required in order to render validation attributes

004. ViewContext.FormContext = new FormContext();

005.}

006.

007.@functions{

008. public Dictionary<string, object> generateDatePickerAttributes(

009. string elementId,

010. string fieldName,

011. string dataBindAttribute,

012. Dictionary<string, object> additionalAttributes = null)

013. {

014.

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

016.

017. datePickerAttributes["id"] = elementId;

018. datePickerAttributes["name"] = fieldName;

019. datePickerAttributes["data-bind"] = dataBindAttribute;

020. datePickerAttributes["required"] = "required";

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

022.

023. return datePickerAttributes;

024. }

025.

026.}

027.<style type="text/css">

028. .panelbarHeader {

029. font-size: 1em;

030. font-weight: normal;

031. }

032.

033. .panelbarItem {

034. text-decoration: none;

035. font-size: .9em;

036. font-weight: normal;

037. padding-left: 20px;

038. }

039. .dutyPanel {

040. height: 200px;

041. }

042.

043. .displayDate {

044.

045. }

046.

047.</style>

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

049. @(Html.LabelFor(model => model.Client))

050.</div>

051.<div data-container-for="client" class="k-edit-field">

052.

@(Html.TextBoxFor(model => model.Client, new { style = "width:100%;", @readonly = "readonly", @class = "k-textbox col-lg-12", data_bind = "text: client" }))

053.</div>

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

055. @(Html.LabelFor(model => model.Address))

056.</div>

057.<div data-container-for="address" class="k-edit-field">

058.

@(Html.TextBoxFor(model => model.Address, new { style = "width:100%;", @readonly = "readonly", @class = "k-textbox", data_bind = "text: address" }))

059.</div>

060.

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

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

063.</div>

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

065.

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

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

068. .Enable(false))

069.

070.</div>

071.

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

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

074.</div>

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

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

077. .HtmlAttributes(generateDatePickerAttributes(

078. "endDateTime",

079. "end",

080. "value:end,invisible:isAllDay",

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

082. .Enable(false))

083.</div>

084.

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

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

087.</div>

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

089.

@(Html.DisplayFor(model => model.IsAllDay, new { @class = "k-checkbox", @readonly = "readonly", data_bind = "value: isAllDay" }))

090.</div>

091.

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

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

094.</div>

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

096.

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

097.</div>

098.

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

100. @(Html.LabelFor(model => model.DutyID))

101.</div>

102.<div data-container-for="duties" data-task-id="@Model.TaskID" class="k-edit-field dutyPanel">

103. <div id="dutyPanel" class="dutyPanel"></div>

104.</div>

105.

106.@{

107. ViewContext.FormContext = null;

108.}

The div named DutyPanel is a panelBar that is loaded in JS in the onScheduleEdit event:

01.$(function () {

02.

03. ////bind to the scheduler edit event

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

05. scheduler.bind("edit", onSchedulerEdit);

06.

07. function onSelect(e) {

08.

09. e.preventDefault();

10. }

11.

12. function onSchedulerEdit(e) {

13.

14. var d = e.event.Duties;

15. $("#dutyPanel").kendoPanelBar({

16. expandMode: "multiple",

17. select: onSelect,

18. dataSource: jQuery.makeArray(d)

19. });

20.

21. var panelBar = $("#dutyPanel").data("kendoPanelBar").expand($("#dutyPanel .k-item"), true);

22.

23. };

24.

25.

26.});

Why would this work in IE and FF, but not Chrome, Safari or Opera?

Is this a bug?

Scheduler

answered on 27 May 2014

3 answers

891 views

[Solved] Custom command routevalue

Hi,

I'm trying to add a custom command to a grid. The goal is to show me the details of a record, so I need to pass the Id to my controller.
In the help I've found the following syntax:
.Action(actionName, controllerName, routeValues);

How do I add a my record Id to "routeValues"? I can't find an example.

I would like something like this:
....
columns.Bound(c => c.TopChar1);
columns.Command(command => command.Custom("Details").Action("Details", "Pres", new { Id = ????? }));
....

So far, I've only found a workaround using a javascript combined with Custom("Details").Click("function").

Thx

Grid

answered on 27 May 2014

1 answer

71 views

Grid

How to apply telerik tool on 1 lakh records.

Grid

answered on 26 May 2014

2 answers

167 views

arrow icon?

Hi,

Something went wrong with my Kendo UI Grid.

Miss something in css?

Grid

answered on 26 May 2014

1 answer

135 views

Ajax DropDown with javascript parameter

we have an EditorTemplate which is:

1.<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<int?>" %>

2.<%= this.Html.Kendo().DropDownList().DataSource(ds => ds.Read(read => read.Action("GetListPort","AjaxCombo")))

3..Name(this.ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))

4..HtmlAttributes(new { style = "width:99%;" })

5.%>

this is kind of a cascade, but as it used in multiples page, and some pages this is used twice.
I want to refresh after changing another combo or radio button.

in Telerik MVC Extensions we had something like this:

1.function onDropDownDataBinding(e) {

2. var val1 = $('#First').data('tDropDownList').value();

3. e.data = $.extend({}, e.data, {parameter: val1});

4.}

In other page, val1 would be from $('#Other').data('tDropDownList').value()

How can we do this for Kendo UI DropDownList?

thanks,
Ezequiel

DropDownList

answered on 23 May 2014

3 answers

446 views

[Solved] ClientTemplate action button does not render

I have a grid populated by data from ViewData, and the grid has a column containing an Edit button. The problem is that the ClientTemplate that defines the Edit button is not showing the input button, rather it just shows the Id number as plain text. I've used this same Edit button in another grid that is populated by a model, and it works fine.

Any ideas? Thanks. Dan

@(Html.Kendo().Grid((IEnumerable<Catheter>)ViewData["catheters"])

.Name("CatheterGrid")

.Columns(columns =>

{

columns.Bound(e => e.CatheterType.Name).Title("Type");

columns.Bound(e => e.EffectiveDate).Title("Placed On").Format("{0:d}");

columns.Bound(e => e.DiscontinuedOn).Title("Discontinued On");

columns.Bound(e => e.Manufacturer.Name).Title("Manufacturer");

columns.Bound(e => e.ClinicianDisplayName).Title("Clinician");

columns.Bound(e => e.Id).Hidden();

columns.Bound(e => e.Id).ClientTemplate(

"<a href='" + Url.Action("EditCatheter", Controllers.Patient) + "/#= Id #'" + "class='btn btn-sm'>Edit</a>"

).Width(80).Title("");

})

.Pageable(pageable => pageable

.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })

.ButtonCount(5))

.Sortable()

.Filterable()

.Scrollable()

.ClientDetailTemplateId("template")

.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div style="float:right">

<a href='@Url.Action("EditCatheter", Controllers.Patient)/0' class='btn btn-sm'>New</a>

</div>

</text>);

})

)

Grid

answered on 23 May 2014

3 answers

501 views

How to use as the datasource a property (field) of the result (Kendo Grid)

Hi All,

I am creating the grid via javascript. The datasource is connected directly to the webservice. An example of the webservice result is the following:
[ { col1: "",
col2: "",
Items: [ { ....} }
}]

Instead of using the main result like col1 and col2 I need to use the Items. How can I specify that using the example below?

var locationItems = $("#grid").kendoGrid({
    columns: lockedGridColumns(),
    height: 500,
    scrollable: true,
    sortable: true,
    filterable: true,
    pageable: true,
    //reorderable: true,
    //resizable: true,
    autoBind: false
}).data("kendoGrid");

function getItems(locationId) {
    if (locationId == null) {
        locationId = 0;
    }

var dataSource = new kendo.data.DataSource(locationId != 0 ?
            {
                transport: {
                    read: {
                        dataType: "json",
                        url: "api/items/getlocationitems?locationID=" + locationId
                    }
                },
                pageSize: 25
            } :
            {
                data: [],
                pageSize: 25
            });

locationItems.setDataSource(dataSource);
    locationItems.dataSource.read();
}

Grid

answered on 23 May 2014

0 answers

131 views

Binding Large Data To Grid

how to bind 1 lakh records using telerik tool in mvc5.

Grid

asked on 23 May 2014

1 answer

938 views

Problem binding to ViewData

I have a Razor page with a Kendo grid, trying to bind to ViewData. The page is showing a syntax problem on the @(Html.Kendo().Grid line as shown below. I can't figure out why the page won't render. This is just like the example at
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/server-binding

Dan

Controller code:

public ActionResult PatientMedInfo(long id)

{

IContextManager contextManager = ManagerConfig.GetManagerForUser(Session[SessionItems.AuthenticatedUser] as DHS.Entities.IDHSPrincipal);

IWorkContext workContext = contextManager.Begin();

DHS.Entities.Patient patient = workContext.GetPatientManager().GetById(id);

ICollection<DHS.Entities.PatientCatheter> catheterlog = workContext.GetPatientManager().FindCatheters(patient);

IEnumerable<Catheter> cats = catheterlog.Select(cat => new Catheter

{

Id = cat.Id,

CatheterType = cat.CatheterType,

EffectiveDate = cat.EffectiveDate,

DiscontinuedOn = cat.DiscontinuedOn,

Manufacturer = cat.Manufacturer,

Clinician = cat.Clinician

}).OrderBy(x => x.EffectiveDate);

ViewData["catheters"] = cats;

return View(Views.EmployeeMedInfo, CPR.WebPortal.Models.PatientMedInfo.Populate(workContext, workContext.GetPatientManager().GetById(id)));

}

Razor page:

@model PatientMedInfo

@(Html.Kendo().Grid((IEnumerable<Catheter>)ViewData["catheters"])

.Name("CatheterGrid")

.Columns(columns =>

{

columns.Bound(e => e.CatheterType.Name).Title("Type");

columns.Bound(e => e.EffectiveDate).Title("Placed On").Format("{0:d}");

columns.Bound(e => e.DiscontinuedOn).Title("Discontinued On");

columns.Bound(e => e.Manufacturer.Name).Title("Manufacturer");

columns.Bound(e => e.ClinicianDisplayName).Title("Clinician");

columns.Bound(e => e.Id).Hidden();

columns.Bound(e => e.Id).ClientTemplate(

"<a href='" + Url.Action("EditCatheter", Controllers.Patient) + "/#= Id #'" + "class='btn btn-sm'>Edit</a>"

).Width(80).Title("");

})

.Pageable(pageable => pageable

.PageSizes(true).PageSizes(new int[] { 20, 50, 100 })

.ButtonCount(5))

.Sortable()

.Filterable()

.Scrollable()

.ClientDetailTemplateId("template")

.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div style="float:right">

<a href='@Url.Action("EditCatheter", Controllers.Patient)/0' class='btn btn-sm'>New</a>

</div>

</text>);

})

Grid

answered on 22 May 2014

1 answer

293 views

Input mask on texbox inside a Grid

Hello,

I'm using a Grid in line edit mode to edit a list of contacts and I'm looking for a way to set a mask on the phone number and email.

Grid

answered on 22 May 2014