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
Related
Background
I'm using tiptap-vuetify to implement a message/chat UI where users see an editable Tiptap instance for creating new messages as well as several uneditable Tiptap instances (one for each already-sent message in the thread the user is viewing).
I have the editable instance output data in JSON format, which I store in my database in a JSONB field.
Problem
When I load the JSON for sent messages from the database, only plaintext messages show up; if I applied any kind of styling (bold, italics, lists, etc.), nothing at all shows up.
The code I'm using for the uneditable Tiptap instances is this:
<tiptap-vuetify
v-model="message.content"
:editor-properties="{ editable: false }"
output-format="json"
/>
Here's a screenshot of the message object (and message.content) for the "bold asdf" example above:
When i was looking in the documentation -> Get started
I see that the content is HTML.
As it usually is inside any tiptap.
Your content data is an object with alot of nested data. I don't think the plugin/component can handle that type of format.
Try save your data as HTML to your .json and there for also fetch the data as HTML from your .json.
Example:
{
messages: [
{
"id": 1,
"content": "<p>foo bar</p>"
},
{
"id": 2,
"content": "<p>hello world</p>"
},
]
}
(New to answer questions on stackoverflow)
I figured out the fix:
I didn't realize I needed to include the :extensions prop for all of the HTML features I wanted to use (bold, italic, etc.) in the editor that would render the HTML. I thought those extensions were just used to add the toolbar buttons, but they are also used to render the JSON that those buttons produce.
To then hide the toolbar, I just used the example toolbar-slot code from the readme, and the toolbar was gone.
Here's the working code:
<tiptap-vuetify
v-model="message.content"
:extensions="extensions"
:editor-properties="{ editable: false }"
>
<template #toolbar="{ buttons }">
<pre>{{ buttons }}</pre>
</template>
</tiptap-vuetify>
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 a custom menubutton in my tinyMCE editor that uses specific HTML elements elsewhere on the page as the menu items. I use a jQuery selector to get the list of elements and then add one each as a menu item:
c.onRenderMenu.add(function(c,m) {
m.add({ title: 'Pick One:', 'class': 'mceMenuItemTitle' }).setDisabled(1);
$('span[data-menuitem]').each(function() {
var val = $(this).html();
m.add({
title: $(this).attr("data-menuitem"),
onclick: function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val) }
});
});
});
My problem is that this only happens once when the button is first clicked and the menu is first rendered. The HTML elements on the current page will change occasionally based on user clicks and some AJAX, so I need this selector code to run each time the menu is rendered to make sure the menu is fully up-to-date. Is that possible?
Failing that, is it possible to dynamically update the control from the end of my AJAX call elsewhere in the page? I'm not sure how to access the menu item and to update it. Something using tinyMCE.activeEditor.controlManager...?
Thanks!
I found a solution to this problem, though I'm not sure it's the best path.
It doesn't look like I can make tinyMCE re-render the menu, so instead I've added some code at the end of my AJAX call: after it has updated the DOM then it manually updates the tinymce drop menu.
The menu object is accessible using:
tinyMCE.activeEditor.controlManager.get('editor_mybutton_menu')
where mybutton is the name of my custom control. My quick-and-dirty solution is to call removeAll() on this menu object (to remove all the current menu items) and then to re-execute my selector code to find the matching elements in the (new) DOM and to add the menu items back based on the new state.
It seems to work just fine, though tweaks & ideas are always welcome!
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')
});
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.)