This is a subject based on "jqGrid - Change filter/search pop up form - to be flat on page - not a dialog" .
I've made the search form to be flat based on the subject , but right now I want not to show always on page , I want to show it only when the user press Search button from the jqGrid.
Can anyone give me an hint or solution how to do that, please?
#Oleg can you help me with that , please?
Thanks
Th solution could be very close to the old one. You can use the following options of the searching dialog:
overlay: 0,
drag: false,
beforeShowSearch: function ($form) {
var $searchDialog = $form.closest(".ui-jqdialog"),
$gbox = $(this).closest(".ui-jqgrid");
$searchDialog.insertBefore($gbox);
$searchDialog.css({
position: "relative",
zIndex: "auto",
float: "left"
})
$gbox.css({clear:"left"});
}
Other options (like closeOnEscape: true, closeAfterSearch: true, closeAfterReset: true, searchOnEnter: true, searchOperators: true and other) can be chosen depend on your preferences.
The demo displays the searching dialog like
If you prefer to use Bootstrap CSS instead of jQuery UI CSS then one should add some additional lines:
overlay: 0,
drag: false,
beforeShowSearch: function ($form) {
var $searchDialog = $form.closest(".ui-jqdialog"),
$gbox = $(this).closest(".ui-jqgrid");
$searchDialog.insertBefore($gbox);
$searchDialog.css({
position: "relative",
zIndex: "auto",
padding: 0,
float: "left"
});
$searchDialog.children(".modal-dialog").css({
marginTop: 0,
marginBottom: 0
});
$searchDialog.find(".modal-content").css({
boxShadow: "none"
});
$gbox.css({clear:"left"});
}
See the demo which displays:
Related
I am developing a Task pane word add-in using JavaScript API, I have used below code to create a jQuery dialogbox dynamically using a function:
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">'
+ dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
position: {
my: "center",
at: "center",
of: window
},
buttons: {
OK: function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
But when i open it first time to call myConfirm function, the page scroll goes to top and when i scroll down to click on dialog-box it again send the scroll back to top then i need to again scroll down, now i am able to click on dialog-box buttons. it works fine after first.
I need to set dynamically text of box and function on button clicks so i am creating it dynamically. I have also test it on Internet Explorer, it's working fine.
Please advice how i can fix it for word add-in.
You can try below code when you are calling your function :-
onclick="myConfirm();return false;"
Just add "return false;" after your function name as shown above.
Edit 1:-
Or you can return false from your function as well.
Edit 2 :-
$form.show().dialog({
close: function (event) { event.preventDefault(); }
resizable: false,
etc....
});
I'm hoping someone can offer help in this. I have a Kendo grid in a html document (no MVC), and am wanting to change the class of the entire row on row select. I have tried various approaches, still with no luck. I am currently at:
// within kendo grid definition - grid called '#grid'
change: function (e) {
$("#grid tbody").find("tr[k-state-selected]").css("color", "black");
var id = $("#grid").closest("tr").css("color", "black");
CallDocument(this._data[0]);
},
The function CallDocument is being fired, and so I know I can at least get to the function.
EDIT: Here is the solution that I came up with, and thanks to everyone
change: function (e) {
$("#grid tbody").find("tr.k-state-selected").attr("class", "detail read k-state-selected");
},
I needed to use the 'tr.k-state-selected' form, and change using attr in order to change the set of classes.
To mark every visited row as selected, you might add a CSS class on change event.
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : false,
pageable : true,
selectable: true,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
],
change : function (e) {
this.select().addClass("ob-selected");
}
}).data("kendoGrid");
The class ob-selected stays when you move to another cell since this does nothing to do with KendoUI.
Example here : http://jsfiddle.net/2TGLp/1/
The only question is that it does not stay selected if you apply filters, change to a different page... but not sure if this is important for you.
I override my Kendo styles using both css and javascript (depending on the scenario).
CSS:
.k-state-selected {
color: black;
}
Javascript/jQuery:
$('k-state-selected').css('color', '#000000')
So to give you an idea of what I am working with, I have a popped up modal that contains a series of individual forms in the modal. Based off the current selection, the forms will be either disabled, or enabled. If they are disabled, I would like to display a message box over the disabled form in the modal explaining why it is disabled.
I've tried using Ext.msg.alert and other forms of Ext.msg, however I am unsuccessful in getting them to remain over the forms. I can align them over the form, but upon scrolling it doesn't stay over the form, it just stays fixed in the main window position, instead of follow the form inside the modal. Is this possible to do?
I then tried to do it in a hackish way and set a loading mask over the form, which displays the message, but that as well moves when you scroll down.
I attempted to use the 'fixed' property of the components, but it seemed to do nothing.
I am not sure if I am looking at this from the wrong angle or what, but things don't seem to be working out for me.
Any ideas?
listeners:{
afterlayout: function(form, eOpts){
if(form.disabled){
var msg = Ext.Msg.alert({title:'Disabled', modal: false, fixed: true, msg:'Blah blah blah mmmkay.'});
msg.alignTo(form.el, 'c-c');
//fixed
}
}
},
Try this and let me know the result. Basically, we can override the base components or write our components.
Ext.define('Artlantis.view.OverlayWindow', {
extend: 'Ext.window.Window',
alias: 'widget.overlaywin',
defaults: {
autoScroll: true
},
layout: 'fit',
width: '50%',
height: '50%',
modal: true,
closeAction: 'destroy',
initComponent: function() {
this.callParent(arguments);
}
});
// to call this component
Ext.create('Artlantis.view.OverlayWindow',{
title: 'Disabled',
items: [
{
xtype: 'panel',
items: [
...
]
}
]
});
// or call by xtype
...
xtype: 'overlaywin'
I have an HTML5 page with several data inputs inside a jQuery Dialog box. I sweep this data into form processing with the input attribute form=dataInput. It works fine in Firefox and Chrome, but not in IE because IE does not support the input form attribute. Something about the Dialog widget makes input box elements 'invisible' to form processing. The form attribute fixes this for browsers that support HTML5, but no released IE has this support. I tried $('.ui-dialog').appendTo('form'); in the Dialog open: option, but it does not fix the problem. Is there a way to get IE to sweep input data out of a Dialog widget and into $_POST ?
Here is a sample of an input box inside the Dialog
<label><input type="radio" id="unitedStates" name="country" form="dataInput" value="US">United States</label>
I use the jQuery Form plug-in to perform the submit. It has some options, like beforeSubmit and beforeSerialize, but I don't understand the documentation or the submit process well enough to know if they can be used to solve this problem. Please be specific with code or tutorials. I'm new enough to this that I don't follow general instructions well. ;-) (BTW, IE has the other feature support I need, just not this one.)
Here's my code with Andrew Hagner's suggestion and my modification. Dialog works, but IE does not set a value for the country. What needs to change?
var countrySelected = $("input[type=radio][name=country]").val(); //set earlier by W3C geocoding
var countryChooser = $('#countryChoices').dialog( {
autoOpen: false,
bgiframe: true,
height: 300,
width: 850,
resizable: false,
draggable: true,
title: "Click to select another country",
open: function () {
$('#regions').tabs(
{
event: "mouseover",
})
},
buttons: {
'Close / continue location input': function ()
{
countrySelected = $('input[name=country]:checked').val();
$(this).dialog('close');
}
}
});
//then later on
getCityFromGeonames3Step(countrySelected);
Updated:
// Before you enter dialog, assign the element you will
// be grabbing the info from to a variable.
var countrySelectionElement = $("input[type=radio][name=country]").val();
var countrySelected = "";
var countryChooser = $('#countryChoices').dialog( {
autoOpen: false,
bgiframe: true,
height: 300,
width: 850,
resizable: false,
draggable: true,
title: "Click to select another country",
open: function () {
$('#regions').tabs(
{
event: "mouseover",
})
},
buttons: {
'Close / continue location input': function ()
{
// Since jQuery won't work in here, use the variable
// we assigned above to access value.
countrySelected = countrySelectionElement.val();
$(this).dialog('close');
}
}
});
//then later on
getCityFromGeonames3Step(countrySelected);
Original:
Before you open the dialog assign the input to a variable:
function OpenDialog()
{
var input = $("yourinput");
// Open dialog, use input to work with that element.
// If you want you can then place the entered data in a hidden field
// using jQuery, in the same way we are using input here. Then you will
// be able to post that data back however you like.
}
I had this problem the other day, I found this solution on jQuery's Dialog site.
http://jqueryui.com/demos/dialog/#modal-form
I am using a fancy box which displays images, youtube video link and other videos. The user can navigate in the fancy box to go to next display or previous display. My problem is the fancy box doesn't get re-sized based on the displayed content. My code is as below:
$.fancybox(href,{
'autoScale': true,
'autoDimensions': true,
'padding': 30,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe', //'iframe', //'image',
'changeFade': 300,
'cyclic': false,
});
I have tried solving this issue by calling a function in "onComplete" but no success till now. Please provide few inputs on this.
Thanks
setting "autoScale" to false should work...
I'm not a web developer by any means, but the documentation says:
$.fancybox.resize Auto-resizes FancyBox height to match height of content
Is that what you want?
You need to call a new fancybox within the old one. If you "open" a new fancybox from within the first one, it will resize itself. Try:
<script type="text/javascript">
$(document).ready(function() {
var content = '
<div id="nextbox">Box 1</div>
<script type="text/javascript">
$("#nextbox").click(function() {
$.fancybox('Box2',{
'autoDimensions': false,
'height' : 400,
'width' :400
});
});
</script>
';
$.fancybox(content,{
'autoDimensions': false,
'height' : 200,
'width' : 200
});
</script>
This will open up a fancybox that says "Box 1". When you click on "Box 1" it will resize from 200px by 200px to 400px by 400px and change text to "Box 2". And you can keep on doing this for as many boxes as you want.
I see the question is old, but hope someone can use this as I struggled a long time myself finding out how to resize fancybox once it was initiated.
In my case while using Fancybox 2 the setting was called fitToView
set it to true
here is what I use to launch fancybox, you do not need to put it in ready
(function($){
$(document).on('click','.fancybox',function(e){
//don't follow link
e.preventDefault();
//update fancybox image registry for gallery and open it
var fbox = $('.fancybox');
//this always opens the first image first
$.fancybox(fbox,{
index: fbox.index(this),
padding: 5,
live: false,
helpers : {
overlay : {
css : {
'background-color' : 'rgba(17, 17, 17, 0.3)',
},
closeClick: true,
showEarly : true,
locked : false //if true, causes background to jump
},
thumbs : {
width : 140,
height : 100,
source : function(item) {
var href = $(item.element).data('thumb');
if(typeof href === 'undefined'){
if (item.element) {
href = $(item.element).find('img').attr('src');
}
if (!href && item.type === 'image' && item.href) {
href = item.href;
}
}
return href;
}
}
},
scrolling: 'visible',
fitToView: true,
iframe:{
scrolling : 'auto',
preload : false
}
});
});
})(jQuery);