Questions on UI for ASP.NET MVC Forum

1 answer

233 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

774 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

153 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

241 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

311 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

87 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

97 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

164 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

answered on 25 Aug 2014

1 answer

377 views

Uncaught TypeError: Cannot read property 'removeData' of null KENDO UI

Hi I purchased this version of kendo ui -> telerik.kendoui.professional.2014.2.716.commercial. I keep on getting this error -> Uncaught TypeError: Cannot read property 'removeData' of null after clicking my return button w/c calls a function with this code -> mainVM.agentVM.isOpenEdit(false); this line of code hides the div that contains some html elements. in my html it looks like this -> <div data-bind="if: mainVM.agentVM.isOpenEditList"> sample element </div>

I hope somebody can help me, thank you

General Discussions