I have a kendo list view to display candidate information, I need to select candidate items in the list view on data bound event based on a Boolean property "IsPerfectMatch" in the data item. The code is as below:
function onDataBound(){
var lisView = this;
$.each($("#dupCheckList").data("kendoListView").dataSource.data(),
function(index, item){
if(item.IsPerfectMatch){
listView.select(this);
}
});
}
When I debugged, I can see things working until the if block that checks "item.IsPerfectMatch" but the line of code "listView.select(this);" is not selecting the list item.
Please suggest where could I be going wrong.
Also, I have set the list view selection mode to multiple for this list view. I would want to disallow selection of only the first item in the list. In other words, apart from the first item in the list view, all other items are selectable. Please suggest with sample jQuery code on how to achieve it.
Thanks and regards,
Damodar
ListView items are NOT the DataSource entries, so the value you're sending to the select() method is invalid. To iterate over the viewable children you will have to use the element.children() call.
var listView = this;
$.each(this.element.children(), function(index, item) {
if (listView.dataSource.getByUid(item.dataset.uid).IsPerfectMatch) {
listView.select(item);
}
}
Related
I need to edit two columns of my grid using combos as editors, and I need the values shown in the second to be filtered accordingly to the value selected in the first one.
There is also the problem that I need to show the "bound" value (i.e. "description") instead of the Id, in the grid cell.
I prepared a (very simplified) fiddle to show the problem here
Click here for the fiddle
Looking at the fiddle, I'd need to select the brand in the first combo and then a model in the second, but I should obviously find only the models from the selected brand in there.
How can I show the descriptive text in the cell?
How can I filter the second combo?
Thanks
The editing plugin has an beforeedit event you can use, for example:
listeners: {
beforeedit: function(editor, context) {
var record = context.record;
if (context.field !== 'modelId') {
return;
}
models.clearFilter(true);
models.filter({
property: 'brandId',
value: record.getId()
});
}
}
Working example: https://fiddle.sencha.com/#fiddle/12hn
I've doing some research about a problem I'm having with jQuery select2 plugin. The select2 sorts the selected items (no matter which order you choose them) when posting form. I know it may not be a select2 specific bug, but standard html select behaviour.
Now, how could I get the selected items IDs and then put them in a comma separated list in a hidden input so I can respect the order the items were chosen?
$("#formpacint").submit(function (event) {
var data = $('#campoprofesionales').select2('data');
$('#hidprofesionales').val(data);
});
The above code puts the selected items (in the order they were chosen) using its data property, into the hidden input, but the console.log shows them as objects (text+id I guess)..
I'd need to have: 35,14,29 (the ids of selected items as they were selected without sorting)
Thanks
Found a solution
var selections = (JSON.stringify($("#campoprofesionales").select2('data')));
var obj = $.parseJSON(selections);
$.each(obj, function() {
console.log(this.id);
// I here set a hidden field with the ids in the order they were selected
});
I Use Fuel UX tree plugin. And I need to get information about unselected item when mouse click.
At first, all items in tree are selected, and when I click on tree item, it's become unselected, but I cannot get information about this item, because this code:
$('#tree1').on('selected', function (evt, data) {
console.log(data);
}
returned only selected items. Are the way to get information about unselected items in tree?
I added an additional "unselected" event into my copy of the fuelUX code around line 100...
if($el.hasClass('tree-selected')) {
this.$element.trigger('unselected', {info: $el.data()});
$el.removeClass('tree-selected');
$el.find('i').removeClass(this.options['selected-icon']).addClass(this.options['unselected-icon']);
} else {
...
This sends me the data associated with the unselected item as well. Hope it helps you.
I'm attempting to rebind the listview data after changing the template, based on a DropDownList value. I've included a JSFiddle for reference. When I rebind currently the values in the template are undefined.
Thanks!
JSFiddle link
I was thinking the best way to handle it would be in the 'select' or 'change' function:
var cboDetailsCategory = $("#detail").kendoDropDownList({
data: [
"All",
"Customer",
"Location",
"Meter",
"Other"],
select: function (e) {
var template = $("#" + e.item.text()).html();
console.log("template", template);
$("#details").html(template);
},
change: function (e) {
},
please refer to the JSFiddle link and this graphic as a visual
Here is a lengthier workflow:
User completes a name search and clicks a search button.
Name results are populated in a listview, rendered individually as button controls using a template.
User then clicks one of the name results (shown as the button text).
A dropdownlist of categories ('All' <--default , 'Location', 'Customer'...) gives the user the ability to target what subject of data they want to see. 'All' is the default, showing all details about the selected name.
So by default the 'All' template is populated.
If user wants to see the 'Location' details (template) they select it from the dropdownlist.
The template shows but the values are all blank. The only way to populate it is to click the name (button) again.
I want to remove the need for having to re-click the button (name) to populate the template ('Location', etc...).
I have put together a JSFiddle showing the structure. Though due to the data being private and served over secure network I cannot access it.
Refer to JSFiddle:
I believe the issue is that the onclick event grabs the data-uid and passes it to the initial default template (named 'All' but it's not included in code as it's lengthy). When the user changes the dropdownlist (cboDetailsCategory) and selects a new template I lose the data.
Thanks for your help. I'm really stuck on this and it's a current show stopper.
There isn't an officially supported way to change templates, without destroying the listview and rebuilding it. However, if you don't mind poking into into some private api stuff (be warned I can't guarantee that kendo won't break it without telling you) you can do this
var listview = $("#MyListview").getKendoListView();
listview.options.template = templateString;
listview.template = kendo.template(listview.options.template);
//you can change the listview.altTemplate the same way
listview.refresh(); //redraws the elements
if you want to protect against unknown API changes you can do this, which has A LOT more overhead, but no risk of uninformed change (untested!)
var listview = $("#MyListview").getKendoListView(),
options = listview.options;
options.dataSource = listview.dataSource;
listview.destroy();
$("#MyListview").kendoListView(options);
Here's the solution, thanks for everyone's help!
JSFiddle Link
The issue was where I was setting the bind:
$("#list").on("click", ".k-button", function (e) {
var uid = $(e.target).data("uid");
var item = dataSource.getByUid(uid);
var details = dropdown.value();
var template = $("#" + details).html();
$("#details").html(template);
kendo.bind($("#details"), item);
currentData = item;
});
Left i have a list with all names. I select one name and click on a button 'add' (to the right list). Also i want to 'remove' items form the right list, back to the left list.
Someone an example?
$('#buttonid').click(function(){
var selecteditem = $('#listID option:selected').html();
$('#targetListId').append(selecteditem );
}
vice-vers for second question.
http://dev.sencha.com/deploy/dev/examples/dd/dnd_grid_to_grid.html
is an example to study
Is this what you're after?
I dont have example handy, however if you look at http://dev.sencha.com/deploy/dev/examples/grid/array-grid.html you can see grid example, focus on tpl to generate action (sell, buy) images/buttons, in listView you can also use tpl, change actions to remove (maybe only gray out if want to restore)...
But add action should be easier in EditGridPanel, If you want to still use listView I will suggest to have ad button on top or bottom toolbar, execute formPanel for data entry, when submit just add to listView.store
Dont forget to build communication to DB if needed in add and remove actions
That's really-really simple to do.
Just grab the selected record(s), remove from the store of left list, and add to the store of right list:
var left = // define your GridPanel or ListView
var right = // define your GridPanel or ListView
new Ext.Button({
text: "Move right ->",
handler: function() {
// when using GridPanel
var records = left.getSelectionModel().getSelections();
// when using ListView
var records = left.getSelectedRecords();
left.getStore().remove(records);
right.getStore().add(records);
}
});
I'm sure you can figure out how to implement the "Move left" button.
Note: Always first remove record from one store before adding to another as ExtJS currently doesn't support having one record in multiple stores. If you do it the other way around, strange things will happen.