Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
Related
the page markup has
<div wicket:id="stepPanel" />
tag in it and when the page is first loaded it works great that is
add(new MyFirstPanel("stepPanel"));
works fine. But then when I trigger an Ajax event and request redrawing
addOrReplace(new MySecondPanel("stepPanel"));
target.add(MyPage.this);
i get the following error
Last cause: Failed to find markup file associated. MyFirstPanel: [MyFirstPanel [Component id = stepPanel]]
please note that it tries to find the wrong markup (should look for markup for MySecondPanel) and it fails regardless it succedded to do so before!
I instantiate panels using reflection, but could it be a problem here? No exceptions thrown.
Anwser:
Actually it was something else - I have noticed that one of my AjaxSubmitLinks had reference to a form that was no longer placed in a markup... so whatever you do just remember not to leave that reference.
You are adding MyPage after replacing the Panel causing MyPage to re-render.
There is a good example on how to replace panels here.
Yes you can call panels via reflection. I don't clearly know what you are trying to do with event here but if you want you can attach your panel with AjaxSelfUpdatingTimerBehavior and define the duration which will update this component in the given time period.
Hope its useful.
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 ...
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 am a newbie in JSF.I am creating a simple page with a checkbox and a readonly field.When I deploy to weblogic server ,I get what is expected output.
Now I have put autosubmit property on checkbox and partialtrigger propery on the other readonly field.My readonly field changes as expected on changing the state
of checkbox.I was curious to find out what Ajax code has been put in finally rendered page when i declare auto submit property to true.Basically I want to know
what is the html and ajax(javascript) code difference between the case when auto submit property is enabled and disabled.Is there any tool which can compare two source codes?
Thanks in advance.
Being able to see the exact difference in code may be difficult as the associated Javascript files for your JSF component toolkit have probably been minified, however you should at least be able to see the difference in the Javascript event declarations on the generated input element.
A tool like Firebug is the best choice as it gives you the ability to highlight DOM elements and view their corresponding styles, attributes, and events. It doubles as an excellent Javascript debugger as well, allowing you to place breakpoints in JS code so that you can walk through the execution of what is happening on each click event.
When autoSubmit is false, there is likely no Javascript event being triggered. When it is true however, there is likely an onclick event being triggered that is formulating an Ajax request. You might have a hard time figuring out what is happening because it is minified, however it is more than likely making such a call.
http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/js-api/symbols/jsf.ajax.html
I've got sIFR setup to replace a navigation menu (looks pretty slick). It's individually replacing the LIs and their internal links. I have an onRelease tag that throws properly, extracts the actual href link address, all good so far. I want to tie this into an AJAX page loader, with backwards-compatability (+SEO) for the individual pages being able to load themselves. I've tried return false like I would for standard links, no dice.
I'm assuming it doesn't work because it's onRelease, not onClick or something BEFORE it is already changing the page? onClick doesn't seem to be a valid sIFR function, documentation at http://wiki.novemberborn.net/sifr3/JavaScript+Methods says onRollOver, onRollOut, and onRelease. It would be a shame to have to pitch my entire AJAX system, there is hopefully a good workaround!
There isn't really an option to prevent the default behaviour. You can change it in sIFR.as though. Assuming the <li> contains just a <a> remove the following around line 505:
getURL(sIFR.instance.primaryLink, sIFR.instance.primaryLinkTarget);
That will prevent sIFR from following the URL when you click on the link. It'll still work with right-click though, but you might be able to fix that by changing (line 508):
menu.customItems = menuItems;
to
menu.customItems = [];