This is my code
$("#list").jqxGrid(
{
{ text: 'Confirm Note', columntype: 'textarea', datafield: 'confirmNote', width: 110,
initeditor: function (row, column, editor) {
editor.attr('maxlength', 1500);
}
}
}
This is creating textarea box.
problem is when i paste certain text inside text box like
This is below text:
TEST 1
TEST 2
TEST 3
then only TEST 1 is entering into textbox,leaving out TEST 2 and TEST 3.
Related
This is in continuation to the question asked in github, Fit a wider table into PDF #261.
I'm reusing the same method(doc.autoTable) to create PDF out of different HTML inputs.
So, If I define the column style of 0th column as columnWidth: 'wrap', then the same style will be applied for all the HTML tables that invoke this particular method.
I'm not sure If I can follow long text example, as both the column names & table body are coming from HTML page directly. Whereas in the long text example, I'm seeing the column names being declared/defined as shown below
var columnsLong = getColumns().concat([
{title: "Title with\nlinebreak", dataKey: "text2"},
{title: "Long text column", dataKey: "text"},
]);
Now there are 2 questions.
1. I dont want to apply 'WRAP' for all the columns, as the table gets cut.
2. Need to apply 'wrap' for certain columns alone by mentioning the column name that comes from HTML/GSP page.
This is my code
var res = doc.autoTableHtmlToJson($(".printReportsCaveat")[0]);
doc.autoTable(res.columns, res.data, {
columnStyles : {'Plant':{columnWidth: 'wrap'},
'Mine':{columnWidth: 'wrap'},
0:{textColor: [0,105,170]}
},
margin: {top: 55, bottom : 110},
headerStyles: {
overflow: 'linebreak',
// columnWidth: 'auto',
halign: 'center'
},
styles : {
overflow: 'linebreak',
halign: 'center',
fontSize: 8
},
createdCell: function(cell, data) {
var group = $('#groupByValue').val();
addColorToCell(group, level3Flag, level2Flag, data, cell);
},
addPageContent : function(data) {
printHeadNFoot(doc, userDtl, data);
},
drawCell: function(cell, data) {
designCell(data,doc);
},
});
Kindly help!
If I understand your issue correctly you can try referencing a specific column by index instead of by key. I.e. columnWidth: {0: columnWidth: 'wrap'}.
I have a form with some text fields. One of them is a image upload button.
I need to put the image preview box (a div) to the right side of the field (after the field button).
I already do the hard work by creating the div in the afterrender event:
listeners: {
afterrender: function ( cmp ) {
var container = this.body.dom.id;
$("#" + container ).append('<div style="position:absolute;
left:DONTKNOW;top:DONTKNOW" id="myPictureDiv"></div>');
}
}
how can I position elements in a ExtJS form? Can I use position:absolute ? But how to find the button position? What about form resizing?
EDIT: Image to illustrate scebotari's solution alignment problem:
One solution for this is to create the additional div as a component and to place it in a "fieldcontainer" with the main field.
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Picture'
},{
xtype: 'component',
autoEl: 'div',
width: 32,
height: 32,
margin: '0 0 0 5',
style: 'border: 1px solid #d0d0d0; border-radius: 50%'
}]
}
Here is a fiddle illustrating this concept
This is the Form field
fieldLabel: 'My Field',
width: 330,
id: 'displayColumn',
name: 'displayColumn',
allowBlank : false,
value : '#CACACA',
This is the form listener:
listeners: {
afterrender: function ( cmp ) {
// Get the Window Container
var container = this.body.dom.id;
// Get the Component (ExtJS way)
var comp = Ext.getCmp("displayColumn");
// The ExtJS field ID is not the same you gave
var el = comp.getEl();
// Get the real Field ID
var displayColumnId = el.id;
// If you need its value...
var initialColor = comp.getValue();
// If you need to hide the field to make room to your div...
// I mean if you want to replace the field and keep the label...
// <YOUR_FIELD_ID>-triggerWrap
$("#displayColumn-triggerWrap").css("display","none");
// Append your div to the field container
// <YOUR_FIELD_ID>-bodyEl
$("#displayColumn-bodyEl").append(YOUR_DIV);
}
}
Do some style to the div as you wish
I created a TinyMCE plugin and need the listbox items to display html. This is my plugin:
editor.addButton('icons', {
title: 'Foo',
text: 'Foo',
type: 'button',
onclick: function() {
editor.windowManager.open({
title: 'Foo',
width: 300,
height: 200,
body: [{
type: 'listbox',
label: 'Foo',
name: 'foo',
values: [{
title: '<em>Foo</em>', // <-- Mark save. Render as html.
value: 1
}],
}],
});
}
});
See also the fiddle: http://jsfiddle.net/allcaps/vqctac3d/
But the output looks like:
Expected:
How can I mark the list option title save so the contents is rendered as html?
Here is your updated snippet:
https://jsfiddle.net/mzvarik/1cwr07z6/55/
I was looking for same thing but listbox and it can be done like this:
(see fiddle for more)
editor.addButton('myshortcuts', {
type: 'listbox',
text: 'Vložit proměnnou',
values: self.shortcuts_data,
onselect: function() {
// do something
this.value(null); //reset selected value
},
onShow: function (event) {
var panel = $(event.control.getEl()),
button = event.control.parent().getEl();
var i=0;
panel.find('.mce-text').each(function(){
var item = $(this);
if (!item.next('.mce-menu-shortcut').length) {
// THIS WILL ADD HTML TO EXISTING MENU ITEM
item.after('<div class="mce-menu-shortcut">('+self.shortcuts_data[i].value+')</div>');
}
i++;
});
setTimeout(function(){
panel.css('width', 360);
panel.children().first().css('width', 360);
}, 5);
}
});
Here is screenshot:
Since noone else answered this question i will put the proposed solution/workaround from the comment into an answer.
Actually, it is not possible to insert html code using the tinymce way of listbox creation. But it is possible to style listboxes using css.
Due to the fact that listboxes and other tinymce UI elements get rendered dynamically it might be difficult to adress the correct html dom elements.
A workaround to this can be to exchange the listbox html after the listbox has been created. This is possible in case the ordering is known (and that is almost true).
I'm using MVC4 with knockoutjs (with mapping plugin) and the binding plugin for tinymce (which defines the "wysiwyg" binding to associate a textarea to a TinyMCE editor) . Everything works fine except that I've been unsuccessfully trying to get unobtrusive validation to work in TinyMCE controls. As you will see, I've applied several of the suggested solutions found here and in google but none works.
The TinyMCE (and also TinyMCE jquery) version is 4.0.26
The involved parts of the code are as follow:
.CS (only the property associated with the TinyMCE control)
[AllowHtml]
[LocRequired]
[LocDisplayName(Consts.LBL_TXT_EN)]
public string Text_en { get; set; }
The "Loc" prefixed attributes inherit from RequiredAttribute and DisplayNameAttribute data annotation classes and were made to also retrieve localized texts from the DB. They work fine, so assume they are regular Required and DisplayName attributes. There are other similar properties: Text_es, Text_de, etc which should have a similar set of attributes, but for now I'm only setting the LocRequired in Text_en, until the problem solves.
.CSHTML:
<td>
<div class="editor-label required">
#Html.LabelFor(model => model.Text_en)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Text_en,new{data_bind="wysiwyg:Text_en"})
#Html.ValidationMessageFor(model => model.Text_en)
</div>
</td>
I have several of those, for the other properties mentioned above, each one with their corresponding setting of course.
javascript: (see the comments in code) . I've already applied the "ignore" option for the validator, the tinymce.triggerSave(), and a form.validate() definition and nothing works
$(function()
{
...
var mapping =
{
create: function(options)
{
var vm = ko.mapping.fromJS(options.data);
...
...
vm.acceptDataEdit = function() //this is associated with the click event "Save" button in the form
{
tinymce.triggerSave(); //Almost every search on google says it solves the problem... Well, here it doesn't
var ok = frm.valid(); //Validation works for other fields but not for the tinymce
if (ok)
{
...//posts the data
}
return false;
}
ko.editable(vm);// ko.editable(this);
return vm;
}
}
ko.bindingHandlers['wysiwyg'].defaults =
{
theme: "modern",
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table directionality emoticons template paste textcolor"
],
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
]
};
var viewModel = ko.mapping.fromJS(vData, mapping);
ko.applyBindings(viewModel);
$.validator.setDefaults({ ignore: '' }); // again, this is supposed to make the validator process the hidden text areas, but nothing happens
});
and I also tried adding, after the setDefaults line, equally without result:
frm.validate({
rules: {
Text_en:
{
required: true
}
}});
Any other suggestions? Do I have something wrong here?
It finally worked. Thanks to #marathonman I rechecked the posts of the link he provided (previously, the accepted one was the source for what i had already done), but this time I also looked at the Brian Surowiec's post (I'll upvote these two posts when I have enough credits to be able to vote) and following his advice of making the textareas to be shown off-screen was what made it work. So I added just what he did:
var offCss = { position: 'absolute', height: 0, width: 0, top: -100 };
$('#Text_en').css(offCss);
$('#Text_es').css(offCss);
...//and the same for the others
//after that called show() for them
$('#Text_en').show();
$('#Text_es').show();
...//and so on
And that was all. By the way : of the other code I posted , the frm.validate code i tried before, was not needed at all, everything else was kept.
jQueryUI has a pretty nice display for radio buttons:
Does Sencha have anything similar?
Follow up question, if not:
what do you find to be nice UX for a three-item (or even four-item) component which requires only one touch? (e.g., a select box is two touches, one to open the select list and one to choose your option)
You are looking for Ext.SegmentedButton in Sencha Touch.
Sample code snippet:-
var segmentedButton = new Ext.SegmentedButton({
allowMultiple: false, // ensures only 1 button gets pressed at a time.
items: [
{
text: 'Choice 1'
},
{
text : 'Choice 2',
pressed: true
},
{
text: 'Choice 3'
}
],
listeners: {
toggle: function(container, button, pressed){
console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off'));
}
}
});
Ext.Viewport.add({ xtype: 'container', padding: 10, items: [segmentedButton] });
Output :-