In the search_config documentation page, I see that there's something that looks like it would allow me to specify a default value (defaultValue) to populate the search field with, but I can't get it to work. I specified a default value, but when I pull up the search box, nothing is filled. Also, I'm using multipleGroup: true, so it's the advanced advanced search module, if that makes any difference.
I figured this out by looking through the source code, and since I can't seem to find the feature documented on the wiki or anywhere else, I'll answer my own question. jqGrid DOES have a way of creating default search templates to use, and it's pretty useful. Hopefully my explanation will be useful for someone else.
When creating the searchGrid part of jqGrid $('#gridDiv').jqGrid('searchGrid', options); (or in the searchGrid options section when creating the navGrid part $('#gridDiv').jqGrid('navGrid', '#navDiv', {}, {}, {}, {}, searchOptions); ) there are two options that we care about, tmplNames and tmplFilters.
tmplNames is simply an array of strings of what the template names should be. These will appear as the text in the template select box that will show up. Something like ["Bob's Template", "Joe's Template"].
tmplFilters is also an array of strings, but these strings are the JSON encoded string that jqGrid sends to the php script when searching for something. (tmplFilters may also work as an array of the objects themselves, but I haven't tried) So something like this.
{
"groupOp":"AND",
"rules":
[
{"field":"comnumber","op":"ge","data":"19000"},
{"field":"expStatus.expStatID","op":"eq","data":"4"}
]
}
So all of this is pretty easy actually, except that this still doesn't cover setting a default template. This is only good for setting additional templates to choose from. jqGrid has a predefined default template, which is what appears when you initially open the search. To change this, after creating the jqGrid, you need to use setGridParam and change the postdata property
$('#jqGrid').setGridParam({
postData: {
filters: defaultFilter
}
});
where defaultFilter is the same type of JSON'ed query string as before. Additionally, if the 'reset' button is clicked, this default template goes away, so you'll need to set it again when this happens, which is easy enough to accomplish by adding an onReset function to the initial jqGrid call:
onReset: function () {
$('#jqGrid').setGridParam({
postData: {
filters: defaultFilter
}
});
}
And that's it! With some use of AJAX and some new buttons, I was also able to read templates from a local file rather than having them defined in the javascript and was also able to take the current query and create/overwrite templates in the file. Then they became really useful.
Related
I have a plugin which need to show a (Modal) dialog each time the user double click on a word.
Detecting double click is no problem, but the exact fields/values in the dialog depends on exactly which word the user clicked on, and some mutable global state. So I can't create the dialog until the moment before I need to show it. And here is the problem: How do I do that?
Right now I use this code:
var dialogName="uniqueDialog" + counter++;
CKEDITOR.dialog.add(dialogName,function(editor) {
// Creating dialog here.
});
CKEDITOR.instances.editor.openDialog(dialogName);
This works, but having to add a uniquely named dialog, just to show it once and then newer use it again seems really really wrong. Also I fear this will keep using resources since the dialogs are newer removed(I could not find any remove method).
So my question is: Is there a better way to dynamical create and show a "one use" dialog?
Update:
If bootstrap is not allowed then maybe an addFrame version of the dialog is acceptable. This could then refer to a html file that can load from parameters.
NB: The plunkr only works, if you fork and edit it, otherwise it will give you a 404 for the template.
Here is a quick plunkr:
plunky
And here is the plugin in question:
CKEDITOR.plugins.add( 'insertVariable', {
requires: ['iframedialog'],
icons: 'insertvariable',
init: function( editor ) {
editor.addCommand( 'varDialog', new CKEDITOR.dialogCommand( 'varDialog' ) );
CKEDITOR.dialog.addIframe('varDialog','varDialog','sample.html?var='+item,500,400);
editor.ui.addButton( 'insertVariable', {
label: 'Insert Variable',
command: 'varDialog',
icon: this.path + '<insert gif>'
});
}
});
Obviously you are not creating dialogs anymore with different content, but you are referring to another piece of html, that can change. I've kept the bootstrap thing in there as well for reference.
I made one final edit, that will show the current contents. So I think that is roughly what you want. Check it out.
Previous Answer
If you are prepared to use bootstrap, then you can do no worse than check out their modal dialog, which can be just be shown and hidden at will.
http://getbootstrap.com/javascript/#modals
It's simple and cuts down any need to keep creating your own dialog. The dialog won't be one use type, but you will set the defaults as necessary. The varying content link is here:
http://getbootstrap.com/javascript/#modals-related-target
That would be the quickest way to get this going. It all depends on whether you want to use this framework. As CKEDITOR is already using JQuery it is an option worth considering.
I have textarea which is required field. I've found post suggesting that Dojo doesn't have validation for Textarea, but in Dojo 1.9, there's an argument 'required'.
I've done the following:
new Textarea({required:true, value:""}, query('[name=description]')[0])
but the effect isn't what I've expected. The texarea has red border always, even if the field wasn't focused (as opposite to, for example, ValidationTextBox). But when I call:
form.validate()
the validation is passed even if the texarea is empty.
Is it possible to get Textare behave the same as in ValidationTextBox, or as for now, the validation for that component is not yet ready and I'd have to write custom version (as in linked post) or wait for next Dojo?
I've done it using mixin of SimpleTextArea and ValidationTextArea:
define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {
return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
constructor: function(params){
this.constraints = {};
this.baseClass += ' dijitValidationTextArea';
},
templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-point='focusNode,containerNode,textbox' autocomplete='off'></textarea>"
})
})
See also my answer in Dojo validation of a textarea
The power of Dojo lies in extending it with ease. If you really need the required functionality, then implement it. If you design it well, there should be no problem if it actually gets implemented in a new release of Dojo.
If you really want to know if such a feature exists or is in development I suggest looking at http://bugs.dojotoolkit.org. Besides, you can always contribute to the code, that's what open source is meant for.
I would like to add to the answer of Donaudampfschifffreizeitfahrt
instead of "this.baseClass += ' dijitValidationTextArea';"
I would do
this.baseClass = this.baseClass.replace('dijitTextBox', 'dijitValidationTextArea');
because
• we do not need the TextBox class if we have got a textarea mixin
• ! the "rows" parameter is mixed in but not fired/styled if the TextBox class is present ...
Actually this is probably pretty simple, but somehow I am unable to make it work.
I have a grid that loads data from a url. Everything works fine, except one small detail -- I have put a column picker on the table but if they have already shown the search form once, then when they change the visible columns the search form does not reflect the changes no matter how many times they close and open it.
The documentation seems to suggest that recreateForm was the solution, but it does not seem to work.
"when set to true the form is recreated every time the search dialog is activated with the new options from colModel (if they are changed)"
I launch the advanced search from a button outside the grid, if that matters.
function openSearch(grid)
{
var searchParams = {
multipleSearch:true,
overlay:false,
closeOnEscape:true,
Find:"Search",
closeAfterSearch:true,
caption:"Advanced Search",
searchOnEnter:true,
recreateForm:true
};
grid.jqGrid('searchGrid', searchParams);
}
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I inherited a web app that uses Dojo 1.5 and the template toolkit. I am enjoying learning dojo but it's at a slow pace.
Initially when bringing up our web form, we'll have a list of files on the right side of the page like so....
AAA_text
BBB_text_1
BBB_text_2
CCC_text
....
....
On the left side we have a search box that asks for the subset of file to use. Normally we would just type in "AAA" and then the div on the right side would find those files that match and display them after you press the "Search" key below the box.
What we are looking to do is to eliminate the "Search box" and have the list of files matching "AAA" to come up in the right side div as "AAA" is being typed, (or "BBB" or "CCC", etc).
I suppose in a nutshell it's the equivalent having the "Search" button pressed after every key is typed in the Search box.
Does this sound like a realistic goal or even possible? The code itself uses a ton of Template Tookit so I'm not looking to do any major rewrite.
If I am not making myself clear, let me know. I can elaborate for clarity. Many many thanks! Janie
EDIT: OK, I have solved a good deal of my problem so far and as it turns out, as so many of these things have a propensity to do, that what I am really needing is to get clear on how to make autocomplete work. Which is to say that I have a data source for my text box but not really sure how to tie it to the text box. I have a dojo.xhrPost routine that can handle grabbing the values.
It looks like this....
dijit.byId('files_matching').getValue(),
Googling dojo autocomplete examples gives me a zillion links and none of which are proving helpful. So I suppose my questions have transitioned to....
1. Can you even use autocomplete on a mere text box (I've seen links that say that you can only use it on combo boxes)
2. Is there a link out there somewhere that describes/shows in detail how to tie a dojo text box to a data source using dojo.xhrPost.
I am so close to solving this and I still seem to have a gaping chasm in front of me.
It's difficult to say for sure without seeing your code but if you don't have one already, I would recommend to create an ItemFileReadStore or something similar to start with. That way you can query that store locally on the client without having server requests after every key stroke.
It could look something like this:
var file_store = new dojo.data.ItemFileReadStore({ data: {
items: [{ name:"AAA_text" },
{ name:"AAA_text_1" },
{ name:"BBB_text_2" }]
}});
When you have that in place you can call a function from your text input's onChange event:
<input type="text" onchange="query_store(this.value);" />
And then you handle to actual query from the function called from the onchange event:
var query_store = function(search_for) {
var my_query = { name: search_for+"*" }; // * for wildcard match
completed = function(items, result){
for(var i = 0; i < items.length; i++){
var value = file_store.getValue(items[i], "name");
alert(value); // Instead of alert, you can save the values to your div.
}
};
file_store.fetch({ query: my_query, onComplete: completed });
}
A lot of good information about this can be found here
Hope this is at least a little helpful.