I'm using editor.js for the first time, and I got stuck on this part: After selecting image from my gallery I want to re-render editor js with new image: this is my code for now
let url = `/${this.selectedImg.image.id}/${this.selectedImg.image.name}`
this.editor.configuration.data.blocks.push({
data: {
caption: "",
file: {url: url},
stretched: false,
withBackground: false,
withBorder: false,
},
type: "image"
})
console.log(this.editor,'editor')
this.editor.render()
but this.editor.render() doesn't work, what am I missing?
this is console.log screenshot
I would appreciate any help!
editor.save().then((data) => {
data.blocks.push({
type: "image",
data: {
caption: "",
file: {url: url},
stretched: false,
withBackground: false,
withBorder: false,
},
})
this.editor.render(data)
this.$emit('close', true)
})
this was the answer, I misread the docs :)
Related
When I click the format it kind of get locked and can not type anything in the editor after. This happens when format button is in the middle of the page.
As below, if the format dropdown do not have space in the down then it appears perfectly.
same thing happen in the image upload.
Got source codes from here: https://demos.telerik.com/kendo-ui/editor/imagebrowser
This is the code I have added to implement the kendo editor
$(function () {
$("#quest").kendoEditor({
imageBrowser: {
transport: {
read: "#Url.Action("Read", "ControlerName")",
destroy: {
url: "#Url.Action("Destroy", "ControlerName")",
type: "POST"
},
create: {
url: "#Url.Action("Create", "ControlerName")",
type: "POST"
},
thumbnailUrl: "#Url.Action("Thumbnail", "ControlerName")",
uploadUrl: "#Url.Action("Upload", "ControlerName")",
imageUrl: "#Url.Action("Image?path={0}", "ControlerName")",
}
},
tools: [
"formatting",
"bold",
"italic",
"underline",
"superscript",
"subscript",
"justifyLeft",
"justifyCenter",
"justifyRight",
"VerticalAlignTop",
"Vertical-AlignTop",
"Verticaltop",
"insertUnorderedList",
"insertOrderedList",
"indent",
"outdent",
"insertImage",
"createTable",
"addRowAbove",
"addRowBelow",
"addColumnLeft",
"addColumnRight",
"deleteRow",
"deleteColumn"
]
})"
I have a mix of Select2JS and Datatables and here is the code involved in the issue:
$(function() {
var form_id = $('#form_id'),
form_results = $('#form_results');
form_results.DataTable();
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'json',
url: '/ajax/forms/get/',
data: JSON.stringify({
form_id: null,
show_archived: !!$('#show_archived').is(':checked'),
get_first: false,
format: 'select2',
}),
cache: false,
success: function(data) {
form_id.removeAttr('disabled');
form_id.select2({
data: data,
closeOnSelect: true,
matcher,
sorter,
}).on('select2:select', function(e) {
var selected_element = $(e.currentTarget);
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'json',
url: '/ajax/manage_forms/getFormData/',
data: JSON.stringify({
form_id: selected_element.val(),
get_first: true,
}),
cache: false,
success: function(response) {
form_results.DataTable({
data: response.data,
retrieve: true,
stateSave: true,
responsive: true,
columnDefs: [
{
className: 'select-checkbox',
orderable: false,
searchable: false,
targets: 0,
},
],
select: {
style: 'multiple',
selector: 'td:first-child',
},
});
},
error: function(xhr, ajaxOptions, thrownError) {
console.error(xhr.responseText);
},
});
});
},
error: function(xhr, ajaxOptions, thrownError) {
console.error(xhr.responseText);
},
});
});
On the PHP side there is a function building the data and send it back to the browser:
public function getFormData()
{
$inputJSON = file_get_contents('php://input');
$outputJSON = json_decode($inputJSON, true);
$arguments = array(
'Id' => $outputJSON['form_id'],
'FormName' => null,
'FormFileName' => null,
'FormTypeId' => 1
);
$form = $this->forms_model->get($arguments, $outputJSON['get_first'], self::$folders);
$result[] = array(
'',
'DT_RowId' => $form->Id,
$form->FormName,
$form->FaxNumber,
end(explode('/', $form->form_filepath))
);
return $this->output->set_content_type('application/json')->set_output(json_encode(array('data' => $result)));
}
The result from the above function looks like:
{
"data" : [
{
"0" : "",
"DT_RowId" : 3387,
"1" : "form",
"2" : "8772399284",
"3" : "form1.pdf"
}
]
}
For some reason the table is showing all the time "No data available in table" and I can't find where is the issue, can any find out what is wrong in my code?
I have spent the last two hours trying to figure this out but I can't.
Updates:
#charlietfl: the following didn't work at first complaining about the k not being defined so I modified a little bit however it didn't do the trick
response.data.map(function(k, o) {
return Object.keys(k).map(function(k) { return o[k];});
});
#CFP Support: your solution is not working either for some reason the table doesn't get updated with data.
In both cases I am not getting any Javascript error or nothing weird in the console it just does not work.
You need to add the "columns" and define them.
...stuff...
columnDefs: [
{
className: 'select-checkbox',
orderable: false,
searchable: false,
targets: 0,
},
],
columns: [
{data: "0"},
{data: "DT_RowId"},
{data: "1"},
{data: "2"},
{data: "3"}
], ....etc...
This tells the table what column to match with the incoming data (so you will need a table with 5 columns in the HTML - or build it with JS {not sure what you are using, but if you need help...}
This should get you past the immediate issue though.
EDIT: JSFiddle - https://jsfiddle.net/CFPSupport/5utwh4v3/6/
EDIT2: I see the issue - you are initializing then wanting to put more data.... OK.....
You should get the data IN the datatable init, not init+AJAX.... https://datatables.net/reference/option/ajax
I have a web application, where I use a third party grid. The grid handles events on its cell in setCellValue, like this:
$("#productsGridContainer").dxDataGrid({
dataSource: data,
keyExpr: "Id",
allowColumnResizing: true,
showRowLines: true,
showBorders: true,
rowAlternationEnabled: true,
sorting: true,
paging: {
pageSize: 10
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [10, 20, 50, 100]
},
editing: {
mode: "row",
allowUpdating: true,
allowDeleting: true,
allowAdding: true
},
columns: [
{
dataField: "ItemDesc",
caption: "Description",
validationRules: [{ type: "required" }]
},
{
dataField: "ItemId",
caption: "SKU",
lookup: {
dataSource: skus,
displayExpr: "Value",
valueExpr: "Key"
},
setCellValue: function(newData, value, currentRowData) {
newData.ItemId = value;
$.ajax({
type: "POST",
url: rootDir + "PaaSubmission/GetSkuItemData",
data: '{ itemId: ' + value + ', custNo: ' + selectedCustomer.val() + ' }',
contentType: "application/json; charset=utf-8",
async: false, // if default/true, newData will not be defined in .done
dataType: "json"
})
.done(function(data) {
newData.ItemDesc = data.Description;
newData.ItemSize = data.Size;
newData.ItemOldPrice = data.OldPrice;
})
.fail(function(xhr, status, error) {
displayError("The ajax call to GetSkuItemData() action method failed:",
JSON.parse(xhr.responseText), "Please see the system administrator.");
})
}
As you can see, when the ajax call is done, it is too late to set newData properties. newData is still defined, but it is too late to set it, as setCellValue() is executed by then. THIS MAKES MY QUESTION DIFFERENT from other similar ones. Thus I have to call $ajax() synchronously using async: false. But I know that it is deprecated, as it freezes the browser. Could you please give me an advise on how it can be done without calling $ajax() synchronously?
I'm trying to use jsGrid in my MVC project as the client would like inline editing and filtering.
However, I cannot get it to load my JSON source into the table.
My js to load the table looks like so:
$("#jsGrid").jsGrid({
height: "50%",
width: "100%",
filtering: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete client?",
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "RICInstrumentCode/GetData",
data: filter,
dataType: "json"
});
},
insertItem: function (item) {
return $.ajax({
type: "CREATE",
url: "/api/RICInsrumentCodeTable",
data: item,
dataType: "json"
});
},
updateItem: function (item) {
return $.ajax({
type: "UPDATE",
url: "/api/RICInsrumentCodeTable/" + item.ID,
data: item,
dataType: "json"
});
},
deleteItem: $.noop
//deleteItem: function (item) {
// return $.ajax({
// type: "DELETE",
// url: "/api/data/" + item.ID,
// dataType: "json"
// });
//}
},
fields: [
{ name: "Code", type: "text", title: "RIC Instrument Code", width: 150 },
{ name: "Descr", type: "text", title:"RIC Instrument Code Description", width: 200 },
{ name: "RICInstrumentGroupId", type: "select", title: "RIC Instrument Group", items: countries, valueField: "Id", textField: "Name" },
{ name: "Active", type: "checkbox", title: "Is Active", sorting: true },
{ type: "control" }
]
});
});
The loadData is what I've been working on.
and the JSON the is returned from get data looks like so:
[{"Id":1,"Code":"test1","Descr":"first code test","RICInstrumentGroupId":2,"Active":true},{"Id":2,"Code":"APP","Descr":"Apples and bananas","RICInstrumentGroupId":4,"Active":true},{"Id":3,"Code":"1","Descr":"1","RICInstrumentGroupId":1,"Active":true},{"Id":4,"Code":"3","Descr":"3","RICInstrumentGroupId":3,"Active":false}]
So far I have confirmed that the ajax is firing, changed my array titles to match those of the call, and ensured the return is in valid JSON, what else can I do? Why isn't this working?
I was being stupid,
The bit that sets the table height was set to a 100% in a div that had no height, this was causing the table body to render with a height of 0px, changing the height property to auto fixed it because the data was there all along.
Thanks for the advice though!
I don't know if it is required, but when I look on demo examples (OData Service).
The grid loadData function looks bit different than yours.
loadData: function() {
var d = $.Deferred();
$.ajax({
url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products",
dataType: "json"
}).done(function(response) {
d.resolve(response.value);
});
return d.promise();
}
is accept promise rather than ajax function. so that my be the problem
Demo here: http://js-grid.com/demos/
i am working on lightswitch project ,and I am using JsGrid.I ran into one problem and I don't couldn't find the solution.here is the scenario:
I use the grid to get data from database table,when I update one of the cell It's value doesn't appear unless I click on the cell again,and if I update it in the second time then the new value appear.
I tried to refresh the grid after itemupdated but still the new value doesn't appear instantaneously.my code is here:
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
controller: {
loadData: function () {
var deferred = jQuery.Deferred();
myapp.activeDataWorkspace.ApplicationData.Table1Items.load().done(function (data) {
deferred.resolve(data.results);
});
return deferred.promise();
},
updateData: function () {
$("#jsGrid").jsGrid("refresh");
},
deleteItem: function (Item) {
$("#jsGrid").jsGrid("refresh");
}
},
fields: [
{ name: "EmployeeName", type: "text", width: 150 },
{ name: "Points", type: "text", width: 200 },
{ type: "control", editButton: true, // show edit button
deleteButton: true, // show delete button
clearFilterButton: true, // show clear filter button
modeSwitchButton: true // show switching filtering/inserting button
}]
,
onItemInserted: function (item) {
}, onItemUpdating: function (item) {
$("#jsGrid").jsGrid("refresh");
},
onItemUpdated: function (item)
{
$("#jsGrid").jsGrid("refresh");
console.log("it is updated", item.item);
$("#jsGrid").jsGrid("refresh");
}
});
your help is invaluable and many thanks in advance.
hope this may help you. updateItem is a function returning updated item or jQuery promise that will be resolved with updated item. Accepts updating item object.
on successful updating Item, use
updateItem: function(item) {
return $.ajax({
type: "PUT",
url: "/items",
data: item
});
},
if you have any queries, comment below.
fore more details : see link