I'm using Kendo ui for aspnet core MVC. And I can't find out how to set the placeholder text.
I'm configuring the grid search like this
.ToolBar(tools => tools.Search())
.Search(s => { s.Field(c => c.IncidentEvent); })
Is there a way to set the "Search..." text, without having to write custom Jquery code?
I mean I know it can be achieved by doing:
$(".k-grid-toolbar .k-input")[0].placeholder = "Search Incident Event...";
But is there really no better and cleaner way?
ToolBar.Search.Text is what you're looking for: https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridToolBarSearchCommandBuilder#textsystemstring
The alternative would be to set the ToolBar.Search.Template and set it manually: https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridToolBarCommandFactory#templatesystemstring
Related
How can I change the language for Sorting on PF DataTable component with reflow = "true" (so responsive Datatable)?
The problem is that on mobile screen, we can sort data from auto-generated dropdown where we have our sort options, see picture bellow. How can I change the language for this dropdown?
I'm using PF 6.0.
The intended way to do this is to define the following properties in your resource files (see Messages.properties)
primefaces.datatable.SORT_LABEL = Sort
primefaces.datatable.SORT_ASC = Ascending
primefaces.datatable.SORT_DESC = Descending
You can see this when you look at the DatatableRender of primefaces.
Notice i18n is done in different ways in primefaces. Some components like calendar or schedule must be translated via javascript. See here
I never ran into this or used it, but I know the source is open. So I went to the javascript file for the datatable. There I searched for 'Ascending' and via this.ascMessage, I ended up on line 170 where 'datatable.sort.ASC' is used as a key.
This in turn points to line 619 in core.js
getAriaLabel: function(key) {
var ariaLocaleSettings = this.getLocaleSettings()['aria'];
return (ariaLocaleSettings&&ariaLocaleSettings[key]) ? ariaLocaleSettings[key] : PrimeFaces.locales['en_US']['aria'][key];
},
Where you can see the normal PrimeFaces locale functionality is used.
So using your own locale and overriding this part in it, like in the default locale
aria: {
'paginator.PAGE': 'Page {0}',
'calendar.BUTTON': 'Show Calendar',
'datatable.sort.ASC': 'activate to sort column ascending',
'datatable.sort.DESC': 'activate to sort column descending',
'columntoggler.CLOSE': 'Close'
}
Will solve your issue I would expect
I'm trying to find a way to remove the time headers from the kendo scheduler. I've come across a few ways to do it via css, but they tend to leave the scheduler looking a bit "off".
I found some answers in the kendo docs detailing how to do it out of the box with a javascript implementation, but I'm looking for MVC which I can't seem to find any mention of. I've tried and tried to figure out how to do this, but I can't seem to find the appropriate attributes to set.
The kendo MVC wrappers are effectively ASPX/Razor helper functions that generate a javascript implementation. So assuming the javascript solution in the link you provide contains the solution you need, it should be possible to replicate it using the MVC syntax.
Looking at telerik's solution, they manipulate the DOM with javascript in the dataBinding event for Ungrouped and in dataBound for Grouped. You can specify handlers for these events when declaring the scheduler with MVC syntax:
.Events(e => {
e.DataBound("scheduler_dataBound");
e.DataBinding("scheduler_dataBinding");
})
...and then include the implementation of these functions on the page separately (code lifted from the telerik solution):
<script>
function scheduler_dataBound(e) {
var tables = $(".k-scheduler-times .k-scheduler-table");
//Required: remove only last table in dataBound when grouped
tables = tables.last();
var rows = tables.find("tr");
rows.each(function() {
$(this).children("th:last").hide();
}
function scheduler_dataBinding(e) {
var view = this.view();
view.times.hide();
view.timesHeader.hide();
}
</script>
//for hiding time header
$('#schedulerID').find('.k-scheduler-header-wrap').closest('tr').hide()
//for hiding date header
$(".k-scheduler-layout tr:first .k-scheduler-table").find("tr:eq(0)").hide()
How can I change the language for Sorting on PF DataTable component with reflow = "true" (so responsive Datatable)?
The problem is that on mobile screen, we can sort data from auto-generated dropdown where we have our sort options, see picture bellow. How can I change the language for this dropdown?
I'm using PF 6.0.
The intended way to do this is to define the following properties in your resource files (see Messages.properties)
primefaces.datatable.SORT_LABEL = Sort
primefaces.datatable.SORT_ASC = Ascending
primefaces.datatable.SORT_DESC = Descending
You can see this when you look at the DatatableRender of primefaces.
Notice i18n is done in different ways in primefaces. Some components like calendar or schedule must be translated via javascript. See here
I never ran into this or used it, but I know the source is open. So I went to the javascript file for the datatable. There I searched for 'Ascending' and via this.ascMessage, I ended up on line 170 where 'datatable.sort.ASC' is used as a key.
This in turn points to line 619 in core.js
getAriaLabel: function(key) {
var ariaLocaleSettings = this.getLocaleSettings()['aria'];
return (ariaLocaleSettings&&ariaLocaleSettings[key]) ? ariaLocaleSettings[key] : PrimeFaces.locales['en_US']['aria'][key];
},
Where you can see the normal PrimeFaces locale functionality is used.
So using your own locale and overriding this part in it, like in the default locale
aria: {
'paginator.PAGE': 'Page {0}',
'calendar.BUTTON': 'Show Calendar',
'datatable.sort.ASC': 'activate to sort column ascending',
'datatable.sort.DESC': 'activate to sort column descending',
'columntoggler.CLOSE': 'Close'
}
Will solve your issue I would expect
can anybody tell me how to configure my kendo grid that it uses a
x-kendo-template?
The documentation only shows the set up for using client side technology:
http://demos.telerik.com/kendo-ui/grid/toolbar-template
I expect something like this:
.ToolBar(tb=>tb.Template(..some stuff here...))
thx
I don't think you can use the x-kendo-template blocks server-side as they are actually "compiled" into a kendo template via kendo.template() in javascript before using them.
But what you can do is include more razor in the Grid's ToolBar template:
.ToolBar(t => t.Template(#<text>
#(Html.Kendo().ToolBar()
.Name("toolbar")
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("X").Id("X");
items.Add().Type(CommandType.Button).Text("Y").Id("Y");
})
)
</text>))
Or
.ToolBar(t => t.Template(Html.Partial("_ToolBar").ToHtmlString()))
or whatever razor code you want to use.
The following fiddle is using jaydata and kendoui grid MVVM. The data loads nicely but filtering does not work. Why?
Will kendoui and jaydata combination be able to use the kendoui grid grouping functionality any time soon?
http://jsfiddle.net/t316/4n62B/9/
<div id="airportGrid" data-kendo-role="grid" data-kendo-sortable="true" data-kendo-pageable="true" data-kendo-page-size="25" data-kendo-editable="true" data-kendo-filterable="true" data-kendo-columns='["id", "Abbrev", "Name"]' data-kendo-bind="source: airports"></div>
kendo.ns = "kendo-";
$data.service("https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase/", function (factory, type) {
var airportDB = factory();
var vm = {airports:airportDB.Airport.asKendoDataSource()};
kendo.bind($('#airportGrid'),vm);
});
Filtering should work, please provide more info. First of all, you should either use initService or use onReady().
Also, please check the network traffic and paste the relevant part here.
If you see our examples with kendo then you can see filtering in action.
http://jaydata.org/examples/?tags=KendoUI