i have a module. I need it to be able to display a modal dialog.
Seems like I need to inject a div into the main DOM and then parse it. Is this the right approach. Are there samples (or even a util- seems like this would not be that uncommon)
There are samples for almost everything in DojoCampus and in the tests directory:
var pane = dojo.byId('thirdDialog');
thirdDlg = new dijit.Dialog({
id: "dialog3",
refocus:false,
title: "Programatic Dialog Creation"
},pane);
Note that this particular widget doesn't need to be inserted to the DOM manually - it appends itself to the end of the page. Here the second parameter to the Dialog constructor - pane - is a reference to the node whose content should be displayed inside the Dialog.
UPDATE: Based on the new information you should try this:
dojo.require("dijit.Dialog");
dojo.addOnLoad(function() {
secondDlg = new dijit.Dialog({
title: "Programatic Dialog Creation",
style: "width: 300px",
content: "Insert text here"
});
secondDlg.show()
});
As shown here, you can pass Dialog content in the content attribute. (This sample is executable in FireBug on any page that includes Dojo.)
UPDATE: So, you want to have a form inside the Dialog? Nothing special here. Hey, you can even have a dijit form over there! Be sure to check out that DojoCampus article on Dialogs to learn how Dialog can communicate with a dijit form.
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.addOnLoad(function() {
secondDlg = new dijit.Dialog({
title: "Programatic Dialog Creation",
style: "width: 300px",
content: "<h2>Sample Form</h2>" +
"name: <input dojoType='dijit.form.TextBox' type='text' name='name' id='name'>"
});
secondDlg.show()
});
(Again this sample is executable in FireBug on any page that includes Dojo.)
Related
I’m testing to use Docusaurus for a tutorial and documentation site. I want to customize the code block in markup (md or mdx) to for example add an edit button inside the code block that will open the code in plnkr.
My question is, how can I add a button (or several buttons) in the code block and add click events to the buttons?
I have tested Eleventy https://www.11ty.dev/ recently and in that I used markdown-it-attrs to add attributes in markdown.
const markdownIt = require("markdown-it");
const markdownItAttrs = require("markdown-it-attrs");
and then in the markdown I could add attributes to a code block indicating if that should have an edit button or not.
```js {edit=yes}
let a = 2;
console.log(a);
```
And then in a script find this code block and add a button and an event listener.
.hasAttribute("edit")
.insertAdjacentHTML("afterbegin", `<button style="float: right;" class="code_edit">Edit</button>`);
.addEventListener("click", () => {
I have tried doing something similar in Docusaurus by adding a script in docusausrus.config.js
scripts: [{ defer: true, src: "/mycustom.js" }],
I can see that this script is added in the head but the script can’t find any html elements. I don’t know where to start with adding attributes to the markup.
Currently struggling with trying to update a SharePoint custom page with a search bar. The page consists of a data table with various columns, the idea is to add extra functionality to this data table without compromising the code already there.
The main issue is the code not rendering "search" when added to the following area after "excel":
data-toolbar='[
{ template: "<a class=\"k-button k-primary\" data-bind=\"click: onCustomCreate, visible: canAdd\">Add New Organisation</a>" },
{ name: "clearAllSorting", text: "Clear All Sorting", attr: "data-bind=\"click: onClearAllSorting\""},
{ name: "clearAllFilters", text: "Clear All Filters", attr: "data-bind=\"click: onClearAllFilters\""},
"excel"
]'
I have put in "pdf" to test, and it renders the Export to PDF button OK:
PDF button
When I add "search" it just shows a box with lower case s for search:
Search button
I'm hoping someone can point me in the right direction, is it simply missing a more up-to-date kendo library?
Ultimately, all I need is for this to show: Search toolbar
Im trying to implement generic dojo confirmation dialog. I found great resource in stackoverflow on how to do it in link: Dojo Dialog with confirmation button
The sample which is mentioned in the above link works absolutely fine as in http://jsfiddle.net/phusick/wkydY/ .
Now that i wanted to extend this to support more complicated widget containing dojo data type and dojo attach points inside this dialog. I try to achieve this by setting the message of the dialog.
i.e.
message: "<div data-dojo-attach-point='myAttachPoint'><button data-dojo-type='dijit/form/Button' type='button'>Click me</button></div>";
(see this code at here : http://jsfiddle.net/wkydY/304/)
When I do that and clicking on MessageBox.Confirm' button doesnt bring up the dialog box as it would in the original version. What exactly am i doing wrong or missing a step in here?
(edited : based on comment)
You have a syntax error here
var confirmDialog = new ConfirmDialog({
title: "My Title",
message: "<div data-dojo-attach-point='myAttachPoint'><button data-dojo-type='dijit/form/Button' type='button'>Click me</button></div>";
});
as there should not be a semicolon in an object definition, i.e. after message: '...';
Also, as you are using non-AMD Dojo, you should put type="dijit.form.Button" into the message.
So the correct version of the lines above is:
var confirmDialog = new ConfirmDialog({
title: "My Title",
message: "<div data-dojo-attach-point='myAttachPoint'><button data-dojo-type='dijit.form.Button' type='button'>Click me</button></div>"
});
See it in action: http://jsfiddle.net/phusick/wkydY/305/
I want to open a dialog box when clicking on a cell.I am using dgrid/editor.
editor({field: "column1",label: "col1",editor: "text",editOn: "click"})
I am getting text box when using the above code.I want a dialog box.Please tell me how to get a dialog box.I am using OndemandGrid with JSONReststore to display the grid.
You don't need use editor to trigger a dialog, use click event on a cell is ok:
var grid = new declare([OnDemandGrid,Keyboard, Selection])({
store: Observable(new Memory({data: []}))
}, yourGridConatiner);
grid.on(".dgrid-content .dgrid-cell:click", function (evt) {
var cell = grid.cell(evt);
var data = cell.row.data;
/* your dialog creation at here, for example like below */
var dlg = new Dialog({
title: "Dialog",
className:"dialogclass",
content: dlgDiv //you need create this div using dojo.create or put-selector
});
dlg.show();
});
If you want show a pointer while mouse over that cell, you can style it at renderCell method with "cursor:pointer"
From the wiki:
editor - The type of component to use for editors in this column; either a string specifying a type of standard HTML input to create, or a Dijit widget constructor to instantiate.
You could provide (to editor) a button that pops up a dialog when clicked, but that would probably mean two clicks to edit a cell: one to focus or enter edit mode or otherwise get the button to appear and one to actually click the button.
You could also not bother with the editor plugin and attach a click event handler to the cell and pop up a dialog from there. You would have to manually save the changes back to your store if you went that route.
If I understand you right - you could try something like this:
function cellFormatter1(value) {
//output html-code to open your popup - ie. using value (of cell)
}
......
{field: "column1",label: "col1", formatter: cellFormatter1 }
I have the following code for adding tooltip for onclick of a span id as shown below:
new dijit.Tooltip({
connectId: ['gridEditHelp'],
label: 'Double click on an item in the below table to perform inline editing of attributes',
position: ['above']
});
The problem is that I want the tooltip to be visible always on the web page.
Any ideas or existing API available for the same?
Use TooltipDialog instead - or else you will have to mess with the _MasterTooltip manager (there's more or less only one global, reusable tooltip). Then call dijit.popup.open - and never call .close
dijit.popup.open({
popup: new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: "<p>I have a mouse leave event handler that will close the dialog."
});,
around: dojo.byId('thenode')
});