Questions on UI for ASP.NET MVC Forum

3 answers

284 views

So I have a situation where I am using asp.net MVC controllers in a web interface I'm working on.

The way it's set up is such that the controller passes a model to the view which then has it defined like this: @model ExceptionReportDBModel.Contributor

ExceptionReportDBModel.Contributor is a class generated by EntityFramework.

The issue is, I can't find a way, using mvc wrapper functions, to bind a textbox or textlabel to the model. I have only been able to find solutions using javascript, which presents a problem because I have not been able to figure out how to bind to the model provided by my asp.net mvc controller using javascript...

If someone know of a wrapper function for this, or if you know how to use javascript along with an mvc model passed from the controller, that would be quite helpful.

General Discussions

answered on 28 Aug 2014

5 answers

1.0K+ views

Posting datepicker values to server

I am trying to send datepicker values back to server and bind to date objects in the controller.

this is what is being posted back
sort=&group=&filter=&FromDate=1%2F20%2F2014+12%3A00%3A00+AM&ToDate=4%2F19%2F2014+12%3A00%3A00+AM

here is my post

var chart = $("#SalesChart").data("kendoChart");

chart.dataSource.read({

"FromDate": $("#FromDate").data("kendoDatePicker").value(),

"ToDate": $("#ToDate").data("kendoDatePicker").value()

});

but in my controller the dates are simple #12:00.00#

Any ideas, thanks

DatePicker

answered on 27 Aug 2014

1 answer

228 views

Commands.Custom

Hi

I worked with Telerik.Web.MVC version 2012.3.1018.

I upgraded to Telerik.Web.MVC verison 2013.2.611.

Unfortunatlely my grid do not work with this new version.

It can’t find commands.custom().
It tell my, that it can't find this definition.

My code :

@(Html.Telerik().Grid<Mail>()
.Name("Grid")
.DataKeys(keys => keys.Add(c => c.ID))
.DataBinding(dataBinding =>
dataBinding.Ajax()
.Select("_Index", "Geschaeft")
)

.Columns(columns =>
{
columns.Command(commands =>
{
commands.Custom("editDetail")
.ButtonType(type)
.HtmlAttributes(new { @class = "editDetail", @title = "Geschäft editieren" })
.Text("edit")
.DataRouteValues(route =>
route.Add(o => o.GeschaeftID).RouteKey("ID"))
.Ajax(false)
.Action("Edit", "Geschaeft", (RouteValueDictionary)ViewBag.GridState);
}).Width(38).Title("");
...

What can I do?

Thank you for your assistance.

Grid

answered on 27 Aug 2014

2 answers

763 views

Pass DataSourceRequest as Parameter in Javascript Ajax Call

I have a page that has a grid and some filter fields (external from the grid). The filtering gets applied to the grid in the JavaScript - which works fine. I also have an export button that I need to export the data in my grid - since my grid does not contain all the data that my export needs, my thought was to pass the DataSourceRequest as a parameter to my Ajax call, select my data and then use the "toDataSourceResult()" as happens in my ajax read controller action. This is not working.

I have the following code in my javascript function that builds my datasource request, and passes it in as a parameter, but my DataSourceRequest object in my controller action contains null values for filter, sort, etc.

var grid = ${"#Persons").data("kendoGrid");

var parameterMap = grid.dataSource.transport.parameterMap;

var

requestObject = parameterMap({ Sorts: grid.dataSource.sort(), Filters: grid.dataSource.filter(), Groups: grid.dataSource.group()});

How can I pass the datasource request as a parameter to my Ajax Controller action? I have attached a working sample project.

Grid

answered on 27 Aug 2014

1 answer

147 views

Grid PopupEditor problem when multiple rows are selected

Hello,

I have a grid that contains a check box for each row. A popup editor is displayed when multiple rows are selected. But when a change is made in the popup editor, one of the selected rows loses it's check box selection. My questions are:

1. How do I prevent the a row from being un-selected when a field is modified in the popup editor field?
2. How do I capture an event in the popup-editor window?

Here's is my grid setup:

Html.Kendo().Grid<ResourceInfo>()

.Name("GalleryGrid")

.Columns(columns =>

{

columns

.Bound(r => r.Id).Hidden();

columns

.Bound(r => r.previewUri)

.Width(150)

.Title("Preview")

.Template(@<text><a data-lightbox="@item.uri" href="@item.uri"><img alt="" class="center thumbnail-image" src="@item.previewUri"/></a></text>)

.ClientTemplate("<a data-lightbox='#= uri #' href='#= uri #'><img alt='' class='center thumbnail-image' src='#= previewUri #'/></a>");

columns

.Bound(r => r.colors).Width(100)

.Title("Color");

columns

.Bound(r => r.sizes).Width(100)

.Title("Size");

columns

.Bound(r => r.seasons).Width(100)

.Title("Season");

columns

.Bound(r => r.categories).Width(200)

.Title("Categories");

columns

.Bound(r => r.stockImageKeywords).Width(275)

.Title("Keywords");

columns

.Template(@<text><input type='checkbox' class='check_row'/></text>)

.Width(45)

.Title(" ")

.ClientTemplate("<input type='checkbox' class='check_row' value='#=Id#'/>");

//columns.Command(command => { command.Select().Text("<input type='checkbox' id='editChk'/>"); }).Width(80);

columns.Command(command => { command.Edit().Text(" "); }).Title("Edit").Width(80);

columns.Command(command => { command.Destroy().Text(" "); }).Title("Delete").Width(80);

})

.ToolBar(toolbar =>

{

toolbar.Custom().Text("Add (upload)").Url("#uploadModal").HtmlAttributes(new { @class = "btn", data_toggle = "modal" });

})

.DetailTemplate(@<text>

<div>FileName: @item.fileName</div>

<div>uri: @item.uri</div>

<div>previewUri: @item.previewUri</div>

<div>rating: @item.rating</div>

<div>region: @item.region</div>

</text>)

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

.Sortable()

.Scrollable()

.Filterable()

.Pageable(builder => builder.PageSizes(new[] { 50, 100, 500, 1000 }).Refresh(true))

//.Scrollable( scrollable => scrollable.Virtual( true ) )

.HtmlAttributes(new { style = "height:600px" })

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

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

.DataSource(dataSource =>

dataSource

.Ajax()

.Batch(false)

.ServerOperation(true)

.Model(model =>

{

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

model.Field(r => r.previewUri).Editable(false).DefaultValue(string.Empty);

model.Field(r => r.colors).Editable(true).DefaultValue(string.Empty);

model.Field(r => r.seasons).Editable(true).DefaultValue(string.Empty);

model.Field(r => r.categories).Editable(true).DefaultValue(string.Empty);

model.Field(r => r.stockImageKeywords).Editable(true).DefaultValue(string.Empty);

})

.Events(events => { events.Error("error_handler");events.Change("change_handler"); })

.Read(read => read.Action("read", "gallery")).PageSize(50)

.Update(update => update.Action("update", "gallery").Data("GetSelectedIds").Type(HttpVerbs.Post))

.Destroy(delete => delete.Action("delete", "gallery").Type(HttpVerbs.Post))

)

.ClientDetailTemplateId("client-template")

.Events(evt =>

{

evt.Edit("edit_handler");

evt.DataBound("databound_handler");

//evt.Save("onSave");

//evt.Change("change_handler");

})

.Deferred()

Grid

answered on 27 Aug 2014

1 answer

234 views

Add values to MultiSelect from Grid select

Hi,
I have a multiselect that works very well:

@(Html.Kendo().MultiSelectFor(model => model.SurgeryMultiSelect).Filter("contains")

.Name("SurgeryMultiSelect")

.DataTextField("Description")

.DataValueField("ProcedureTypeId")

.Placeholder("Select Procedure(s)...")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetAllProcedures", "CommonJsonActions");

});

})

.Events(e =>

{

e.Change("fnSurgeryListChange");

})

)

I also have a grid with a select option that will call a js function; in this function I want to add the selected value from the grid to the select items in the multiselect, if it doesn't already exist. Then call the change event in the multiselect if anything new is added.

Any help will be appreciated.
Thanks,
Shehab

MultiSelect

answered on 27 Aug 2014

1 answer

267 views

DatePickerFor in grid - validation problem

Hi,
I have problem with kendo date validation in kendo grid.

I have EditorTemplate in column in kendoGrid:

columns.Bound(p => p.DatumVznikuKontraktu).EditorTemplateName("Date").ClientTemplate("#= kendo.toString(DatumVznikuKontraktu, 'd') #" +<br>

"<input type='hidden' name='ZamKontrakts[#= index(data)#].DatumVznikuKontraktu' value='#= nullTest(DatumVznikuKontraktu) #' />"

).HeaderHtmlAttributes(new { style = "white-space:pre-wrap; vertical-align:middle" });

EditorTemplate Date:

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

<%: Html.Kendo().DatePickerFor(m => m)

.Format(LanguageResources.Resource.DateFormat)

.Culture(System.Threading.Thread.CurrentThread.CurrentCulture.ToString())

%>

Culture is SK-sk (slovakia). DateFormat - dd.MM.yyyy

When I change a date in grid I get validation error message: The field DatumVznikuKontraktu must be a date.

Can you help me ?

Thx

DatePicker

answered on 27 Aug 2014

1 answer

82 views

Set WidgetBuilderBase ToHtmlString method as virtual?

Hi I would like to suggest to set the ToHtmlString method in the WidgetBuilderBase class as virtual so it can be used as an extensibility point.
I wanted to add some logic before the call ToHtmlString using dynamic proxies on the builders and at the end it wasn't as straight forward as I would wanted it to be.
I would have been a lot easier if the method was virtual and I think it is a harmless change.

General Discussions

answered on 26 Aug 2014

1 answer

92 views

Changing "More Events" text.

Is there anyway to change the "More Events" text on the bar?

Currently it's set to "..." Is there anyway to change this without hacking it with jquery? We want to change it to "More..."

Scheduler

answered on 26 Aug 2014

1 answer

131 views

TimePicker popup width formatted wrong

We can't really figure out what is causing this, but all of a sudden, all our TimePickers' popup's got wrong width-formatting (exceptionally small - see picture). Have anyone experienced anything similar or have a proposal to a fix? Is there a way to override this property?

Our code should be straightforward (excepts it is a rather large solution, and everything can change the behavior).
Html:

<td class="col-xs-3">

<input name="startTime" id="startTime" data-val-required="" />

</td>

Js:

_startTime = $("#startTime").kendoTimePicker({

format: "HH:mm",

change: changePeriodTypeOptions

}).data("kendoTimePicker");

DatePicker