Questions on UI for ASP.NET MVC Forum

3 answers

167 views

Serve different format video to different browsers

Hello,

When using the standard HTML5 <video> tag, one can list various formats of the same video e.g. .webm, .mp4 and the browser will work down the list and take the first one it supports or render the text line following the files if nothing is supported.

<video controls width="640" height="360">

<source src="~/Content/video/intro_20170825.webm" type="video/webm"></source>

<source src="~/Content/video/intro_20170825.mp4" type="video/mp4"></source>

<p>Your browser doesn't support video. Please use IE9+, Firefox, Chrome, Opera or Safari.</p>

</video>

How can I achieve the same result with Media Player control?

I can serve up files in various qualities (e.g. 480p, 720p) but it always takes the first file in the list no matter what (and does not display in IE11).

@(Html.Kendo().MediaPlayer()

.Name("mediaplayer1")

.AutoPlay(true)

.HtmlAttributes(new { style = "height:360px; width:640px" })

.Media(m => m

.Title("Power Vision Mobile Platform")

.Source(new[] {

new { quality = "720p", url = "../Content/Video/intro_20170825.webm" }

})

)

.Media(m => m

.Title("Power Vision Mobile Platform")

.Source(new[] {

new { quality = "720p", url = "../Content/Video/intro_20170825.mp4" }

})

)

I've also tried having one .Media block with both files listed in the .Source array, but still it only takes the first one. We prefer to serve up .webm file as default and keep the .mp4 around for Internet Explorer users.

Thanks in advance for any suggestions,

Rob

MediaPlayer

answered on 04 Sep 2017

3 answers

306 views

Autocomplete popup position wrong in Firefox when page is scrolled

Hi! i have a serious problem with kendo ui autocomplete in my mvc cshtml page. With Chrome or Edge all work fine, but with Firefox i have a position problem with the autocomplete popup. If i load page and not scroll page, the position of autocomplete popup is correct, but when i scroll page the position become wrong as if the distance of the popup is calculate on the viewport and not on the body page.

Below the image.

AutoComplete

answered on 04 Sep 2017

5 answers

2.2K+ views

ToolTip hover Grid

Hello everybody. I have a question. As I can run a tooltip in the following code grid? the idea is to show me where I positioned the field.
Thank you!

@(Html.Kendo().Grid<ControlGAS.DataAccess.Entities.Customer>()

.Name("GridCustomers")

.Columns(columns =>

{

columns.Bound(customer => customer.Id).Title("ID").Filterable(f => f.UI("filterById")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.Denomination).Title("Nombre").Filterable(f => f.UI("filterByName")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.Code).Title("Codigo").Filterable(f => f.UI("filterByCode")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.Address).Title("Direccion").Filterable(f => f.UI("filterByAddress")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.City).Title("Ciudad").Filterable(f => f.UI("filterByCity")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.FiscalIdentification).Title("Identificacion Fiscal").Filterable(f => f.UI("filterByFiscalId")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Template(customer => { }).ClientTemplate(

"<a href=" + quote + @Url.Action("Editing", "Customer", new { customerId = "#=Id#" }) + quote + "><i class='font-size-20 icon md-edit margin-right-10' aria-hidden='true'></i></a>" + "" +

"<a href=" + quote + @Url.Action("Editing", "Customer", new { customerId = "#=Id#" }) + quote + "><i class='font-size-20 icon md-delete margin-right-10' aria-hidden='true'></i></a>")

.Title("Actions").Width(100);

})

.Scrollable()

.Sortable()

.Groupable()

.Pageable()

.DataSource(

dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetCustomers", "Customer"))

)

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

.ClientDetailTemplateId("master")

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

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Empieza con")

.IsEqualTo("Igual a")

.IsNotEqualTo("No es igual a")

)

.ForNumber(num => num.Clear()

.IsEqualTo("Es igual a")

.IsNotEqualTo("Distindo de")

.IsNull("Vacio")

.IsLessThan("Menor a")

.IsGreaterThan("Mayor a"))

)

.Events(events => events.DataBound("dataBound"))

)

ToolTip

answered on 04 Sep 2017

2 answers

363 views

Async tooltip using JSON and kendo.template

Hi, currently I am doing the following to get some tooltip information on a grid row:

$("#gridPop").kendoTooltip({
filter: 'td:nth-child(10)',
content: function (e) {
var template = kendo.template($("#myToolTipTemplate").html());
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var tooltipHtml;
$.ajax({
url: DetailsURL + "/" + dataItem.Id,
async: false
}).done(function (data) { // data is a JSON object from the server with details for the row
if (data.Success) {
data.Result = data.Result.replace(/null/g, "\"N/A\"");
tooltipHtml = template($.parseJSON(data.Result));
} else {
tooltipHtml = "Ooops!<br>Something went wrong (" + data.Result + ")";
}
});
return tooltipHtml;
}
});

I would like to get rid of the synchronous ajax call and make it asynchronous. I saw some asynchronous examples where the server delivers the full html, but nothing that works with JSON data from the server, that is then "compiled" via a kendo.template() to html on the client. Any suggestions how to do this?

ToolTip

answered on 01 Sep 2017

2 answers

354 views

MVVM now storing item as "[Object, object]" instead of the object

Kendo updated with our last Sitefinity update, and previous to now it always stored the selected item in the list to the MVVM model. However in the current version it seems to just store literally as the string "[Object, object]"

I've tried setting data-value-primitive to true\false, no change either way.

<select class="schedules form-control"

data-bind="source: schedule, value: location.schedule, events: { change: onScheduleChange }, visible: hasScheduleItems"

data-text-field="StartDateFormatted"

data-value-primitive="false"

data-role="dropdownlist"

data-option-label="Select a schedule entry"

style="width: 100%; max-width: 300px">

</select>

DropDownList

answered on 31 Aug 2017

7 answers

2.1K+ views

Kendo Grid inline dropdownlist shows ValueField After Edit instead of TextField

I have a Kendo Grid with drop-down lists for in-line update.When i am in edit mode, the drop-down list text fields are displayed. But after i save, the value of the selected items are displayed in the grid instead of the text fields. I am using EditorTemplateName for displaying the drop-down lists in the grid.Can you please help me find what is wrong and help me correct this issue.

I have uploaded a copy of the code and 2 images. Thanks for the help

Grid

answered on 30 Aug 2017

1 answer

190 views

Scheduler with Multiple Checkbox Filters

I have a scheduler built with MVC and I would like for the events to be filtered by multiple fields. I am having difficulty in setting the filter logic along with the operators in the javascript.

Is there a way to filter by multiple values on a button click event?

Here are my selections:

<div id="tutors-listing">

Tutors

<div id="tutors">

Adalhi<input type="checkbox" id="alex" aria-label="Alex" value="3">

Annik<input type="checkbox" id="bob" aria-label="Bob" value="4">

Bobby<input type="checkbox" id="charlie" aria-label="Charlie" value="5">

</div>

<div id="subjects-listing">

Subjects

<div id="subjects">

AES<input type="checkbox" id="1" value="AES">

NURS<input type="checkbox" id="2" value="NURS">

ENG<input type="checkbox" id="3" value="ENG">

MED<input type="checkbox" id="4" value="MED">

</div>

<button type="button" id="filter">Filter</button>

</div>

And here is my javascript. I am having issues getting the classesChecked value to show:

<script type="text/javascript">

$(function () {

$("#filter").click(function () {

var tutorsChecked = $.map($("#tutors :checked"), function (checkbox) {

return parseInt($(checkbox).val());

});

alert(tutorsChecked);

var filter = {

logic: "or",

filters: [

{

logic: "and",

filters: [

{ field: "SUBJECT", operator: "eq", value: classesChecked }

]

},

{

logic: "and",

filters: [

{ field: "TutorID", operator: "gt", value: tutorsChecked }

]

}

]

};

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

scheduler.dataSource.filter(filter);

});

})

</script>

Is there a better method to filter these values and how can I see the multiple value selections? Thanks in advance.

Scheduler

answered on 29 Aug 2017

3 answers

309 views

Using Image Browser Without Editor

Looking at this thread, it appears its possible to use the image browser without it being inside an editor. http://www.telerik.com/forums/why-not-make-image-browser-in-editor-as-separate-controle

Can you provide me with the syntax to initialize an image browser on its own without an editor in MVC? I've tried the following, but get an error.

1.@(Html.Kendo().ImageBrowser(

2. .Image("~/UploadedPhotos/{0}")

3. .Read("ImageBrowser_Read", "Home", new { storyID = "#=StoryID#" })

4. .Create("ImageBrowser_Create", "Home")

5. .Destroy("ImageBrowser_Destroy", "Home")

6. .Upload("ImageBrowser_Upload", "Home", new { storyID = "#=StoryID#" })

7. .Thumbnail("ImageBrowser_Thumbnail", "Home")

8.))

Editor

answered on 29 Aug 2017

3 answers

298 views

MultiSelect modelbinding in a loop and form post

Hi,

I have a list of objects in my model

public class SoftwareItemPropertiesViewModel

{

....

public List<Annotation> Annotations { get; set; } = new List<Annotation>();

....

that I render to multiple multiselect like so:

for (var i = 0; i < Model.Annotations.Count; i++)

{

<div class="form-group">

@Html.Label(Model.Annotations[i].Name)

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

@(Html.Kendo().MultiSelectFor(m => m.Annotations[i].SelectedOptions)

.DataTextField("Name")

.DataValueField("Value")

.BindTo(Model.Annotations[i].Options)

.Placeholder(Model.Annotations[i].Placeholder)

)

</div>

}

On post of the form, I can see that the selected data is there as as expected in Annotations[0].SelectedOptions:

Annotations%5B0%5D.SelectedOptions: 4

Annotations%5B0%5D.SelectedOptions: 5

Cost: 515

Description: adfasdf

Guid: 40f339ed-b1e8-4a46-a987-8d5d79ec0be0

Name: abcasdfsadf

OwnerNotes:

SelectedOwners: 1

SelectedOwners: 2

Version:

However, the selected Values are not populated back in the Model object that I receive.

Annotations List is populated with 1 Annotation as expected, but Annotations[0].SelectedOptions is not populated.

There is another Multiselect directly bound to the model and here I see Selected values in the model as expected.

What am I missing?

Regards Erwin

MultiSelect

answered on 29 Aug 2017

1 answer

221 views

All rows as selected automatically.

Hi,
I'm using a kendo grid inside a bootstrap popup, and i need to select some rows. In kendo grid i use the properties "columns.Select().Width(50);" and ".PersistSelection()", when selected one row in the first page all works fine, but when i change the page, all rows in all pages are selected automatically.

¿How can i select only some rows in differents pages?

Grid

answered on 29 Aug 2017