In this StackBlitz I have a Kendo for Angular Menu. What I need is a search field an button at the right side of the bar. Adding these two elements to kendo-menu doesn't work (see below). Any ideas how to make these to show up?
#Component({
selector: 'my-app',
template: `
<div id='wrapper'>
<kendo-menu>
<kendo-menu-item text="Option 1">
<kendo-menu-item text="Item 1.1"></kendo-menu-item>
<kendo-menu-item text="Item 1.2"></kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item text="Option 2">
<kendo-menu-item text="Item 2.1"></kendo-menu-item>
<kendo-menu-item text="Item 2.2"></kendo-menu-item>
</kendo-menu-item>
<div style="float:right">
<input class="k-textbox" style="width:100px;" />
<button class="k-button" (click)="search()">Search</button>
</div>
</kendo-menu>
</div>
`,
styles:[ `
#wrapper {
width: 100%;
background-color: #f0f0f0;
border: 1px solid #d7d7d7;
}
` ]
})
export class AppComponent {
}
Add one more item and place the elements in the item template:
<kendo-menu-item [cssStyle]="{ marginLeft: 'auto' }">
<ng-template kendoMenuItemTemplate>
<input class="k-textbox" style="width:100px;" />
<button class="k-button" (click)="search()">Search</button>
</ng-template>
</kendo-menu-item>
https://stackblitz.com/edit/angular-7fx7f2?file=app%2Fapp.component.ts
Related
I need to select an image which is inside of a button. The problem is that there are six similar images and they do not have any unique identifier, except their alt message and source. Here is the code I am working with.
<div class="dropup-content" style="height: auto; max-height: 1000px;">
<button type="button">
<img src="images/en_US.png" alt="English" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/nb_NO.png" alt="Norwegian" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/fi_FI.png" alt="Finnish" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/fr_FR.png" alt="French" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/nl_BE.png" alt="Dutch" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/de_DE.png" alt="German" style="width: 45px; height: 30px;">
</button>
</div>
Now, if I need to select the button with the alt value Swedish, how would I do it? For example, I can get the first one using this code:
cy.get('.dropup-content').first().click()
However, the problem is that the sequence comes randomly every time. So I can not rely on the first() or next() methods. Is there any way in Cypress to click on the button with image attribute Swedish?
You can do this like:
cy.get('[alt="Swedish"]').click()
Try
cy.get('button[alt="Swedish"]').click()
But if you have a control on how those buttons are created, I'd suggest you should add data-cy tag to them and then access them by
cy.get('button[data-cy="Swedish"]').click()
Read why in best practices docu
I am trying to build a form with a simple bootstrap row/column layout. Before I add the Kendo class styling the controls appear stacked as expected:
<div class="col-lg-3 form-group">
<label for="CaseName" class="form-label">Name</label>
<input type="text" class="form-control-sm" />
</div>
Once I add the Kendo class for styling the layout becomes horizontal:
<div class="col-lg-3 form-group">
<label for="CaseName" class="form-label">Name</label>
<input type="text" class="form-control k-textbox" />
</div>
Anyone know how to override whatever is happening in the k-textbox class?
Thanks.
As per Kendu Guide on Bootstrap here: Using form-control Bootstrap CSS Class, we have to use custom styling to ensure the form-label and form-control behaves as expected:
<style>
.form-control.k-widget
{
padding: 0;
width: 100%;
height: auto;
}
.form-control.k-widget:not(.k-autocomplete)
{
border-width: 0;
}
</style>
DataSource gets json response data:
categoriesDS = new kendo.data.DataSource({
transport: {
read: {
url: "{{ path('get_json_categories') }}",
dataType: "json"
}
}
});
with white spaces:
{"categoryId":33,"parentId":32,"name":" [ ] p1"}
but rendering it without white spaces. How to change this behaviour?
edit: I need whitespaces in select options input. Below is my template script
<script id="popup_editor" type="text/x-kendo-template">
<form method="post" action="{{ path('updatedoc') }}" enctype="multipart/form-data">
<div class="k-edit-label">
<label for="documentFile">Plik</label>
</div>
<div data-container-for="documentFile" class="k-edit-field">
<input name="files" id="files" type="file" aria-label="files"/>
</div>
<input name="documentId" id="documentId" type="text" data-bind="value:documentId" style="display: none;"/>
<div class="k-edit-label">
<label for="documentDateAdd">Data Dodania</label>
</div>
<div class="k-edit-field">
<input type="text" class="k-input k-textbox k-state-disabled" name="documentDateAdd"
data-bind="value:documentDateAdd" disabled>
</div>
<div class="k-edit-label">
<label for="documentDesc">Opis</label>
</div>
<div data-container-for="documentDesc" class="k-edit-field">
<textarea name="documentDesc" class="k-textbox" data-bind="value:documentDesc"></textarea>
</div>
<div class="k-edit-label">
<label for="user">Twórca</label>
</div>
<div data-container-for="user" class="k-edit-field">
<input type="text" class="k-input k-textbox k-state-disabled" name="user" data-bind="value:user"
disabled>
</div>
<!-- dropdownlist-->
<div class="k-edit-label">
<label for="FacultyRankId">Kategoria</label>
</div>
<!-- dropdownlist editor for field: "FacultyRankId" -->
<div class="k-edit-field" id="categoriesDiv">
<input id="categoriesInput" name="categoryId"
{# tu wskazuję z którą wartością z data-source wiązać ten input tj z czym synchronizować, czyli
zmiany w inpucie na które pole ma wpływać z dataSource#}
data-bind="value:categoryId"
data-value-field="categoryId"
{#to co jest wyświetlane w dropdown#}
data-text-field="name"
data-source="categoriesDS"
data-role="dropdownlist"
data-value-primitive="true"
/>
</div>
<script type="text/javascript">
$('.k-edit-buttons:eq(1)').hide();
$("span.k-dropdown-wrap > span.k-input").each(function() {
console.log($(this).text());
var text = $(this).text().replace('PODKATEGORIA666, ', '. .');
$(this).text(text);
});
<\/script>
<div class="k-edit-buttons k-state-default">
<button type="submit" class="k-button k-primary"> Aktualizuj </button>
</div>
</form>
</script>
and style selector that didn't work:
<style>
input#categoriesInput { white-space: pre; }
</style>
(It looks like your post is mostly bar code; please add some more details.It looks like your post is mostly code; )
Try setting white-space style to pre and depending on the widget that you want to use it you will have to use different selectors.
Following an example for showing it in a drop down list:
<style>
span[aria-owns="color_listbox"] { white-space: pre; }
#color-list .k-item { white-space: pre; }
</style>
Following a snippet
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: " [ ] Black", value: "1" },
{ text: " [ ] Orange", value: "2" },
{ text: "Grey", value: "3" }
]
});
span[aria-owns="color_listbox"] {
white-space: pre;
}
#color-list .k-item {
white-space: pre;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<input id="color" value="1" style="width: 100%;" />
I'm wondering if there is a way to customize the window that pops up when you click on the kendo scheduler. I would like to remove the "all day event" checkbox.
Also consider using CSS:
div[data-container-for='isAllDay'] {
display: none;
}
label[for='isAllDay'] {
display: none;
}
You can do this using templates. The template documentation is very sparce, but I have used this as a trimmmed-down version of the scheduler edit window.
In the MVC razor declaration add .Editable(e => e.TemplateId("editor"))
then add a script to your view that contains the following:
<script id="editor" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="title">Title</label></div>
<div class="k-edit-field" data-container-for="title">
<input type="text" class="k-input k-textbox" name="title" data-bind="value: title"></div>
<div class="k-edit-label">
<label for="start">Start</label></div>
<div class="k-edit-field" data-container-for="start"><span style="display: none;" class="k-widget k-datetimepicker k-header"><span class="k-picker-wrap k-state-default">
<input type="text" data-bind="value: start, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span></span></span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind=" value: start, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind=" text: startTimezone"></span><span class="k-invalid-msg" data-for="start" style="display: none;"></span></div>
<div class="k-edit-label">
<label for="recurrenceRule">Repeat</label></div>
<div class="k-edit-field" data-container-for="recurrenceRule">
<div data-bind="value: recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
</div>
<div class="k-recur-view"></div></script>
You can use the edit event of the scheduler to hide the all day checkbox.
edit: function(e) {
e.container
.find("[name=isAllDay]") // find the all day checkbox
.parent() // get its wrapper
.prev() // get the label wrapper
.remove() // remove the label wrapepr
.end() // get back to the checkbox wrapper
.remove(); // remove the checkbox wrapper
},
Here is a live demo: http://jsbin.com/ibOYUXev/1/edit
If you're looking for a full control over the contents of the editor dialog, you can use template:
template
<script id="editor" type="text/x-kendo-template">
<h3>Edit meeting</h3>
<p>
<label>Title: <input name="title" /></label>
</p>
<p>
<label>Start: <input data-role="datetimepicker" name="start" /></label>
</p>
<p>
<label>Start: <input data-role="datetimepicker" name="end" /></label>
</p>
</script>
scheduler div
<div id="scheduler"></div>
script
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
editable: {
template: $("#editor").html()
},
views: [
{ type: "day" }
],
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]});
</script>
I'm using the free version of kendo UI web. I'm showing a progress indicator using the code:
kendo.ui.progress($('#loginform'), true);
where $('#loginform') is the div that I'd like to show the progress indicator over. I was under the impression the progress indicator would be contained and centered within the div that I provide to the function. However, it appears to be showing over the entire page instead. I've also tried:
kendo.ui.progress('#loginform', true);
and
kendo.ui.progress('loginform', true); (which caused an error).
I assume I'm not wrong about the way it's supposed to work, otherwise why would the function take the name of a div at all. Any ideas as to what I'm doing wrong?
As far as I can tell, I'm doing the same thing. Here is my HTML:
<form class="form-signin" id="loginform">
<h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
<input type="text" id="username" class="input-block-level" placeholder="Username" />
<input type="password" id="password" class="input-block-level" placeholder="Password" />
<label class="checkbox" style="color:whitesmoke;">
<input type="checkbox" id="remember" value="remember-me" /> Remember me
</label>
<button type="button" id="login" class="btn btn-large btn-success">OK</button>
<button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
</form>
Sorry, I can't seem to figure out how to format it correctly.
I think the jsFiddle example only looks centered because that tab is the entire page in the example.
You need to define positioning for loginform either relative, absolute or fixed.
Try adding the following CSS definition:
#loginform {
position: relative;
}
You need this because the progress tries to completely cover the HTML element that contains it. To do that, it defineswidth and height as 100%. So, to constrain its size to the size of the container (and do not overflow it), you need to define the position as one of these.
It might also work if some of the ancestor have one of these positioning. In this case it will cover the 100% of this and not the 100% of the immediate ancestor.
Example: Define the following styles
#container1 {
position: fixed;
border: 1px solid red;
margin: 3px;
}
#container2 {
position: static;
border: 1px solid green;
margin: 30px;
}
and the HTML as:
<div id="container1">
<div id="container2">
<form class="form-signin" id="loginform">
<h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
<input type="text" id="username" class="input-block-level" placeholder="Username"/>
<input type="password" id="password" class="input-block-level" placeholder="Password"/>
<label class="checkbox" style="color:whitesmoke;">
<input type="checkbox" id="remember" value="remember-me"/> Remember me </label>
<button type="button" id="login" class="btn btn-large btn-success">OK</button>
<button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
</form>
</div>
</div>
You will see that it covers 100% of container1 since this is fixed while container2 is static.