Questions on UI for ASP.NET MVC Forum

13 answers

459 views

Custom Template DropDownList: Initial value not set on save

Hi,

I'm using the Kendo UI ASP.NET MVC Grid with a Custom Template which includes a DropDownList in a column. The data must be loaded based on different filters, so I populate the DropDownList via a DataSource.

Everything works fine, except if I do not change the value.
These are the steps:
* The grid is loaded, there is no option label, so the first entry is visible.
* If I change the value in the DropDownList, everything works fine and the value is sent to the Server
* If I do not change the value, I get null as value on the server.

It seems like the initial value is not sent back to the server.

What can I do about this? My Kendo Version is 2012.3.1114.

Greets

Attached my custom template in the grid:

@(Html.Kendo().DropDownListFor(m => m)

.Name("SalesRep")

.DataSource(

config => config.Read(read => read.Action("SalesRepRead", "TemplateData", new { area = "" }).Data("filterGrid")))

.DataValueField("Value")

.DataTextField("Text")

)

Grid

answered on 17 Mar 2015

3 answers

521 views

Problems with default Operator on Filter

Currently using version 2014.3.1411.

I am trying to always filter on the "contains" operator for string columns in my grid.

The problem is that when I start typing in any of the the filters, a request is sent to the
DataSource Read with the following data:

sort:page:1group:filter:Name~startswith~'t'

Then after a delay a second call is sent:

sort:page:1pageSize:5group:filter:Name~contains~'t'

The second call is correct. It has the correct pageSize and filter.

In the grid I have removed all filters except Contains and assigned an Operator("contains") to each filtered cell.

If I inspect the Filter i see this:

<input data-bind="value: value" data-role="autocomplete" data-text-field="Name" data-filter="startswith" data-delay="100" data-min-length="1" data-value-primitive="true" type="text" class="k-input" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" style="width: 100%;" aria-busy="false"><br>

This is the grid:

@helper RenderProductsSearch()

{

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

.Name("grid-products-search-#=ID#")

.AutoBind(true)

.Pageable(pager => pager

.Input(true)

.Numeric(true)

.Info(true)

.PreviousNext(true)

.Refresh(true)

.PageSizes(true)

)

.Scrollable()

.Sortable()

.Navigatable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.HtmlAttributes(new { style = "height: 100%; border: 0;" })

.Columns(columns =>

{

columns.Bound(e => e.Name).Width(300).Title("name").Filterable(f => f.Cell(cell => cell.Operator("contains").ShowOperators(false).Delay(100)));

columns.Bound(e => e.Sku).Width(200).Title("sku").Filterable(f => f.Cell(cell => cell.Operator("contains").ShowOperators(false).Delay(100)));

columns.Bound(e => e.ShortDescription).Title("description").Filterable(f => f.Cell(cell => cell.Operator("contains").ShowOperators(false).Delay(100)));

columns.Command(command => command.Custom("Select").Click("selectProduct"))

.Title("commands")

.Width(Constants.Columns.Default.Widths.ColumnCommands);

})

.Filterable(filterable => filterable

.Extra(false)

.Operators(ops => ops

.ForString(str => str.Clear()

.Contains("Contains")

)))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(p => p.Id);

model.Field(x => x.Id).Editable(false);

model.Field(x => x.Name).Editable(false);

model.Field(x => x.Sku).Editable(false);

model.Field(x => x.ShortDescription).Editable(false);

})

.PageSize(5)

.Events(events =>

{

events.Error("standard_grid_error_handler");

})

//.Batch(true)

.ServerOperation(true)

.Read(read => read.Action("ReadSelectable", "Product", new { blockId = "#=ID#" }))

)

.ToClientTemplate()

)

}

Why is the first call happening and why does the input data-filter contain the wrong operator?

thanks

Grid

answered on 17 Mar 2015

10 answers

969 views

Control when buttons is enabled/disabled

Hi,

In a Kendo.Grid... there are a lot of buttons, edit, refresh, add etc...
How do i control the buttons so e.g. the refresh button is disabled as long as a row is in edit mode and other similar situations ??

Thank you in advance.

Grid

answered on 17 Mar 2015

1 answer

405 views

Values are disappearing at in-Cell editing

Hi there,

I've created a grid which bounds on a "Special" object, which has "real" properties and a list of variable properties.

This is the (single) object:

public class DynPartView

{

Guid _Id;

public Guid Id

{

get { return _Id; }

set { _Id = value; }

}

List<Prop> _Properties;

public List<Prop> Properties

{

get { return _Properties; }

set { _Properties = value; }

}

...snip...

string _Standard;

public string Standard

{

get { return _Standard; }

set { _Standard = value; }

}

string _SelectedMKL;

public string SelectedMKL

{

get { return _SelectedMKL; }

set { _SelectedMKL = value; }

}

string _SelectedManufacturer;

public string SelectedManufacturer

{

get { return _SelectedManufacturer; }

set { _SelectedManufacturer = value; }

}

And this is the view:

@(Html.Kendo().Grid(Model)

.Name("partgrid")

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Model(m =>

{

int y;

m.Id(d=>d.Id);

m.Field(f => f.SelectedMKL);

m.Field(f => f.SelectedManufacturer);

m.Field(f => f.Standard).Editable(false);

for (y = 0; y <= Model.PropertiesCount; y++)

m.Field(f => f.Properties[y].Value);

})

.Read(read => read.Action("Read_DynParts", "Parts", new { typeID = _typeid, mklName = _name }))

.Create(create => create.Action("EditingInline_Create", "Parts"))

.Update(update => update.Action("EditingInline_Update", "Parts"))

)

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Custom().Text("Kopieren");

toolbar.Save();

})

.Columns(columns =>

{

int j = 0;

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

columns.Bound(b => b.SelectedMKL).Title("MKL");

columns.Bound(b => b.Standard).Title("Norm");

columns.Bound(b => b.SelectedManufacturer).Title("Hersteller");

for (j = 0; j < Model.PropertiesCount; j++)

{

string _title="";

if (Model.Count() >= 1)

_title = Model[0].Properties[j].Name;

columns.Bound(b => b.Properties[j].Value).Title(_title);

}

})

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

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

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))

.Pageable(page => page.Enabled(true).PageSizes(new int[] { 10, 30, 50, 100, 1000 }))

.Sortable()

.Selectable(sel => sel.Mode(GridSelectionMode.Single))

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

)

The issue I have: If I click on a property, which is stored in Properties the value is disappearing in the editbox. If I click on a property, which is a "direct" member of the class (e.g. "SelectedMKL"), the value is correctly shown after clicking the cell.
See the Pictures attached.

How can I prevent the value from disappearing?

Greetings, Denis

Grid

answered on 17 Mar 2015

7 answers

572 views

Grid: Summing Rows as Calculated Column

I have columns Teach%, Sch%, Cit%. My end column is Total%. My client does not want to add up the number manually and enter it as data. They want a row by row total of Teach%, Sch%,CIt% to be summed up in calculated Field Total%.

How can this be accomplished?

Thank you.

I have attached pic of my grid:

Grid

answered on 17 Mar 2015

3 answers

223 views

Show tooltip only for <TD> elements that have certian CSS class

How can I enable Tooltip only for <TD> which have "contains-data" class? The <TD> elements which do not have "contains-data" class should not open Tooltip.

@(Html.Kendo().Tooltip()

.For("#Grid")

.Filter("td.contains-data")

.ContentTemplateId("template")

.Width(400)

.Height(200)

.AutoHide(false)

.ShowOn(TooltipShowOnEvent.Click)

ToolTip

answered on 16 Mar 2015

5 answers

392 views

Turn off automatic daylight savings detection

Hi,

I noticed when running some tests based on Daylight Savings, that any attempt to select a time during the Spring transition results in the time being set back an hour. (To see this behaviour, attempt to enter 2:30 AM on March 8, 2015). However there are many places that do not recognize Daylight Savings even in time zones that generally do, so I was wondering if there was a way to disable this feature?

Thanks,
Kevin

Date/Time Pickers

answered on 16 Mar 2015

1 answer

92 views

Batch Grid column total (unsaved)

Is there a way to get the total of a data column for an unsaved data grid? I want to check the column total before allowing a save back to the server.
Thanks

Grid

answered on 16 Mar 2015

1 answer

224 views

.Mobile(MobileMode.Phone)

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

249 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