Telerik Forums
Kendo UI for jQuery Forum
1 answer
1.0K+ views

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?

Georgi
Telerik team
 answered on 04 Sep 2020
1 answer
237 views

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?

Viktor Tachev
Telerik team
 answered on 17 Aug 2020
3 answers
161 views

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

Viktor Tachev
Telerik team
 answered on 14 Aug 2020
1 answer
55 views

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?

Preslav
Telerik team
 answered on 06 Aug 2020
2 answers
48 views

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.

 

Frederic
Top achievements
Rank 1
Veteran
Iron
 answered on 03 Jun 2020
1 answer
503 views

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

Alex Hajigeorgieva
Telerik team
 answered on 20 May 2020
8 answers
701 views
Hi,

Is there a way to select all items in the listview?

I am able to select a row with .select method:

ListView.select();


Thanks
Safak
Alex Hajigeorgieva
Telerik team
 answered on 13 May 2020
11 answers
2.5K+ views
Hello,

I was wondering, is there a out of the box way to setup a template that would be shown only if the listview is empty. For instance lets say we have a product list with search. If you search something that matches no results now my listview area would be empty. I want it to display nice big letters saying "No products match your search".

One way I thought I could do this is to have two divs. One with the listview and another one with this message and bind them to a visible / invisible view model property that shows the product data source item count. That way the listview would be shown when there are products, and the message would be shown when the count is at 0.

I guess it would work, but seems rough. Is there a better way or should I stick to my idea?
Alex Hajigeorgieva
Telerik team
 answered on 24 Apr 2020
1 answer
95 views

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

 

 

 

 

Ivan Danchev
Telerik team
 answered on 31 Mar 2020
1 answer
120 views

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!

Vessy
Telerik team
 answered on 29 Jan 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?