We have implemented in grid a conditional filter using 'filterMenuOpen' and 'filter' events of the grid. And it works.
Now we have a page where a hierarchy data needs to be display and must have the same look and feel as the grid, hence the conditional filtering. In order to do this we have modified the treelist in order to have the 'filterMenuOpen' and 'filter' events on tree adapting the code from grid.
We also handled the filter open like in the thread http://www.telerik.com/forums/cascade-filter-using-ajax-binding
But we have found that setting the filter on treelist does not work in the same way as it does for grid:
1. We have a table with Id, MainField, SubField, ParentId => the data is displayed in the treelist correctly
(The SubField has to have the source dynamic based on the MainField selected)
2. Select a filter on MainField => the data is filtered correctly
3. Select a filter on SubField => The datasource of SubField it is correct based on the selected MainField filter value and the filter is done correctly
4. Change the MainField filter and select another value (we have to remove the SubField filter) =>
The TreeList displays changes multiple times and the last one is not the correct one (It displays the same data as the first filter at point 2)
Questions:
1. Is there a way to make the filter functionality work like in grid?
2. Is there a plan to soon release a new version to make the treelist have the same functionality as the grid? If not can we still hope there will be one :D
3. Is there a solution to implement the hierarchy in the grid?
PS: Because we are using MVC and should have the same filtering as the grid we had to attach to the framework the same functionality (as in grid) already supported by the filter (kendoFilterMenu) in treelist.
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
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.
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"))
)
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?
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
>
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
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
>
<
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.
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.
))