Kendo UI Multiselect: Remove delete action on data binding - javascript

I have a Kendo multiselect UI element and I am trying to check a certain condition and make sure that element is non-deletable right at the initial data load. My code is as follows:
$scope.programSelect = $("#selectPrograms1").kendoMultiSelect({
dataSource:new kendo.data.DataSource({
data: $scope.programs
}),
dataTextField: "name",
dataValueField:"id",
select: addProgram,
dataBound: function (e) {
//check condition on data
//if true then do
//$(e.sender.tagList).find("li span.k-delete").remove();
},
change: programRemove
}).data("kendoMultiSelect");
I had some help from this link here. This piece of code doesn't seem to be working for some reason and I'm at a loss. Would appreciate any suggestions. Am I checking at the wrong place?

Related

Froala Wysiwyg - adding custom and toolbar buttons in a custom dropdown

I'm trying to create a more custom dropdown for adding all the toolbar buttons under it when toolbarXS is activated (all the missing icons in the XS should be under the more dropdown.
unfortunately the docs aren't that clear and outputting only text options which does nothing besides showing.
i was wondering if anybody could help in how to do it.
i.e
// define annotation button for imagePopup
$.FroalaEditor.DefineIcon('annotationIcon', { NAME: 'pencil'}); // the icon
$.FroalaEditor.RegisterCommand('annotation', { // the button
title: 'Annotation',
icon: 'annotationIcon',
undo: true, // Save the button action into undo stack.
focus: true, // Focus inside the editor before the callback.
showOnMobile: true, // Show the button on mobile or not.
refreshAfterCallback: true, // Refresh the buttons state after the callback.
// Called when the button is hit.
callback: function () {
annotateImage(this);
}
})
// Define `more` dropdown button.
$.FroalaEditor.RegisterCommand('moreDropdown', {
title: 'More',
icon: 'More',
undo: true,
focus: true,
type: 'dropdown',
options: {
"annotation": 'annotation'
},
});
Thanks in advance
EDIT:
the only way i could figure out now is to use
html: function() {
return 'HTML_CODE'
}
and just write all the ul by myself which is disgusting and doesn't seem like the proper way of doing it.
Any help will be appreciated.
After talking with froala guys!
Custom popup
is a solution for implementing a popup with toolbar buttons as a dropdown.
Thanks

Tooltipster not working properly in the beginning

I am using the tooltipster plugin tool where I got gantt chart drawn with some td given id.
So, which ever id is defined and the mouse over it will get ajax data and show accordingly.
Below is snippet of my codes. Issue here is that the tool tip only appear after few times I mouse the td. Thereafter, it works fine.
I can see, in my debug window, that ajax page is called and following error:
Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips. jquery.tooltipster.min.js:1
$(document).ready(function () {
$('td[id]').tooltipster({
// content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
// We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
continueTooltip();
var idval=0;
// Next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'GET',
url: 'getDetails.php',
data:idval,
success: function(data) {
// Update our tooltip content with our returned data and cache it
//alert("Data is : "+data);
var finalData = 'Total Data : 300 <br> Total Completed : 200';
//alert("DATA");
//origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')
origin.tooltipster({
content: finalData,
multiple: true,
contentAsHTML: true
});
//origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
}
});
//}
}
});
});
The Tooltipster plugin really should be initialised before all of this. Using the mouseenter enter to trigger it's initialisation every time a user hover's over a <td> element is not great practice and is the root problem to your issue. Ideally you would want to break it down into the following:
Find your <td> elements with id's defined.
Apply tooltipster to these elements.
Let tooltipster handle everything from there.
1. Finding your <td> elements
With the magic of jQuery you can fetch these with a clever use of selectors rather than querying a larger set with your initial implementation, gathered from the answers within the StackOverflow thread here, jquery get only all html elements with ids, we get:
$('td[id]')
This will fetch you all <td> elements with an id defined, be warned this could be a bit slow if you have an extensive table. Alternatively you can select, then apply a filter to narrow down your set:
$('td').filter(function(){
return $(this).attr('id') !== undefined;
});
Both will essentially do the same!
2. Applying tooltipster to these elements
I've not done much here since you had a lot of commented out code, so I've kept it the same, with some minor tweaks, here is my version of the "working code":
$('td[id]').tooltipster({
// content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
// We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
continueTooltip();
// Next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'GET',
url: 'getDetails.php',
data: $(this).attr('id'),
success: function(data) {
// Update our tooltip content with our returned data and cache it
//alert("Data is : "+data);
var finalData = 'Total Data : 300 <br> Total Completed : 200';
//alert("DATA");
//origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')
origin.tooltipster({
content: finalData,
multiple: true,
contentAsHTML: true
});
//origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
}
});
//}
}
});
3. Letting tooltipster handle everything from here
Tooltipster (when intialised) is triggered by default when hovering over an element, this means your functionBefore will be run before this "hover" event, causing your AJAX request to be run each time, there is no need to do anything more thereafter :D
I hope this helps! :)
You can use this code :
var tooltipInstance;
$("body").on('mouseover', 'td[id]:not(.tooltipstered)', function(){
tooltipInstance = $(this).tooltipster({
//your code ...
});
tooltipInstance.tooltipster('open');
});

Selecting row in kendo grid when virtualization is enabled

I'm using kendoUI grid widget to display dataset. Because size of dataset is quite large (200-400k) I'm using virtualization feature to improve performance and usability. When setting grid up I have faced with the following problem: because virtualization is enabled, grid DOM objects (i mean table rows here) are refreshed every time when page is changed. That implementation of grid results in the following behavior: I can select row but after scrolling down to next page and scrolling back selection disappears. Here is example where this problem can be reproduced: http://trykendoui.telerik.com/OkOg
Maybe someone has similar problem and can offer some workaround.
You can restore the selection in the grid's dataBound event, e.g. like this (note that this only works for single row selection, so you might need to adapt for other modes):
$("#grid").kendoGrid({
dataSource: dataSource,
change: function () {
this._lastSelectedItem = this.dataItem(this.select());
},
dataBound: function () {
var row;
if (this._lastSelectedItem) {
row = $(this.tbody).find("tr[data-uid='" + this._lastSelectedItem.uid + "']")
if ($(row).length > 0) {
// or this.select(row); if you don't mind the
// change event getting triggered again
$(row).addClass("k-state-selected");
}
}
},
height: 430,
scrollable: {
virtual: true
},
selectable: true,
columns: columns
});

JQuery Autocomplete not filling input with selected item

I have a jQuery UI Autocomplete which is being populated by a third party web service.
The autocomplete is working correctly, however when I select an item from the list the autocomplete input field goes blank.
The autocomplete is used to search an address, once selected the address gets split into its components which fill out the rest of the form.
So I have the following input field ids:
#FullAddress, #AddressLine1,#AddressLine2, #AddressSuburb,#AddressState, #AddressPostcode
with #FullAddress being the autocomplete field.
The web service returns an array of objects each containing key value pairs named pretty much as above.
Originally the JS code looked like:
$("#FullAddress").autocomplete({
source: "URL",
dataType: "JSONP",
autoFocus: true,
select: function (event, ui) {
$("#FullAddress").val(ui.item['FullAddress']);
$("#AddressLine1").val(ui.item['Line1']);
$("#AddressLine2").val(ui.item['Line2']);
$("#AddressSuburb").val(ui.item['Suburb']);
$("#AddressState").val(ui.item['State']);
$("#AddressPostcode").val(String(ui.item['Postcode']));
}
});
Which contacted the server and was returning results, but they were not being displayed in the dropdown:
Clicking any option filled out all fields with address data (you just couldn't see which address you selected) apart from #FullAddress which gets blanked out. i.e. in the image above once one was selected the "123 te" disappears.
I discovered the following to add to the create event which fixed the dropdown display issue, but did not fix the fact that the #FullAddress field gets blanked no matter what happens.
$("#FullAddress").autocomplete({
source: "URL",
dataType: "JSONP",
autoFocus: true,
create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $("<li>")
.append('<a>' + item.FullAddress + '</a>')
.appendTo(ul);
};
},
select: function (event, ui) {
$("#FullAddress").val(ui.item['FullAddress']);
$("#AddressLine1").val(ui.item['Line1']);
$("#AddressLine2").val(ui.item['Line2']);
$("#AddressSuburb").val(ui.item['Suburb']);
$("#AddressState").val(ui.item['State']);
$("#AddressPostcode").val(String(ui.item['Postcode']));
}
});
Does any one know any other reasons why the autocomplete input field would be emptying?
It does not appear to care whether or not an item was selected, no matter what happens on blur the field empties.
Thanks
If you add event.preventDefault(); as the first line in the select function that should stop the field emptying:
select: function (event, ui) {
event.preventDefault();
$("#FullAddress").val(ui.item['FullAddress']);
...
}

ExtJs grid.Panel store: keep scrollbar position after load/reload

I'm using grid.Panel in Sencha ExtJs 4.0.2a and I reload a Json Store every 60 seconds.
I was wondering if there is a way to preserve the position of the scrollbar after a data load.
So that the user can continue to look at the records he was looking before the load..
I reload the data in the grid using a Task:
var task = {
run: function(){
Ext.getCmp(panelGridId).getStore().load({
//Callback function after loaded records
callback: function(records) {
//Hide grid if empty records
if (Ext.isEmpty(records)) {
Ext.getCmp(panelGridId).setVisible(false);
}
else {
if (Ext.getCmp(panelGridId).isHidden()) {
Ext.getCmp(panelGridId).setVisible(true);
Ext.getCmp(panelGridId).doComponentLayout();
}
}
}
});
},
interval: 60000 //60 seconds
};
Ext.TaskManager.start(task);
After the data load the scrollbar position is reset to the top..
Q: Is there a way to maintain the scrollbar position after the data load?
Thanks in advance!
Try this bad boy to preserve scroll position on refresh:
http://docs-devel.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View-cfg-preserveScrollOnRefresh
This works for me on my tree view.
viewConfig: {
preserveScrollOnRefresh: true
}
Here's how you would use preserveScrollOnRefresh in your Grid :
Ext.define('js.grid.MyGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
preserveScrollOnRefresh: true
}
Here's a JSFiddle which demonstrates this :
http://jsfiddle.net/cdbm6r0o/7/
However when you select a row it doesn't seem to work quite right. I am not sure if this is a bug.
The 'refresh' event is triggered from this code :
grid.store.loadData(dataToLoad);
I'm unaware of any other events which trigger a 'refresh'
Additional Notes :
I had the Ext.toolbar.Paging as a require. Even though I didn't use it, it screwed up the scroll preserve when I had one or more rows selected, so make sure you remove the Paging from your requires.
The scroll preserve does not appear to work if I use the bufferedrenderer plugin on the table at the same time.
tablePanel.getView().focusRow(recrow) is also interesting to look at, but also does not work with bufferedrenderer.
You can use the preserveScrollOnReload view config property:
viewConfig: {
preserveScrollOnReload: true
},

Categories