I am able to scroll to a section of the website, and click on the element. But my test fails as the elements opening on the click is not visible without scrolling again.
This is the code I used to scroll and click:
var filter = theSwitch.pageBar;
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
theSwitch.pageBar.click();
Related
I have a kendo grid present within a tab strip with two tabs. While navigating between the tabs and performing any event, the width of the grid shrinks.
For example: When the user clicks on the update button on the grid in tab 2, and navigates back to tab 1, the grid in the first tab shrinks and the width resize to 10% of its original size. I'm not sure why this happens, I tried setting the CSS to a fixed width, but it doesn't work, is there any way I can ensure it doesn't resize
note: the Kendo grid is displayed within the Kendo tab strip, and the tab strip is present within a kendo splitter pane.
So are you wrapping the grid and the Kendo Tab Strip in a div? I would also need to see the code. I have used the kendo grid on the top half of my web page with a splitter in the middle and a Kendo Tab strip in the bottom pane. So the entire page is wrapped in a wrapper div and I write a grid resize function to resize the grid.
var resizeGrid = function () {
var gridElement = $("#grid"),
dataArea = gridElement.find(".k-grid-content"),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function () {
otherElementsHeight += $(this).outerHeight();
});
dataArea.height(gridHeight - otherElementsHeight);
}
Not sure if this is what you want but hope it gives you some insight.
I have a kendo modal window in my angular app. Sometimes I auto-close the window after a second. At those times, I'd like to hide the Close [x] button, but at other times, not. Can it be done just before the window is opened?
if (autoCloseDelay) {
// hide the close [x] button here ??
$timeout( function() {
$scope.modalWindow.close();
}, autoCloseDelay, $scope);
}
$scope.modalWindow.open();
If you don't want to play with CSS, you can use setOptions to set programmatically the actions.
Example for removing the Close button:
// Get current actions
var actions = $scope.modalWindow.options.actions;
// Remove "Close" button
actions.splice(actions.indexOf("Close"), 1);
// Set the new options
$scope.modalWindow.setOptions({ actions : actions });
I believe you can do it like this:
// hide the close [x] button
$scope.modalWindow.parent().find(".k-window-action").css("visibility", "hidden");
Here is a sample jsFiddle
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );
i am using a kendo Panel bar.
i am loading the dynemic Content for each item in panel bar from partial view.
What is need is i need to reload content of panel bar item each time item is selected.
when i first time select the item in panel bar it makes ajax request to server and fills the content in item. but when i select it second time it does not make request to server. it displays the old data which id fetched from server when i click first time on item.
is there any way i can reload content of item of panel bar each time item is expanded? How can i do this?
#(Html.Kendo().PanelBar()
.Name("QuickViewP")
.ExpandMode(PanelBarExpandMode.Single)
.HtmlAttributes(new { style = "width:100%" })
.Items(panelbar =>
{
panelbar.Add()
.Text("Account Summary")
.Expanded(true)
.ImageUrl(Url.Content("~/Content/Images/account-summary.png"))
.LoadContentFrom("AccountSummary", "QuickView");
panelbar.Add()
.Text("Messages & Notifications")
.ImageUrl(Url.Content("~/Content/Images/messages.png"))
.LoadContentFrom("MessagesNotifications", "QuickView");
panelbar.Add().Text("Investment Elections")
.ImageUrl(Url.Content("~/Content/Images/investment.png"))
.LoadContentFrom("InvestmentElections", "QuickView");
}).Events(events => events.Expand("QuickViewPExpand"))
i have Added event like this.
i m able to get new content every time panel item is expanded
but i have one problem . when i click the panel item first time it sends 2 Get ajax request
to the server. after that whenever i click panel item it works properly. it send ajax request and fill the new content.
What should i do to send only one requst when the panel item is clicked first time ?
This is the script i m using .
<script>
function QuickViewPExpand(e) {
debugger;
var panelBar = $("#QuickViewP").data("kendoPanelBar");
var item = panelBar.select();
//if (item.hasClass("k-state-active")) {
// panelBar.collapse(item);
//} else {
// panelBar.expand(item);
//}
// reload the panel bar
// This reloads all items in panel bar i just need to only reload the panelItem
// which is clicked
//panelBar.reload("> .k-item");
// I am uisng this to reload item which is clicked
panelBar.reload(item[0]);
}
</script>
I would probably do something like this:
var panelBar = $("#QuickViewP").kendoPanelBar({
expand: refreshContent()
});
var refreshContent = function(){
var panelBar = $("#QuickViewP").data("kendoPanelBar");
// reload the panel bar
panelBar.reload("> .k-item");
}
The syntax may not be exact, but should get you close.
I am using HP webOS 3.0 and the Enyo framework.
I have simple question that how can I show and hide images on click of a button. I have 2 images and I want to show images on click of one button and hide on click of another button.
I have two panes called left pane and right pane on a single view.
I have around 10 items on left pane.
On each of the item click appropriate view is called on right pane.
I am doing it with following code.
showTaskView: function(){
this.$.rightPane.selectViewByName("taskView");
},
Now I want to know how can access the control's property in the main view containing both left pane and right pane.
For example,
I want to show / hide image in the taskView displayed on the right pane on click of the button that is neither in the left pane or right pane but on the header part of the view that contains both left and right pane.
It is not allowing me to access the control's image.setSrc method from the main view.
I have tried it with the following code.
editTask: function() {
this.$.task.image.setSrc("images/image2.jpg");
}
and
editTask: function() {
this.$.image.setSrc("images/image2.jpg");
}
It gives me the following error:
Cannot read property 'setSrc' of undefined
With VirtualList, your hash will only reference the currently "selected" row. "selected" being either the row receiving an event or one explicitly selected using prepareRow(). If you want to change every row, you should set a property and call refresh() on the list to cause it to rerender.
The below should work (I think ...)
setupRow: function(inSender, inIndex) {
var row = this.data[inIndex];
if (row) {
this.$.caption1.setContent("Greet a " + row.task + ":");
this.$.star.setSrc("images/grey-star.png");
if(this.hideStart) this.$.star.hide();
this.$.caption2.setContent(row.assignto);
return true;
}
},
buttonClick: function(){
this.hideStar = true;
this.$.myVirtualList.refresh();
}