Develop Reference

How dynamically edit field in kendo grid

I want to change editable property of the field, but this way it doesn't work. How can I fix this?
function changeDescription(rawGrid, isEditableDescription) {
var grid = rawGrid.data("kendoGrid");
if (!grid) return;
if (isEditableDescription) {
grid.dataSource.options.schema.model.fields["Description"].editable = true;
}
else {
grid.dataSource.options.schema.model.fields["Description"].editable = false;
}
}

You need to call the setOptions method of the grid: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions
var grid = $('#grid').data('kendoGrid');
var options = grid.getOptions();
var editable = !options.columns[0].editable || options.columns[0].editable();
options.columns[0].editable = function() { return !editable; };
grid.setOptions(options);
Dojo: https://dojo.telerik.com/APEBuhaN

Update attribute data-id for li element Nestable don't update

I has problem with Nestable.
When i use
var updateOutput = function (e) {
var list = e.length ? e : $(e.target),
output = list.data('output');
if (window.JSON) {
output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
} else {
output.val('JSON browser support required for this demo.');
}
};
$('#element').attr({'data-id':'newvalue'});
updateOutput($('.nestable').data('output', $('#nestable_list_output')));
I don't see output change. When i view our via chrome i see data-id of that element changed.
Please help me.
This is full soure
function Update_This_Menu(){
$('.update-this-menu').click(function(){
var RootElement = $(this).parent().parent().parent();
var NameMenu = RootElement.find('.NameThisMenu').val();
var TitleMenu = RootElement.find('.TitleThisMenu').val();
if(NameMenu == ''){
RootElement.find('.NameThisMenu').addClass('parsley-error');
}
else {
RootElement.data({'name':NameMenu});
RootElement.data({'title':TitleMenu});
updateOutput($('.nestable').data('output', $('#nestable_list_output')));
RootElement.find('.form-edit-menu').hide('slow');
}
});
}
This is function remove MENU is OK
function Remove_Menu(){
$('.remove-this-menu').click(function(){
var RootElement = $(this).parent().parent().parent();
RootElement.remove();
updateOutput($('.nestable').data('output', $('#nestable_list_output')));
});
}
Sorry for my english

Try this:
$('#element').data('id','newvalue');

How to change ckeditor dialog default tab?

the code is worked , but only work on first time
if (dialogName == 'image') {
dialogDefinition.removeContents('upload');
dialogDefinition.removeContents('advanced');
dialogDefinition.removeContents('Link');
var infoTab = dialogDefinition.getContents('info');
infoTab.remove('txtAlt');
infoTab.remove('txtBorder');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('cmbAlign');
dialogDefinition.onLoad = function () {
this.selectPage('Upload');
};
}
If I do not refresh the page , click the "image" button twice not be "Upload".
Need some help ,tks

you can put this code in config.js:
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog window name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'link') {
dialogDefinition.removeContents('advanced'); //remove advanced tab
var infoTab = dialogDefinition.getContents('info');
var urlField = infoTab.get('url');
urlField['default'] = 'www.ireadhome.com'; //set default value for the url field
}
});

CKEditor link dialog removing protocol

In my CKEditor I removed the 'linkType' and 'protocol' inputs of the link dialog.
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' )
{
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'linkType' );
infoTab.remove( 'protocol' );
}
});
However, evertype I type in something like https://google.com as soon as I type in the 'g' the https:// gets removed.
I checked the output and it always says http:// disregarding the input.
How can I turn this stupid behaviour off?

After much research, debugging and tweaking, I've finally managed to pull this off!!!
Here's how I do it:
CKEDITOR.on('dialogDefinition', function(e) {
// NOTE: this is an instance of CKEDITOR.dialog.definitionObject
var dd = e.data.definition;
if (e.data.name === 'link') {
dd.minHeight = 30;
// remove the unwanted tabs
dd.removeContents('advanced');
dd.removeContents('target');
dd.removeContents('upload');
// remove all elements from the 'info' tab
var tabInfo = dd.getContents('info');
while (tabInfo.elements.length > 0) {
tabInfo.remove(tabInfo.elements[0].id);
}
// add a simple URL text field
tabInfo.add({
type : 'text',
id : 'urlNew',
label : 'URL',
setup : function(data) {
var value = '';
if (data.url) {
if (data.url.protocol) {
value += data.url.protocol;
}
if (data.url.url) {
value += data.url.url;
}
} else if (data.email && data.email.address) {
value = 'mailto:' + data.email.address;
}
this.setValue(value);
},
commit : function(data) {
data.url = { protocol: '', url: this.getValue() };
}
});
}
});

Here's how I removed the protocol in v4.5.1:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName === 'link') {
var infoTab = dialogDefinition.getContents('info');
infoTab.remove('protocol');
var url = infoTab.get('url');
url.onKeyUp = function(){};
url.setup = function(data) {
this.allowOnChange = false;
if (data.url) {
var value = '';
if (data.url.protocol) {
value += data.url.protocol;
}
if (data.url.url) {
value += data.url.url;
}
this.setValue(value);
}
this.allowOnChange = true;
};
url.commit = function(data) {
data.url = { protocol: '', url: this.getValue() };
};
}
});

I'm afraid there's no way to change it. You have to manually edit a few lines of the code to make it working your way.

I recently found a way to hide the Link Type so you don't have to remove it totally. Set the style to display: none like the following:
infoTab.get( 'linkType' ).style = 'display: none';
I think it works for the Protocol as well, but I haven't tested it. I answered the same question here
Hope this helps someone!

For the lazy people like me, just do a quick core file hack:
open plugins/link/dialogs/link.js
in the minimized version find d=/^(http|https|ftp|news):\/\/(?=.)/i.exec(b);
remove http|https|ftp|
save file, upload it to your server
If it does not work after reload, this might be a cache problem. Open browser in private mode, navigate to your ckeditor and try it again. Good luck.

trying to remove and store and object with detach()

I am trying to remove an object and store it (in case a user wants to retrieve it later). I have tried storing the object in a variable like it says in the thread below:
How to I undo .detach()?
But the detach() does not remove the element from the DOM or store it. I am also not getting any error messages. Here is the code I am using to detach the element:
function MMtoggle(IDnum) {
var rowID = "row" + IDnum;
var jRow = '#' + rowID;
thisMMbtn = $(jRow).find(".addMMbtn");
var light = false;
var that = this;
if (light == false) {
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var cellStr = '<div class = "mmCell prep"></div>';
$(cellStr).appendTo(thisTxt);
$(this).unbind("click");
light = true;
}
);
}
else {
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
thisMM = thisRow.find(".mmCell");
SC[rowID].rcbin = thisMM.detach(); //here is where I detach the div and store it in an object
$(this).unbind("click");
light = false;
}
);
}
}
MMtoggle(g.num);
A fiddle of the problem is here: http://jsfiddle.net/pScJc/
(the button that detaches is the '+' button on the right. It is supposed to add a div and then detach it when clicked again.)

Looking at your code I don't think so you need detach for what you are trying to achieve.
Instead try this code.
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var $mmCell = thisTxt.find('.mmCell');
if($mmCell.length == 0){
$mmCell = $('<div class = "mmCell prep"></div>')
.appendTo(thisTxt).hide();
}
$mmCell.toggle();
//$(this).unbind("click");
}
);
Demo