I'm currently using GridMvc to display a list on an Ajax view using this code:
columns.Add()
.Titled("Host").Filterable(true).Encoded(false)
.Sanitized(false)
.RenderValueAs(LogonEvents => Html.ActionLink(LogonEvents.Host,
"Computers", new { computerName = LogonEvents.Host,
userName = LogonEvents.Name,
onclick = "showPageLoadingMessage()" }));
I'd like to use buttons rather than an ActionLink but I'm not sure how to pass the values to the next view.
You could just keep it simple and apply a CSS class to the htmlAttributes object.
Html.ActionLink("Button Name", "Index", null, new { #class="classname" })
and then create a class in your stylesheet
a.classname
{
background: url(../Images/image.gif) no-repeat top left;
display: block;
width: 150px;
height: 150px;
text-indent: -9999px; /* hides the link text */
}
Or code your own HTML Helper.
Related
I use kendo-ui dropdown.
I add some ovveriding-css, and it works well.
.k-animation-container {
//this is popup that is html is rendered out of the page element
//so it cannot be selected by id / panaya class / panaya element
.k-popup.k-list-container {
.k-item,
.k-item.k-state-selected,
.k-item.k-state-focused {
background-color: transparent;
color: $darken-gray-color;
margin-left: 0;
margin-top: 0;
}
}
}
The problem is, that while each dropdown has other input element instance, the list has one instance that is hidden and when you click any combo - is shown near the currently clicked combo.
What say - when you ovveride the list-container style - dows it for all of the combooxes.
Is there any solution for this issue?
Well this is a known problem, for every popup kendo renders independent div with class k-animation-container
You can try with this solution suggested on telerik forum:
k-animation-container
$("#spreadsheet").on("click", ".k-spreadsheet-editor-button", function(e) {
var animationContainer = $(".k-animation-container").last();
// use some custom conditional statement that will determine if this is the correct list popup, e.g. check what's inside the popup
if (true) {
animationContainer.children(".k-popup").css("min-width", 200);
}
});
Didn't try it my self, gl.
One solution I found was to use
popup: {
appendTo: $(some parent with ID)
}
This way we can manipulate styling of that particular .k-animation-container.
But this doesn't work on every widget, unfortunately.
My team find a great solution:
There is an option to give the input-element custom id.
Then you can select the list-container by the custom id you gave +'list' str.
Now, if you want to get the k-animation-container, you can select the list element and then request its parent.
Code sample:
The input element:
<span
kendo-multi-select
id="my-type-dd"
k-options="$ctrl.getVMultySelectConfig()"
k-ng-model="$ctrl.selectedTypes"
></span>
Selectors:
If you need only the k-list-container and not must the k-animation-container, you can do that by css:
.k-animation-container #my-type-dd-list {
//this is popup that is html is rendered out of the page element
//the id is the id you give to the element + '-list'
&.k-popup.k-list-container {
padding: $space-normal 0 $space-small $space-small;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
}
}
If you need the k-aniamation-container you need to select it by jQuery becouse css doesn't have parent selector:
var kAnimationElement = $("#my-type-dd-list").parent();
In Kendo for Angular 2, how do you replace the grid's column sort icon, which is currently a arrow, with Kendo Glyphicons?
I tried this in my scss file, but it did not work
.k-grid-header .k-header .k-link > .k-icon {
background-image: none; /* remove Kendo's sprite image */
font-family: KendoUIGlyphs;
}
.k-grid-header .k-header .k-link > .k-icon.k-i-sort-desc::before {
content: '\e61a'; /* KendoUIGlyphs down arrowhead */
}
.k-grid-header .k-header .k-link > .k-icon.k-i-sort-asc::before {
content: '\e618'; /* KendoUIGlyphs up arrowhead */
}
The default arrows in Kendo UI for Angular 2 use font icons, so there is no need to change the font-family or remove the sprite image. Instead, just set the pseudo-element content:
.k-grid-header .k-i-arrow-n::before {
content: '\e61a';
}
.k-grid-header .k-i-arrow-s::before {
content: '\e618';
}
See this runnable demo.
I know it is very old question, but just in case if somebody wants to use content with font-family for pseudo-element:
.yourClass : after {
content: "\e014";
font-family: 'WebComponentsIcons';
}
How to disable Street View dragging / swiping? This is important especially on mobile devices, where the both the Street View and the whole web page are scrolled by swiping on the screen with a finger. In fact if you try to scroll the page touching with finger a point where you have a Street view, you will scroll the Street view instead of the page.
If the Street view is full-width this may be an usability issue.
Google API does not provide this option, but I managed it to work by placing an invisible div on top of the Street view, preventing the underlying Street View receiving evented. I created a toggle button "Drag Street View / Drag web page). The button can dynamically show/hide Street view controls according to the enabled/disabled state of the Street View.
Example here: http://www.genovaperte.it/item/antico-forno-ursida/
Please see it from a mobile touch device because the toggle button is needed and shown, in my context, only for mobile touch devices. In desktop devices Street View is Always navigable by default because there aren't issues with this.
Outline of the code (here using jQuery and Modernizr):
CSS:
.draggable-street-view-toggle-button { cursor: pointer; background-color: #fff; border: solid 2px #firstThemeColor; z-index: 1000; position: absolute; right: 40px; padding: 10px; } /* the toggle button appearance. right = 40px to not overlap the close button */
.prevent-dragging { position: absolute; width: 100%; height: 400px; z-index: 999; } /* the hidden layer to prevent draggin events reach the underlying Street View */
#directory-main-bar.hide-gmnoprint .gmnoprint { display: none; } /* class dynamically added/removed to toggle controls */
HTML:
<div id="directory-main-bar">
... Here you have to initialize your Street view via Google API or with your preferred jQuery plugin like GMAP3 ...
I recommend these options: defaultDisableUI = false, enableCloseButton : true, and zoomControl : Modernizr.touch ? false : true,
</div>
JS:
function toggleStreetViewControls(state) {
mapDiv = $("#directory-main-bar");
if(!state) {
$('<div class="prevent-dragging"></div>').height(400).insertBefore(mapDiv); /* 400 is the Street View height you've chosen when setupping it */
mapDiv.addClass('hide-gmnoprint');
}
else {
$('.prevent-dragging').remove();
mapDiv.removeClass('hide-gmnoprint');
}
}
if (Modernizr.touch){
var swDraggableButton = $('<div class="draggable-street-view-toggle-button"></div>').insertBefore(mapDiv);
$('<div class="prevent-dragging"></div>').height({!$themeOptions->directoryMap->mapHeight}).insertBefore(mapDiv);
mapDiv.addClass('hide-gmnoprint');
}
swDraggableButton.click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active').addClass('inactive').text({__ 'Drag web page'});
toggleStreetViewControls(false);
} else {
$(this).removeClass('inactive').addClass('active').text({__ 'Drag Street view'});
toggleStreetViewControls(true);
}
});
}
Is there a way of manually loading the view from within the controller, after say some animation was triggered first? The scenario I have is the previous page content sliding up, after that the view would be updated when being off-the screen and once ready - slides back down with the new view from the new controller.
I've got already the router set up, but it just instantly replaces the view whenever the new controller is called.
Any fiddle if possible please?
Code in Controller shouldn't manipulate DOM, directives should. Here is directive to prevent preloading content of element with "src" (by browser's parser) and show content of element only after loading, and before loading show splash with spinner:
directive('onloadSrc', function($compile) {
return function(scope, element, attrs) {
element.bind('load', function() {
var parent = $compile(element[0].parentElement)(scope);
if (!element.attr('src') && attrs.onloadSrc) {
element.attr("src", attrs.onloadSrc);
// replace this dirty hardcode with your template for splash spinner
var spinner_div = $compile('<div style="z-index: 100; width: '+element.attr('width')+'px; height: '+element.attr('height')+'px; display:block; vertical-align:middle;"><img src="/img/spinner.gif" style="position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px;"/></div>')(scope);
attrs.onloadSrc = "";
parent.prepend(spinner_div);
element.css("display", 'none');
attrs.xloading = spinner_div;
}
else {
if (attrs.xloading) {
attrs.xloading.remove();
attrs.xloading = false;
element.css("display", 'block');
}
}
}
);
}});
To use this directive, leave empty attribute src of element and fill attribute onload-src.
Angular has animations build in in unstable branch, which should perfectly fit your scenario.
Just check out http://www.nganimate.org/angularjs/tutorial/how-to-make-animations-with-angularjs.
ng-view directive has build in 'enter' and 'leave' animations.
Check you this sample: http://jsfiddle.net/nFhX8/18/ which does more less what you'd like to achieve.
Hey frenz In my mvc 3 project i need a pop up box. Actually when the user click the edit button, I need to show the Edit View page as pop up box and save the edited data in database.
Simply, I need to replace the edit view page with edit pop up box.
I know that i need to use ajax and jquery. But confuse how to implement it.
So, Any idea about this will be greatly appreciated
I have also faced such type of situation and I preferred some style sheet instead of using any 3rd party control. I am writing sample code here.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”>here</a></p>
<div id=”light” class=”white_content”>This is the lightbox content. <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’”>Close</a></div>
<div id=”fade” class=”black_overlay”></div>
</body>
</html>
Onclick event you need to display user control in that div. I have used json object for that. Javascript code is like this.
function ShowPopups(cntrlId, controllerName, actionName, className, id) {
var url = controllerName + "/" + cntrlId;
elementId = id;
$.ajax(
{
type: "POST",
url: "/" + controllerName + "/" + actionName,
data: "Display=" + cntrlId,
dataType: "html",
success: function (result) {
removeClass('light1');
changeClass('light1', className);
document.getElementById('light1').style.display = 'block';
document.getElementById('fade1').style.display = 'block'
$("#light1").html(result);
}
});
}
function HidePopup() {
var url = document.location.hash;
document.getElementById('fade1').style.display = 'none';
document.getElementById('light1').style.display = 'none';
document.location.hash = url;
}
// To Add and Remove class using javascript
function removeClass(elementID) {
var element = document.getElementById(elementID);
element.className = '';
}
function changeClass(elementID, newClass) {
var element = document.getElementById(elementID);
element.className += newClass;
}
you can use JQuery model dialog box(use model form) it is really simple, Here is the documentation with examples. http://jqueryui.com/demos/dialog/#modal-form
I also recommend Jquery UI model dialog still you want to try out something else here is the list of Jquery Model PopUp Samples
So many of the other tutorials don't cover how to actually edit data, only how to show the dialog. When you try to post your form, the entire window will post and change.
jQuery ui's dialog method has some funny behavior at times, and validation won't work by default unless you parse newly loaded content.
With that said, the best overall code I've found recently is this solution here to handle the ajax loading and posting.
http://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/