Kendo UI Listbox displaying duplicate items - javascript

I'm using a Kendo UI Listbox control to display items. I'm populating the control by specifying a javascript array as the data source.
Here is the page markup.
<div>
<select id="selectedview"></select>
</div>
<script>
$(document).ready(function () {
$("#selectedview").kendoListBox();
});
</script>
And here is the javascript / JQuery that I am using to populate the Kendo UI Listbox control.
var listBox = $("#selectedview").data("kendoListBox");
listBox.clearSelection();
$("#selectedview").kendoListBox({
dataSource: subscribers
});
Here's the DataSource array that I am using.
When the control is displayed however the same two items are displayed multiple times in error.
What's going on and how do I fix this?

You seem to be re-creating the widget over an already existent instance, that is why it is duplicating the items. Check this out.
If you want to update the list of an already created widget instance, try either:
Change the DataSource's data:
$("#selectedview").data("kendoListBox").dataSource.data(subscribers);
To set setDataSource again:
$("#selectedview").data("kendoListBox").setDataSource(new kendo.data.DataSource({
data: subscribers
});

Related

jQuery DataTables: check all checkboxes on page load

I have a grid which is based on jQuery DataTables Checkboxes. It pretty much looks like the basic example that gyrocode have on their webpage
Does anyone know if I can have all checkboxes checked when the table first loads please (including the master checkbox, the one at the top that checks/unchecks all with a single click)
I tried $("input.dt-checkboxes").prop("checked", true); but that checks only the entries that are currently shown on the datatable's page
you can use cells.checkboxes.select(), filter the cells but, but we actually return true for all rows here, a working fiddle:
...
'initComplete': function(settings){
var api = this.api();
api.cells(
api.rows(function(idx, data, node){
return true;
}).indexes(),
0
).checkboxes.select();
},
...

Input inside a template is not converting to Kendo widget

I am using Knockout-Kendo.js to bind Kendo widgets to Knockout observables. I have a KendoListView that populates itself from html template based on a observable named "Filters". The problem I am having is that the input control that I am using inside the template is not converting into a Kendo widget, even though I am specifying it as a kendoComboBox. (I have left out properties of dataSource, etc for simplicity)
Other things to take note of.
On page load, there are no objects in the Filters observable property
in the Model.
ko.ApplyBindings(Model) is called within the Document ready function.
Users make various selections on the page, which then populates the
Filter observable in the model.
The controls do show up in DOM when Filters are added, but as native Html controls.
var Model = {
Filters: ko.observable([]),
FilterItemTemplate: function () {
return kendo.template($("#FilterItemTemplate").html())
}
}
<div id="Filters" data-bind="kendoListView: { data: Filters, template: FilterItemTemplate()}" ></div>
<script type="text/html" id="FilterItemTemplate">
<div>
<h4>#=ControlLabel#</h4>
<input id="#=ControlID#" name="FilterControl" data-bind="kendoComboBox: {}" />
</div>
</script>
What I wind up doing is
Removed the ListView from the Filters div.
Since the ListView is now removed, i subscribed to the Filters observable in my model with my javascript code. So whenever something is loaded or removed from the Filters observable, the function listener will be invoked.
Within the listener function manually created the Kendo widgets and append to the Filters div.

knockout apply binding to dynamically loaded html from ajax mvc contrib grid

I have an AJAX MVC Contrib Grid implementation, that already existed and now I am in a situation where I am trying to bolt on some knockout functionality... and I want to know if this is possible without changing the whole grid implementation.
This is the refresh grid function that is setting the container html when the pagination changes.
scope.refreshGrid = function (container, url) {
if (url)
container.data(scope.selectors.actionUrlAttribute, url);
$.post((url || container.data(scope.selectors.actionUrlAttribute)), scope.getParams(),
function(html) {
container.html($(html).html());
scope.bindDeleteButtons();
}).done(function() {
container.trigger("refresh.ctb.grid");
});
}
one of the columns for the grid is custom column that uses Html.Partial like this:
column.Custom(x => Html.Partial("_CartSelection", new CartSelection(x.Id)));
The partial view has the below markup with some knockout data bindings
<input type="checkbox" value="#Model.Id" data-bind="enable: (selectionEnabled() || $element.checked), checked: selectionIds" />
This works for the first page of results, when the paging is selected to change the page and the container html() is updated the bindings no longer work but the KO viewModel still has the correct selectionIds.. which is what I was expecting to happen.
The KO view model is being applied as shown below, where the grid has a wrapper parent div with an id of "cart":
$(function() {
var viewModel = new IP.Configuration.CartSelector(new IP.Router());
ko.applyBindings(viewModel, document.getElementById("cart"));
});
I have already seen comments in other posts about how you shouldn't re-apply bindings. In my case it seems I want to apply bindings but only to some child nodes that are being dynamically loaded.
Is this possible?
UPDATE:
Almost had this working by adding a cart-selection class to each checkbox and doing the below in a rebind function on the viewModel, where self is the viewModel:
$("#cart .cart-selection").each(function(index, item) {
ko.applyBindings(self, item);
});
Then doing the below on the custom trigger for refreshing the grid, when the content is reloaded.
$("#cartGrid").on("refresh.ctb.grid", function() {
viewModel.rebind();
});
The issue I am finding with this at the moment is that the checkboxes are no longer enabled regardless of the $element.checked binding.. maybe a valueHasMutated will fix this, still looking into this.
I figured out what my remaining problem was, it was due to the ordering of the data bindings.
The enable data bind needed to be placed after the checked binding since it has a dependency on it via $element.checked which makes sense now after realising it!!
I changed my rebind function slightly to the below:
var gridResult = $("#cartGrid table");
if (gridResult.length > 0)
ko.applyBindings(this, gridResult[0]);
Each refresh brings in a new table but at least now if I add any more bindings to other elements in the results from the grid, they will work as expected.

select items in kendo list view via jQuery

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);
}
}

How to rebind a Kendo ListView after changing template

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;
});

Categories