Dear Kendo-ites,

I'm using a tabstrip with ajax calls (contentUrls) as follows:


It works like a charms, however when I disable the animation (I tried to set it to false, none, null), I can see in the debugger/console that a call to the same contentUrl is being made 3 times instead of one.

I see the demo "pan and zoom" http://demos.kendoui.com/dataviz/scatter-charts/pan-and-zoom.html . However, when I want to zoom in a chart with datetime x-axis, errors come up. Any one knows how to zoom in with date axis?

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