I am having some issues with a listView.  I am populating it with information, I have each listView Item clickable to another screen to edit the item.  But sometimes when I navigate back, the listView shows no data at all.  When I debug my code I can see that data is being returned every single time and the listView is being re-bound.  The data is also displayed in the HTML markup of my page, so I know it returned it.

Here is a copy of the code I am using along with some screen shots.

WidgetListView.prototype.initView = function (initEvent) {
    var thisClass = this;
    //Grab data
    thisClass.listView = new kendo.data.DataSource({
        transport: {
            read: $.ajax({
                type: "POST",
                url: thisClass.loadEndpoint,                            
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                headers: { 'x-sauthcode': localStorage["authCode"] },
                data: JSON.stringify(
                    thisClass.loadEndpointData()                        
                ),
                success: function (result, status) {

                    thisClass.viewModel.set("data", result);   //this part here always has data even if the listView does not display it

                    if (result.length > 0) {
                        //prepare Data if needed
                        thisClass.prepareDataEvent(result);             

                        ///bind the listView to element ID
                        $(thisClass.listViewId).kendoMobileListView({
                            dataSource: thisClass.viewModel.get("data"),
                            //bind template ID
                            template: $(thisClass.templateId).text(), 
                            click: function (e) {
                                thisClass.clickEvent(e);
                            }
                        });
                        //Do post data checks
                        thisClass.postGetEvent(result);                 

                    } else {
                        //console.log(noResultsMsg);
                        thisClass.noResultsEvent(thisClass.noResultsMsg);
                    }
                },
                error: function (error) {
                    console.log(error);
                    //Handle Errors
                    thisClass.errorEvent();                             
                }
            })
        }
    });
};


Here is my HTML code:
<div data-role="content">
    <ul id="historyList" data-role="listview" data-style="inset" data-template="historyTemplate"></ul>
</div>

My Template:
<script type="script/x-kendo-template" id="historyTemplate">
    <div class="listViewItem">
        <div id="ListItemRow">
            <div id="ListItemLabel">Status:</div>
            <div id="ListItemValue">#: (Status != null) ? Status : ''  # &nbsp;</div>
        </div>
        <div id="ListItemRow">
            <div id="ListItemLabel">Date:</div>
            <div id="ListItemValue">#: (StatusDate != null) ? dateFormat(StatusDate, "m/d/yyyy", true) : ''  # &nbsp;</div>
        </div>
        <div id="ListItemRow">
            <div id="ListItemLabel">Modified:</div>
            <div id="ListItemValue">#: (ModifiedBy != null) ? ModifiedBy : ''  # &nbsp;</div>
        </div>
    </div>
</script>



any help to why the list binds most of the time but sometimes randomly does not, even though data was returned the HTML would be great.  Thanks for the help!

I am adding items to a Kendo List View dynamically.

In one of the list view items we add in some label text and then place 2 buttons.

The text can be anywhere from 1 - 15 characters.

We want to first button placed to always start at the 50% of total width.

The second button (this works OK) we place 5px from the right margin.

I am having a problem try to figure out how to put that button at the 50% total width mark, seems like it should be easy, but using margin always starts from the end of the text.

I am trying to come up with a formula that will work in general for most devices regardless of orientation so the width would be anywhere from 320 - 1024 and maybe more for high resolution tablets and monitors.

Here is some code that I have been using - any help from list view guru's appreciated.

<div data-role="view" id="ListSample" data-title="My List View">
  <form>
    <ul id="mylistview" data-role="listview"></ul>
  </form>
</div>

Here is the code to place the item in the list view// label text - this can vary in length 1 - 15 characters:

// define test
var textLabel = 'ABC 123';

// get length of text
var textLength = detailData[i].PROMPT.length;

// assume 4 pixels per character - this is not accurate but what I was trying
var textPixels = textLength * 4;

// figure out left margin percent from
marginPercent = (66 - ((textPixels/$(document).width())*400)) + '%';

// now append the list view item
$('#mylistview').append('<li><label>'+textLabel+'<a data-role="button" data-icon="camera"
class="km-button" onclick="onCamera()" style="marginleft:'+marginPercent+'; width:40px;height:40px;font-size:40px;text-align:center;vertical-align:middle;padding:10px 20px 10px 10px;"><span class="km-icon km-camera km-notext"></span></a></label><a data-role="button" class="km-button" on click
="onPreview()" style="float:right;margin-right:5px;width:40px;height:40px;font-size:40px;text-align:center;vertical-align:middle;padding:10px 20px 10px 10px;"></a>
</li>');

I have a grid where for newly created items I autoincrement the ID field like this:


The problem I am having is when I call addRow() the UID is generated based on an ID of 0, and not the ID that I create in the onChange event. This causes problems when trying do a dataSource.get(ID)...


Any hints? This is making other operations on my grid impossible.

Hi, 

I am planning to customize the Kendo UI upload control in my application. 

The user can select the multiple files ( up to 20) and currently the only the first file in the selected list is shown clearly and all other selected files are not shown completely. 

I want to change this behavior and customize a bit like i would like to show all the selected files one by one in each row and also the size of that the textarea ( where the file names are shown) should change with the length of the file name. 

I am using synchronous mode of upload.

How can we do this ?

We have a 4 level treeview. Since I know to get all the data from the 4th level will be time consuming, I want to click the 3rd level tree node, then get the data of 4th level and populate the nodes.  To get the data for 4th level when click the 4rd node is fine, but how can I let the new nodes appear without refreshing the whole treeview? 
Thanks for help.

Hi,

Can anyone help me on how to solve this issue?  I was able to see the parent nodes but not the children.  

Json result:

[{"PartNo":"1KK-21BD","HasChild":true,"_items":[{"ChildPartNo":"9003"},{"ChildPartNo":"7043"},{"ChildPartNo":"4036"},{"ChildPartNo":"9023"},{"ChildPartNo":"9040"}]}]

Below is my code:

@(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new {@class="demo-section" })
    .LoadOnDemand(false)
    .DataTextField("PartNo")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Search", "Home").Data("GetInfo")
        )
       
    )
)




 function btnSearch_click() {
   GetInfo();
 }


 function GetInfo() {
        
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: 'application/json; charset=utf-8',

            data: JSON.stringify({
                PartNo: $('#txtNo').val()
            }),
            url: "@Url.Action("Search", "Home")",

            success: function (result) {
                debugger;
                  var dataSource = new kendo.data.HierarchicalDataSource({
                    data: result,
                    schema: {
                        model: {
                            PartNo: 'PartNo',
                            children: '_items',
                            hasChildren: 'HasChild'
                        }
                    }
                });

                $("#treeview").data("kendoTreeView").dataSource.data(dataSource.options.data);
            }
        })




Thanks for your help!!

Hello
Is it possible to have doughnut chart similar to gauge so only some angle of chart is visible (not 100%). Like e.g. 270 angle.

Kind Regards
Marcin

I've actually extended the ComboBox and added some of my own fuunctionality tpo it. It's workign very well so far, but for one little slight annoyance.

I want to prevent the ComboBox from automatically making a selection when the text in the editable area matches exactly the stated value of the item. This has to do with CSS reasons mostly. Also, I've overwritten the arrow scrolling, so that when you press the down arrow it will focus the next element (adds k-state-focused), but it does not actually select the value until you either hit enter, or click on it. I've tried removing the "k-state-selected" class from the element, but that causes errors when I actually go to select an item with the mouse, in that it causes the "e.item" to not be defined and so I'm unable to perform any "select" actions based on the selected value.

Any suggestions?

Hi ... relatively new to webdev ...

I'm trying to populate the treeview from an async remote data source

var tree = $('#treeview').kendoTreeView({   
        dataSource: getQueryData(),
        dataTextField: "Name",
        select: function (e) { 
         var id = this.dataItem(e.node).id;
         onChange(id);
        }

I need to retrieve the data then process it prior to setting the data source in order to add sprites. Thus far my solution is as follows

  function fetchData(cb) {
    var data = [];
    var ds = new kendo.data.DataSource({
      transport: {
        read: {
          url         : "http://localhost:57773/api/definitions",
          dataType    : "json"
        }
      }
    });

    ds.fetch(function () {
      data = cb(ds.data());              
    });      

    return data;
  };

  function addSprites (data) {
    for (var key in data) {
      if (key == "NodeType") {
       data.spriteCssClass = data.NodeType;
      }

      if (data[key] !== null && typeof(data[key])=="object") {
        addSprites(data[key]);
      }
    }
    return data
  };

  function getQueryData () {  

    var dataitems = fetchData(addSprites);
    
    var hds = new kendo.data.HierarchicalDataSource({
      data: dataitems,
      schema: {
        model: {
          id          : "Key",
          hasChildren : "HasChildren"          
        }
      }  
    });

    return hds;
  }; 

I am not quite sure how I should be architecting this since the hierarchical data set is returning prior to the completion of the async data retrieval and pre-processing of that data. I'd be grateful if someone could give me a steer as to how to do this "properly". If possible I'd like to avoid going synchronous.

Thx IA.

Simon

Hi, is there any configuration to prevent Editor from converting Greek characters to html entities? For example, by default Editor converts "ΑΒΓ" to "&Alpha;&Beta;&Gamma;". Any workarounds? BTW, I use the MVC wrapper.