Develop Reference

Get Selected Items of listview syncfusion

i want to show the selected items of listview in a grid. all selected items should show on the home page. but i cant find a way to do so. i have attached the js file code and screenshot of the popup
var subItemsLoaded = false,
SubItemSelectionModalId = '#subItemSelectionModal';
listViewHeight = 400,
subItemClicked = 0;
$(SubItemSelectionModalId).on('shown.bs.modal', function () {
if (
(window.selections.assetTemplate.id != null &&
window.selections.assetTemplate.id != 0)) {
$(SubItemSelectionModalId + ' .modal-body').ejWaitingPopup({
showOnInit: true
});
$(SubItemSelectionModalId + ' .listViewItems').ejListView({
"height": 400,
"loadComplete": function () {
repositionSearchBoxFor(SubItemSelectionModalId);
var obj = $(SubItemSelectionModalId + ' .modal-body').data("ejWaitingPopup");
console.log("12345.5");
obj.hide();
console.log("123456");
},
"mouseUp": function (e) {
},
"enableAjax": true,
"enableCheckMark": true,
"enableFiltering": true,
"dataSource": ej.DataManager({
"url": "/Shared",
"cachingPageSize": 0,
"timeTillExpiration": 0
}),
"query": ej.Query().from("GetSubItems").addParams("assetTemplateId", window.selections.assetTemplate.id).addParams("assetTemplateVariantId", window.selections.assetTemplateVariant.id),
"fieldSettings": {
"text": "SubItemName",
"id": "SubItemId"
}
});
}
});
$(SubItemSelectionModalId).on('hidden.bs.modal', function () {
var listViewItems = $(SubItemSelectionModalId + ' .listViewItems');
if (listViewItems.find('ul').length > 0) {
var selections = $(SubItemSelectionModalId + ' .listViewItems').ejListView("getCheckedItems");
if (selections.length > 0) {
$('#selectedSubItems').html(selections.join(' , ')).removeClass('hidden');
}
}
});
enter image description here

Yes, it is possible to show the selected items of the Listview in a Grid. For this, you have to use the mouseUp event of the Listview to take the selected items of the list and then give these selected items as the dataSource for the Grid control.
Also in order to get the ID of the selected list, you have to get the ID attribute and take its ID and bind the ID field as one of the columns of the Grid control. This way, you can get the ID of a particular list in a Listview and then bind it to the Grid.
We have also prepared a sample for your reference: http://jsplayground.syncfusion.com/prahqy2i
Regards,
Arun P.

Error: cannot call methods on tabs prior to initialization; attempted to call method 'destroy'

I'm working on updating an older site to the newer version of jQuery and applying bootstrap.
We are using
backbone.js
jQueryui and
bootstrap.js.
I am getting the following error: Error: cannot call methods on tabs prior to initialization; attempted to call method 'destroy'
The lines of code it is related to is:
Thanks
define([
'jquery',
'jqueryui',
'underscore',
'backbone',
'vm',
'events',
'models/product',
'text!templates/editor/page.html'
], function ($, jui, _, Backbone, Vm, Events, Product, PageTemplate) {
var EditorPage = Backbone.View.extend({
model: Product,
el: '#editor',
_$editorErrorContainer: undefined,
events: {
"click #toolbar": "onToolbarClicked"
},
initialize: function () {
this.bindSaveEvents();
Events.unbind("addText");//HACK: Prevents zombie listeners for this specific situation
Events.bind("addText", this.onAddText, this);
},
onAddText: function (e) {
var layers = this.model.get('layers');
var textCollections = [];
//Search for valid text collections in our layer and push into our array
layers.models.forEach(function (layer) {
var tc = layer.get("textCollection");
if (typeof tc !== "undefined") {
if (layer.get("allowText")) {
var printColor = layer.get("printColor");
var src;
if(printColor) { src = printColor.get("src"); }
var _tc = { 'textCollection': tc, 'src': src, 'name':layer.get('name'), 'cid': layer.cid };
textCollections.push(_tc);
}
}
});
//if there's no choice to make, just add the text element.
if (textCollections.length == 1) {
var textCollection = textCollections[0].textCollection;
AddTextToCollection(textCollection);
return;
}
//Otherwise create dialog for choosing in which text collection to put a new text object
var dialogHTML = "<div> <p>What color would you like this text?</p>";
//Generate selections, use the src attribute of the print color if it uses printcolor
//TODO use other attributes of a textCollection such as rgb color if it uses it etc
textCollections.forEach(function (textCollection, i) {
var imgurl = "";
if(textCollection.src) {
imgurl = "/productEditor/assets/printcolors/icons/" + textCollection.src;
}
//Customers wont like zero indexed option names
var id = i + 1;
dialogHTML += "<p data-id= " + i + " class='selection'> Group " + id + ": " + textCollection.name + "<img src='" + imgurl + "'/> </p>";
});
dialogHTML += "</div>"
$(dialogHTML).dialog({
modal: true,
width: "25%",
height: "auto",
dialogClass: "textAddDialog",
resizable: false,
position: {
my: 'left top',
at: 'left top',
of: $("#editor"),
collision: 'flip'
},
show: 'fade',
create: function() {
var that = this;
//bind dialog events
$(this).children(".selection").click(function(){
$(that).children('.selected').removeClass("selected");
$(this).addClass("selected");
});
},
open: function (event, ui) {
$('.ui-dialog').css('z-index',2003);
$('.ui-widget-overlay').css({
'z-index': 2002,
'opacity': 0.5
});
},
close: function() {
$(this).children(".selection").unbind();
$(this).dialog('destroy').remove();
},
buttons: [{
text: "Accept",
"class": "acceptButton",
click: function() {
var index = $(this).children('.selected').data('id');
if(index >= 0) {
var textCollection = textCollections[index].textCollection;
AddTextToCollection(textCollection);
}
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}
]
});
function AddTextToCollection (textCollection) {
//Create text element in chosen group
var entry = textCollection.createEntry();
//Show user that this is a fresh text element that needs changing
entry.set("text", "Edit Me!");
entry.set("freshElement", true);//Fresh element denotes a completely new element, used to delete this element if user adds an element -> cancel button
//Trigger mouseup on element so our text editor dialog will pop for this element
var elem = $('.text_modifier[data-cid="' + entry.cid + '"]');
elem.trigger("click");
}
},
bindSaveEvents: function(){
Events.on('saveError', this.onSaveError.bind(this));
Events.on('saveSuccess', this.onSaveSuccess.bind(this));
},
unbindSaveEvents: function(){
Events.off('saveError', this.onSaveError.bind(this));
Events.off('saveSuccess', this.onSaveSuccess.bind(this));
},
onToolbarClicked: function (e) {
//console.log("toolbar clicked");
//this._productView.clearSelectedChildren();
},
onSaveError: function(errorMessage){
// if(this._$editorErrorContainer === undefined){
// this._$editorErrorContainer = $("<div/>").addClass("error");
// $(this.el).before(this._$editorErrorContainer);
// }
// this._$editorErrorContainer.text(errorMessage).show();
$('#appError').text(errorMessage).show();
},
onSaveSuccess: function(){
// if(this._$editorErrorContainer != null){
// this._$editorErrorContainer.hide();
// }
$('#appError').hide();
},
onRenderComplete: function (e) {
// ADD THE RETURN ELEMENT TO THE LIST OF
this._loadList = _.without(this._loadList, e);
if (this._loadList.length == 0) {
$(this.el).removeClass('loading');
}
},
remove: function(){
this.unbindSaveEvents();
},
renderApp: function () {
var that = this;
// PUT LIST OF ITEMS THAT RENDER INTO ARRAY
// renderComplete WILL REMOVE ITEMS, AND CHANGE STATE TO VISIBLE WHEN ALL ARE LOADED
this._loadList = ['layer', 'product', 'modifiers', 'tabs']
// CREATE PREVIEW MODIFIERS
require(['views/modifiers/product'], function (PreviewModifierView) {
that._modifierView = new PreviewModifierView({ model: that.model });
that._modifierView.on("renderComplete", that.onRenderComplete, that);
that._modifierView.render();
});
// CREATE PREVIEW
require(['views/preview/product'], function (PreviewProductView) {
that._productView = new PreviewProductView({ model: that.model });
that._productView.on("renderComplete", that.onRenderComplete, that);
that._productView.render();
});
// CREATE PRODUCT NAME DISPLAY
require(['views/toolbar/productname'], function (ProductNameView) {
that._productNameView = new ProductNameView({ model: that.model });
that._productNameView.render();
});
// CREATE PRODUCT DESCRIPTION DISPLAY
require(['views/toolbar/productdescription'], function (ProductDescView) {
that._productDescriptionView = new ProductDescView({ model: that.model });
that._productDescriptionView.render();
});
// CREATE TOOLBAR
require(['views/toolbar/layer'], function (ToolbarLayerView) {
that._toolbarView = new ToolbarLayerView({ model: that.model });
that._toolbarView.on("renderComplete", that.onRenderComplete, that);
that._toolbarView.render();
});
// CREATE FINISHED BUTTON
require(['views/toolbar/finished'], function (FinishedView) {
that._finishedView = new FinishedView({ model: that.model });
that._finishedView.render();
});
// CREATE TABS
require(['views/tabs/product'], function (TabsView) {
that._tabsView = new TabsView({ model: that.model });
that._tabsView.on("renderComplete", that.onRenderComplete, that);
that._tabsView.render();
});
},
render: function () {
//console.log("editor render!");
//console.log(this.model);
//$('#productName').html(this.model.get);
var pageTemplate = _.template(PageTemplate, this);
$(this.el).html(pageTemplate);
$('#button-editor-help').show(); // GET'S HIDDEN ON THE APPROVAL PAGE
this.renderApp();
}
});
return EditorPage;
});

In the tabs view, hook up a debugger where you call the destroy and create
Replicate the bug and check if you are calling destroy before initialization

May be you are calling close before the dialog is initialised.

JS function to undo

(function() {
tinymce.create('tinymce.plugins.custom', {
init : function(ed, url) {
ed.addButton('custom', {
title : 'custom',
text: 'custom',
icon: false,
onclick: function() {
ed.focus();
ed.selection.setContent('<p class="custom">' + ed.selection.getContent() + '</p>');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('custom', tinymce.plugins.custom);
})();
I've added a button to TinyMCE using the above JS code.
So, when user clicks the button, it wraps any highlighted words into tags.
My question is, how do I make it so that if the highlighted words are already in tag, then it should remove the tag?

Keep an array store of tags, remove the tag if found in array, push to array if not
var tags = [];
...
onclick: function() {
var content = ed.selection.getContent();
var index = tags.indexOf(content);
ed.focus();
if (index === -1) {
ed.selection.setContent('<p class="custom">' + content + '</p>');
tags.push(content);
} else {
ed.selection.setContent(content);
tags.splice(index, 1);
}
}

Cannot select a dynamically added list item until it is clicked

I have written a small JQuery plugin that creates a dropdown box based on bootstrap. I have written it to where a data attribute supplies a url that produces the list items. After the ajax call, Jquery loops through the list items and inserts them into the dropdown menu. Here is what I do not understand, the plugin takes a div with the class of .combobox and appends the required html to make the combobox. It uses two functions, _create() and _listItems(). _create() actually adds the html and calls on _listItems() to make the ajax call and it returns the list items to be appended. Looks like this:
;(function ( $, window, document, undefined ) {
var Combobox = function(element,options) {
this.$element = $(element);
this.$options = $.extend({}, $.fn.combobox.defaults, options);
this.$html = {
input: $('<input type="text" placeholder="[SELECT]" />').addClass('form-control'),
button: $('<div id="test"/>').addClass('input-group-btn')
.append($('<button />')
.addClass('btn btn-default input-sm')
.append('<span class="caret"></span>'))
}
this.$list_type = this.$element.attr('data-type');
this.$url = this.$element.attr('data-url');
this.$defaultValue = this.$element.attr('data-default');
this._create();
this.$input = this.$element.find('input');
this.$button = this.$element.find('button');
this.$list = this.$element.find('ul')
this.$button.on('click',$.proxy(this._toggleList,this));
this.$element.on('click','li',$.proxy(this._itemClicked,this));
this.$element.on('mouseleave',$.proxy(this._toggleList,this));
if(this.$defaultValue) {
this.selectByValue(this.$defaultValue);
}
}
Combobox.prototype = {
constructor: Combobox,
_create: function() {
this.$element.addClass('input-group input-group-sm')
.append(this.$html.input)
.append(this._listItems())
.append(this.$html.button);
},
_itemClicked: function(e){
this.$selectedItem = $(e.target).parent();
this.$input.val(this.$selectedItem.text());
console.log(this.$element.find('[data-value="W"]'))
this._toggleList(e);
e.preventDefault();
},
_listItems: function() {
var list = $('<ul />').addClass('dropdown-menu');
$.ajax({
url: this.$url,
type: 'POST',
data: {opt: this.$list_type},
success:function(data){
$.each(data,function(key,text){
list.append($('<li class="listObjItem" data-value="'+text.id+'">'+text.value+'</li>'));
})
}
})
return list
},
selectedItem: function() {
var item = this.$selectedItem;
var data = {};
if (item) {
var txt = this.$selectedItem.text();
data = $.extend({ text: txt }, this.$selectedItem.data());
}
else {
data = { text: this.$input.val()};
}
return data;
},
selectByValue: function(value) {
var selector = '[data-value="'+value+'"]';
this.selectBySelector(selector);
},
selectBySelector: function (selector) {
var $item = this.$element.find(selector);
if (typeof $item[0] !== 'undefined') {
this.$selectedItem = $item;
this.$input.val(this.$selectedItem.text());
}
else {
this.$selectedItem = null;
}
},
enable: function () {
this.$input.removeAttr('disabled');
this.$button.children().removeClass('disabled');
this.$button.on('click',$.proxy(this._toggleList,this));
},
disable: function () {
this.$input.attr('disabled', true);
this.$button.children().addClass('disabled');
this.$button.off('click',$.proxy(this._toggleList,this));
},
_toggleList: function(e) {
if(e.type == 'mouseleave') {
if(this.$list.is(':hidden')) {
return false;
} else {
this.$list.hide();
}
} else {
this.$list.toggle();
e.preventDefault();
}
}
}
$.fn.combobox = function (option) {
return this.each(function () {
if (!$.data(this, 'combobox')) {
$.data(this, 'combobox',
new Combobox( this, option ));
}
});
};
$.fn.combobox.defaults = {};
$.fn.combobox.Constructor = Combobox;
})( jQuery, window, document );
The problem is that after the items are appended to the DOM, everything is selectable accept the list items. I currently have an .on() statement that binds the click event with the list item. To test this out I have used console.log(this.$element.find('[data-value="W"]') and it does not return an element, however if I place that same console log in the click callback of the list item it will return the element and it is selectable. Am I doing something wrong?
EDIT
I have pasted the entire plugin to save on confusion.

Reloading dynatree with new data - destroy method or reloadChildren do not seem to work

I'm not able to reload dynatree after I received response for AJAX request.
I've a pulldown 'plan.viewType' in code below. I'm invoking a JS function upon a new value selected in this pulldown which will in turn call an AJAX function.
<form:select path="plan.viewType" id="viewType" style="width:11.6em" onChange="loadView()" multiple="false">
<form:options items="${plan.viewType}"/>
</form:select>
I've two trees - dim_tree and kpi_tree.
$(document).ready(function(){
$.fn.clearable = function (treeid) {
var $this = this;
$this.wrap('<div class="clear-holder" />');
var helper = $('<span class="clear-helper">x</span>');
$this.parent().append(helper);
helper.click(function(){
$this.val("");
$('#' + treeid).dynatree('getRoot').search("");
});
};
$("#dimsearch").clearable("dim_tree");
$("#kpisearch").clearable("kpi_tree");
$("#dim_tree").dynatree({
checkbox: true,
selectMode: 3,
children: (isEdit == "true")? eval('('+'${plan_dimension_edit_info}'+')') : eval('('+'${plan_dimension_info}'+')'),
dnd: {
onDragStart: function (node) {
return false;
},
onDragStop: function (node) {
return false;
},
onDragOver: function (targetNode, sourceNode, hitMode) {
return false;
},
onDrop: function (targetNode, sourceNode, hitMode, ui, draggable) {
return false;
}
},
onSelect: function(select, node) {
if(select && dimKPIMisMatch(node)) {
node.select(false);
//showToolTip(node.span, dimMsg);
return;
}
createTreeSortable(select, node, "DIM");
}
});
$("#kpi_tree").dynatree({
checkbox: true,
selectMode: 3,
children: (isEdit == "true")? eval('('+'${plan_measurement_edit_info}'+')') : eval('('+'${plan_measurement_info}'+')'),
dnd: {
onDragStart: function (node) {
return false;
},
onDragStop: function (node) {
return false;
},
onDragOver: function (targetNode, sourceNode, hitMode) {
return false;
},
onDrop: function (targetNode, sourceNode, hitMode, ui, draggable) {
return false;
}
},
onSelect: function(select, node) {
if(select && kpiDIMMisMatch(node)) {
node.select(false);
//showToolTip(node.span, kpiMsg);
return;
}
createTreeSortable(select, node, "KPI");
}
});
});
I would like to reload these two trees when I get response from AJAX call below.
var loadView = function() {
if($("#viewType").val() == "Default View") {
$.ajax({
url : "planmntsdefault.do",
type : "GET",
success : function (data) {
var node = $("#dim_tree").dynatree("getTree").getRoot();
if(node && node.isLazy())
{
node.reloadChildren(function(node, isOk){
if(!isOk) alert("Node " + node + " could not be reloaded.");
else alert("Tree reloaded");
});
}
else
{
node.activate();
node.reloadChildren(function(node, isOk){
if(!isOk) alert("Node " + node + " could not be reloaded.");
else alert("Tree reloaded");
});
}
node = $("#kpi_tree").dynatree("getTree").getRoot();
if(node && node.isLazy())
{
node.reloadChildren(function(node, isOk){
if(!isOk) alert("Node " + node + " could not be reloaded.");
else alert("Tree reloaded");
});
}
else
{
node.activate();
node.reloadChildren(function(node, isOk){
if(!isOk) alert("Node " + node + " could not be reloaded.");
else alert("Tree reloaded");
});
}
},
error : function ( xhr, textStatus, error ) {
}
});
}
}
I referred to other posts how to reload/refresh/reinit DynaTree? which didn't resolve the problem. I've tried another variation where I do destroy and reload. Neither of these approaches work. Am I missing something here? Thanks.

You could try this:
success : function (data) {
$("#dim_tree").dynatree("getTree").reload();
$("#kpi_tree").dynatree("getTree").reload();
},

you can solve your problem by three method if you want to add new data and response come by ajax then u can add following code in dynatree
jQuery
$.ajax({
url : "planmntsdefault.do",
type : "GET",
success : function (data) {
var node = $("#dim_tree").dynatree("getTree").getRoot();
/*here you can use i assume title
come (by this name of root is set in
dynatree and if set isFolder :true then
folder icon appear in dyna tree*/
var childNode = node.addChild({ title: data.title,
isFolder: true
});
}
})
and if u want to edit some root name then you can use
In Previous Code Where We Use Add Set Below Line
var node = $("#tree").dynatree("getActiveNode");
node.data.title = $newtitle;
And For Delete
var node = $("#tree").dynatree("getActiveNode");
activeNode.remove();
these all steps when we apply then it look that dyna tree referesh hope it make help