Hi all,
I have a listView with the following bindings:
listView.bind(
"remove"
,
function
(e) {
$.ajax({
type :
"POST"
,
url : vulnerabilityAssessment.deleteVulnerabilityAssessmentItem.replace(
"{itemId}"
, e.model.id),
contentType :
'application/json'
,
dataType :
"json"
,
success :
function
(response) {
refreshCurrentListView(listViewId, scope);
},
});
}
listView.bind(
"save"
,
function
(e) {
var
item = {
id: ...,
vulnerabilityAssessment: vulnerabilityAssessmentId,
.....
}
if
(e.model.id ==
null
)
item.id = -1;
$.ajax({
type :
"POST"
,
url : vulnerabilityAssessment.saveVulnerabilityAssessmentItem,
contentType :
'application/json'
,
data : JSON.stringify(item),
complete :
function
(e) {
refreshCurrentListView(listViewId, scope);
},
error :
function
(e) {
showErrorDialog(e);
},
dataType :
"json"
});
});
And the refreshCurrentListView function as follows:
function
refreshCurrentListView(listViewId, scope) {
var
type = parseInt(listViewId.substr(listViewId.indexOf(
"_"
) + 1));
var
vulnerabilityAssessmentId = $(
"#vulnerabilityCurrentAssessmentListView"
, scope).children(
'div'
).children(
'div'
)[0].id.substr($(
"#vulnerabilityCurrentAssessmentListView"
, scope).children(
'div'
).children(
'div'
)[0].id.indexOf(
"_"
) + 1);
if
(listViewId.includes(
"Strenght"
)) {
var
itemViewModel = itemViewStrength(vulnerabilityAssessmentId, type,
'S'
);
kendo.bind ($(
"#threatCurrentVulnerabilityAssessment #"
+ listViewId, scope), itemViewModel);
$(
"#threatStrenghtListView_"
+ type +
" .edit-buttons"
).show();
}
}
I'm adding a new record on the list and as soon as I add a second row , I get the following exception:
Uncaught TypeError: Cannot read property
'data'
of undefined
at init.setup (kendo.all.min.js:27)
at init.create (kendo.all.min.js:27)
at Object.<anonymous> (kendo.all.min.js:27)
at Function.Deferred (jquery.min.js:2)
at init._promise (kendo.all.min.js:27)
at init._send (kendo.all.min.js:27)
at init.sync (kendo.all.min.js:27)
at init.save (kendo.all.min.js:54)
at HTMLAnchorElement.<anonymous> (kendo.all.min.js:54)
at HTMLDivElement.dispatch (jquery.min.js:3)
This exception happens when the ajax call inside the 'save' binding takes place (and before it gets to the complete function).
Any ideas?
In a previous post on here, I wrote about implementing drag and drop and sorting on 2 listviews. I've been able to resolve that issue.
The issue I'm having now is, I need to update the listview after the items have been reordered. I have sub items under the items that are getting dragged over. When I reorder the items, it messes up the appearance. See the attached images.
Here are my template for the items:
<script id="selected-item-template" type="text/x-kendo-template">
<div class="item">
<div style="float: right;"><i class="fas fa-fw fa-trash" onclick="removeSelected('${Id}')"></i></div>${Name}
</div>
#= renderMySlideTemplates(data) #
</script>
<script id="sub-item-my-template" type="text/x-kendo-template">
# $.each(data.PDFSlides, function(index, item){
#
<div class="sub-item">
<input type="checkbox" name="cbxSlideSelection" value="${item.Id} " /> ${item.Title}
</div> #
});
#
</script>
Does anyone have any suggestions?
I have an application that has 2 ListViews. I have one ListView that lists products and I'm able to drag the products over to the other ListView. I'm able to drag over the items. The issue that I'm running into is when I try to resort the items on the second ListView. The application breaks. I'm not sure how to fix this.
I've copied over some of my code to see if someone can spot the issue
$("#products-list").kendoListView({
selectable: "single",
dataSource: productsList,
template: kendo.template($('#item-template').html())
});
$("#products-list").kendoDraggable({
filter: ".item",
hint: function (element) {
return element.clone();
},
kendoDropTarget: "#selected-products-list",
});
$("#selected-products-list").kendoListView({
dataSource: selectedProducts,
template: kendo.template($('#selected-item-template').html())
});
$("#selected-products-list").kendoDropTarget({
drop: function (e) { // Apply the changes to the data after an item is dropped.
var draggableElement = e.draggable.currentTarget,
dataItem = productsList.getByUid(draggableElement.data("uid")); // Find the corresponding dataItem by uid.
selectedProducts.add(dataItem);
}
});
$("#selected-products-list").kendoSortable({
filter: ".item",
cursor: "move",
placeholder: function (element) {
return element.clone().css("opacity", 0.1);
},
hint: function (element) {
return element.clone().removeClass("k-state-selected");
},
change: function (e) {
var oldIndex = e.oldIndex,
newIndex = e.newIndex,
data = selectedProducts.data(),
dataItem = selectedProducts.getByUid(e.item.data("uid"));
selectedProducts.remove(dataItem);
selectedProducts.insert(newIndex, dataItem);
}
});
I'm working on an application that has 2 listviews.
This is how the application should work.
One listview has a list of products and the other listview is a selected-products. In the products listview should allow a user to drag products & sub products over to the selected-products listview.
I posted this question with the code sample on stackoverflow. Here is the link:
https://stackoverflow.com/questions/63241305/i-need-help-using-kendo-ui-for-jquery-i-need-to-be-able-to-drag-items-from-one
Can anyone here help me out?
Hi, we updated our kendo version to the latest, and we found something strange.
I know, it's our fault, we shoud not "re-create" a kendo item, but we should check for widgetInstance, or .data("kendoxxx") before creating it.
But, in the previous version, we did not have that bug.
I think that you try to do your best to give us in return the previous instance if it already exists, but in that case, you did something more.
Look at this.
https://dojo.telerik.com/@foxontherock/eCiRiFaZ
If I use setOptions ( in button click), no issue.
If I use kendoListView, to "re-create" it (in fact I don't want it to be re-created, but anyway...) it looks fine, but if you "inspect element", you will see an empty "k-listview-content" generated every time.
We adjust our code to check if the component is already created before creating it.
But I take time to mention it to you, because in the previous version, it was working without problems, when we tried to re-create a component by mistake.
Hello, I am going to build a dashboard and am thinking about using a listview(or multiple) to house widgets/partial views. I will store the users config in the db so I would like to fetch that and load the widgets dynamically into a kendo listview. Is that possible? Any code samples out there? Is there a better way to do this. Just trying not to code it all manually and trying to take advantage of drag and drop, sorting/etc...
Thanks
I am seeing VERY strange behavior using a kendoValidtor with a listView. The listview is a table and each line looks like this:
<
script
type
=
"text/x-kendo-tmpl"
id
=
"tmplMenuOptionsGroupRow"
>
<
tr
>
<
td
class
=
"w-25"
>
<
i
class
=
"fal fa-arrows fa-2x dragHandler"
></
i
>
</
td
>
<
td
class
=
"w-50"
>
<
input
name
=
"optionDesc"
class
=
"form-control k-textbox k-input-lg"
required
validationMessage
=
"Enter Description"
data-bind
=
"value: description, disabled:legacy, events:{change: editorModel.menuOptionGroup.onMenuItemOptionsGroupChange}"
/>
</
td
>
<
td
class
=
"w-25 dragHide text-left"
>
<
input
class
=
"w-100 k-input-lg"
data-role
=
"numerictextbox"
data-format
=
"c"
data-min
=
"0"
data-format
=
"c2"
name
=
"optionPrice"
data-spinners
=
false
required
validationMessage
=
"Enter Price"
data-bind
=
"value:price, disabled:legacy, events:{change: editorModel.menuOptionGroup.onMenuItemOptionsGroupChange}"
/>
<
span
class
=
"k-invalid-msg"
data-for
=
"optionPrice"
></
span
>
</
td
>
<
td
class
=
"dragHide"
>
<
button
type
=
"button"
class
=
"btn btn-danger btn-sm"
data-bind
=
"click:editorModel.menuOptionGroup.deleteOption, disabled:legacy"
><
i
class
=
"fal fal fa-trash-alt"
></
i
>
</
button
>
</
td
>
</
tr
>
</
script
>
As you can see the optionDesc field is a mandatory field and I have defined a validationMessage when it is empty.
However when I test it I see the following results (see 2020-03-29_1045.png)
As you can see the error message appears nexts ALL the optionDesc fields and not just the one that is missing.
So I thought I would try a different approach with the optionPrice field (also required). so I added a k-invalid-msg right next to the field in the same <tr> and <td >as the input.
However it also behaves incorrectly and even MORE strangely. Basically the error message is displayed in the correct spot the first time. After that if any other field in another row is blank the error message is displayed in the original place and NOT next to the empty field. See image 2020-03-29_1049.png as an example. The field in row 3 is missing but the error message is showing in row 1 where it was previously missing.
Anyone have ideas/suggestions?
Alon
I need to set an custom empty message for the pager in a listview. We are binding using data-attributes. I think the data- for the empty message would be something like this, but this isn't working
<div id="pager-#= data.tabId #" class="activity-pane-pager k-pager-wrap" tabindex="0"
data-role="pager"
data-bind="source: dataSource"
data-messages-empty="test message" >
</div>
Can you tell me what this should be? Thanks!