Is there any way to make the input fixed or make tree appear as dropdown.
i tried this in component, at style but dit not do something.
render() {
const tProps = {
treeData,
value: this.state.value,
onChange: this.onChange,
multiple: true,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
searchPlaceholder: 'Please select',
style: {
width: 300,
overflow:'auto',
height:50
},
};
return <TreeSelect {...tProps} />;
}
Ok i am using Tree instead of TreeSelect with popover like this.
<Popover
visible={this.state.visible}
title={<Checkbox onChange={this.checkAllKeys} checked={isAllChecked}>Select All</Checkbox>}
onVisibleChange={this.handleVisibleChange}
trigger="click"
content={
<Tree
checkable
onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
autoExpandParent={this.state.autoExpandParent}
onCheck={this.onCheck} checkedKeys={this.state.checkedKeys}
onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}
>
{loop(treeData)}
</Tree>
}>
<Button type="default">Click to check</Button>
</Popover>
Related
Wants to open a mat-dialog on click of Detail Icon. But the issue is this is not referring to class. Its referring to the current grid.
constructor(private dialog: MatDialog) {}
ngOnInit() {
this.gridOptions = <GridOptions>{
rowSelection: 'multiple',
floatingFilter: true
};
this.gridOptions.columnDefs = [
{
headerName: 'Detail', field: '', filter: false, width: 80,
sortable: false,
onCellClicked: this.openModal,
cellRenderer: (data) => {
return `<mat-icon class="mat-icon material-icons" style="cursor:pointer;" aria-hidden="true">
keyboard_capslock</mat-icon>`;
}
},
{ headerName: 'Field Name', field: 'fieldName'}
];
openModal(row): void {
const detailRef = this.dialog.open(DetailComponent, {
height: '100vw',
width: '80vh',
direction: 'ltr',
data: {
record: row.data
}
});
Error: Unable to get property 'open' of undefined or null reference
Here this is referring to Grid and not to the class.
How can I refer to the class method to open the dialog?
Inline cellRenderer could be used only for simple cases.
If it's required to use functions inside or connect to third-party libraries, it has to be written as a custom cell renderer component.
I want to make a gender selection using picker. but the mode is not working in ios. Im not sure in android.
<Picker
style={{justifyContent: 'center',backgroundColor: 'white'}}
selectedValue={this.state.gender}
onValueChange={(gender) => this.setState({ gender })}
mode='dialog'
>
<Item label="Male" value="Male" />
<Item label="Female" value="Female" />
</Picker>
Hope anyone could give some suggestion..
Thank you
The <Picker> component renders as a UIPickerView on iOS - that's what you're seeing there. This picker is rendered in-place rather than in a modal (as is the case on Android) - the mode prop you specified only applies to Android.
There are two options: render the picker within something like a <Modal> or use a different component entirely.
I solved this type of issue by doing like this.
import PickerExample from './PickerExample.js';
class Sample extends React.Component {
constructor(props) {
super(props);
this.state = {gender: '',};
this.updateGender = this.updateGender.bind(this);
}
updateGender(val){
this.setState({
gender: val
},function(){
alert("callback function as your wish")
});
}
render(){
return (
<PickerExample gender={this.state.gender} updateGender={this.updateGender.bind(this)} />
);
}
The PickerExample.js file look like this.
export default PickerExample = (props) => {
return (
<Picker selectedValue = {props.gender} onValueChange = {props.updateGender}>
<Picker.Item label = "MALE" value ="Male" />
<Picker.Item label = "Female" value = "female" />
</Picker>
);
}
I use the .ios.jsx extension for the iOS specific picker. Which I code as follows:
export const SelectWidget = ({
selectedOption,
setSelectedOption,
placeholderLabel,
options
}) => {
const items = options.map((option) => {
return <Picker.Item
key={option.key ?? option.label}
label={option.label}
value={option.value}
/>;
});
return (
<Picker
onValueChange={(value) => {
setSelectedOption(value);
}}
placeholder={{
label: placeholderLabel,
value: null,
}}
selectedValue={selectedOption}
style={{
width: '100%', // fill up the width of the device (without this, nothing gets displayed
}}
itemStyle={{
height: 150, // this reduces the height of the selector
color: colors.text, // if you're in dark mode set this to white.
}}
>
// default item
<Picker.Item label={placeholderLabel} value={null} />
{items}
</Picker>
);
};
I'm having troubles trying to implement a custom remove button in my Kendo Grid. This is the code I have:
View:
<div id="gridAdditionalLines">
Javascript:
var dataSourceGrid = new kendo.data.DataSource({
data: MyData, --> It's a type of Kendo.Observable
schema: {
model: {
Id: "Id",
fields: {
Id: { editable: false, nullable: true },
Column1: { editable: false, nullable: true },
Description: { validation: { required: true} },
Value: { validation: { required: true} }
}
}
}
});
$("#MyGrid").kendoGrid({
dataSource: dataSourceGrid,
editable: true,
navigatable: true,
toolbar: ["create"],
columns: [
{ field: "Description" },
{ field: "Value" },
{ command: [{name: "destroy", template: kendo.template($("#DeleteTemplate").html())}], width: 60}
]
});
This is the template I'm using for the remove button for each row:
<script type="text/x-kendo-template" id="DeleteTemplate">
<button class="btn btn-default" data-bind="click: Applicability.deleteLine">
<span class="glyphicon glyphicon-remove"></span>
</button>
With the code above, the Kendro Grid display the data properly. However, when trying to remove any row, at the moment to click in the Remove button, nothing happens.
do I missing something?
It has been a little while since I used Kendo, but if I remember correctly, since the grid itself is not MVVM bound, none of its child elements (including the rendered template) will be checked for MVVM data-bind attributes either.
If your grid was initialized with MVVM using data-role="grid" then I think the templates would be bound too.
I forget exactly how to do it, but I believe when the grid triggers its dataBound event, you can manually call kendo.bind(...) on the grid's child elements to get them to MVVM bind.
Your function for button click is missing here. Once you add this script a button is added to the grid, but what happens when you click on button is not specified
<script type="text/x-kendo-template" id="DeleteTemplate">
<button class="btn btn-default" data-bind="click: Applicability.deleteLine">
<span class="glyphicon glyphicon-remove"></span>
</button>
Then you have to add an onclick function for the button:
$('.btn.btn-default').on('click', function() {
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem($(this).closest("tr"));
if(confirm('Are you sure you want to delete : ' + dataItem.name)) {
grid.dataSource.remove(dataItem);
grid.dataSource.sync();
grid.refresh();
}
});
Check jsbin here
I have this constructor:
var sendMessagePopup = Ext.create('Ext.window.Window', {
title: 'Closing Doodad issue',
id: 'sendMessagePopUpJS',
width: 550,
height: 435,
loader: {
url: "#Url.Action("SendMessagePopup", "Message")?subject=" + "#Model.Obj1.Model.Obj1Number - completed this" + "&messageBody=I will close this doodad.",
loadMask: true,
autoLoad: false,
scripts: true,
renderer: 'html'
},
autoScroll: true,
resizable: false,
layout: 'fit',
closable: true,
closeAction: 'hide',
modal: true,
header: true
});
I get this window to show by calling this:
<a class="btn c10 buttonsRowForPreviewFixedWidth" onclick=" sendMessagePopup.show();
sendCloseMessagePopup.loader.load(); ">Close Item</a>
This current works fine, but I want to re-use this for when a user would click on the opposite action : to open a doodad issue. I've put two constructors for different windows on the page. but that is causing issues with the second one that contains the "Open Issue" literals not working properly.
The second button:
<a class="btn c10 buttonsRowForPreviewFixedWidth" onclick="sendOpenMessagePopup.show();
sendOpenMessagePopup.loader.load(); ">Open Item</a>
How would I go about changing the title attribute, and some of the text in the loader when loading this window from a "Close this" or "Open This" button.
EDIT: I had a look at Extjs pass in parameters to window on show, but I cannot use the show().
If I understand you correctly you want to re-use one component on two different occasions. In this case I would suggest using a component definition.
So instead of Ext.create('Ext.window.Window', {...}) you should use
Ext.define('sendMessagePopUpJS',
{
extend : 'Ext.window.Window',
width: 550,
height: 435,
etc.
Then you can create a new window on each click, and pass it some options, like
Ext.create('sendMessagePopUpJS',
{
title: 'foo'
}).show();
I have a partial view (asp.net MVC 3.0) to render Tinymce as a richeditor and want to show a text watermark on it.
#model String
#using Nop.Web.Framework.UI;
#{
Html.AddScriptParts(#Url.Content("~/Content/editors/tinymce/tiny_mce.js"));
//set useDefaultImagePlugin to 'true' if you want to move back to a standard image plugin
bool useDefaultImagePlugin = false;
var imagePluginName = useDefaultImagePlugin ? "image" : "netadvimage";
}
#Html.TextArea(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
<script type="text/javascript">
//Notes: autosave plugin is disabled
(function () {
tinyMCE.init({
// General options
mode: "exact",
elements: "#ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
theme: "advanced",
height: "120px",
width: "100%",
verify_html: false,
plugins: "equation,netadvimage,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
// Theme options
theme_advanced_buttons1: "equation,#imagePluginName,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,pastetext",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: false,
// Example content CSS (should be your site CSS)
//content_css : "css/content.css",
convert_urls: false,
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js"
});
tinyMCE.focus(function () {
if ($(this).getContent() == "Type some text here") {
tinyMCE.setContent("");
} else if ($(this).getContent() == "") {
tinyMCE.setContent("Type some text here");
}
})
})();
</script>
and i tried to follow a similiar post at TinyMCE hint text as in the above script but it never shows anything on the textarea content.
Even with http://code.google.com/p/jquery-watermark/ , it only flickers the content and get blank instantly.
Thanks