Hi,

I am having problem in editor template in chrome and IE but works fine with Firefox.

Please see the attachement

With the code that follows, I am able to edit any record, but I cannot add a new record.  The popup window never appears and I get a javascript error "0x800a1391 - JavaScript runtime error: SupplierLocation is undefined".  

(grid code)

@(Html.Kendo().Grid<FastTrack.MVC.Models.ContractorLoadTicketModel>().Name("gridUnreconciledContractor").Columns(c =>
        {
            c.Bound(m => m.SupplierLocation).ClientTemplate("#= SupplierLocation.SupplierName #").Title("Supplier");
            c.Bound(m => m.SupplierLocation.LocationName).Title("Origin");
            c.Bound(m => m.TicketNumber).Title("Ticket #");
            c.Bound(m => m.ReceivedDate).Title("Date").Format("{0:MM/dd/yy}").HtmlAttributes(new { style = "text-align:right" });
            c.Bound(m => m.ProjectMaterial.MaterialName).Title("Material");
            c.Bound(m => m.Hauler.HaulerName).Title("Hauler");
            c.Bound(m => m.TruckNum).Title("Truck #").Width(75)
                .ClientFooterTemplate("Loads: #=count#")
                .FooterHtmlAttributes(new { style = "text-align:right" });
            c.Bound(m => m.Quantity).Title("Quantity").Format("{0:n2}").HtmlAttributes(new { style = "text-align:right" })
                .ClientFooterTemplate("Total: #=kendo.toString(sum, 'n2') #")
                .FooterHtmlAttributes(new { style = "text-align:right" });
        })
        .DataSource(d => d
            .Ajax()
            .ServerOperation(false)
            .Read(read => read.Action("GetUnreconciledContractorTickets", "TicketReconcile").Data("paramProjectKey"))
            .Create(update => update.Action("SaveTicket", "TicketReconcile"))
            .Update(update => update.Action("SaveTicket", "TicketReconcile"))
            .Destroy(update => update.Action("DeleteTicket", "TicketReconcile"))
            .Events(events => events.Sync("contractorTicketSaved"))
            .Aggregates(a =>
                {
                    a.Add(m => m.TruckNum).Count();
                    a.Add(m => m.Quantity).Sum();
                })
            .Model(model => model.Id(m => m.TicketKey))
        )
        .ToolBar(toolbar =>
        {
            toolbar.Create();
        }

(model)

public class ContractorLoadTicketModel
    {
        public int TicketKey { get; set; }
        public int ProjectKey { get; set; }
        [Display(Name="Supplier/Location")]
        public SupplierLocationModel SupplierLocation { get; set; }
        [Display(Name = "Ticket #")]
        public int TicketNumber { get; set; }
        [Display(Name = "Material")]
        public ProjectMaterialModel ProjectMaterial { get; set; }
        public HaulerModel Hauler { get; set; }
        [Display(Name = "Truck #")]
        public string TruckNum { get; set; }
        [Display(Name = "Date")]
        public System.DateTime ReceivedDate { get; set; }
        [Display(Name = "Date/Time")]
        public System.DateTime ReceivedDateTime { get; set; }
        public Nullable<decimal> Latitude { get; set; }
        public Nullable<decimal> Longitude { get; set; }
        public System.DateTime UploadTime { get; set; }
        public string EnteredByUser { get; set; }
        public string DeviceID { get; set; }
        public decimal Quantity { get; set; }
        public string Reconciled { get; set; }
        public bool HasImage { get; set; }
        public bool HasNote { get; set; }

        public ContractorLoadTicketModel()
        {
            SupplierLocation = new SupplierLocationModel();
            ProjectMaterial = new ProjectMaterialModel();
            Hauler = new HaulerModel();
        }
    }

(template)

@model FastTrack.MVC.Models.ContractorLoadTicketModel

@Html.HiddenFor(model => model.TicketKey)
@Html.HiddenFor(model => model.ProjectKey)

<div class="editor-label" >
    @Html.LabelFor(model => model.SupplierLocation)
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(model => model.SupplierLocation).HtmlAttributes(new { style = "width:75%" })
.DataTextField("SupplierLocation")
.DataValueField("OriginKey")
.DataSource(d => d
    .Read("GetSupplierLocations", "DatabaseUtility")
    )
    )    @Html.ValidationMessageFor(model => model.SupplierLocation)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.ProjectMaterial)
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(model => model.ProjectMaterial).HtmlAttributes(new { style = "width:75%" })
.DataTextField("MaterialName")
.DataValueField("MaterialKey")
.DataSource(d => d.Read(read => read.Action("GetProjectMaterials", "DatabaseUtility").Data("paramProjectKey")))
    )
    @Html.ValidationMessageFor(model => model.ProjectMaterial)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Hauler)
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(model => model.Hauler).HtmlAttributes(new { style = "width:75%" })
.DataTextField("HaulerName")
.DataValueField("HaulerKey")
.DataSource(d => d.Read(read => read.Action("GetHaulers", "DatabaseUtility")))
    )
    @Html.ValidationMessageFor(model => model.Hauler)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.TicketNumber)
</div>
<div class="editor-field">
   @Html.Kendo().NumericTextBoxFor(model => model.TicketNumber).Format("####").HtmlAttributes(new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.TicketNumber)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.ReceivedDateTime)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.ReceivedDateTime)
    @Html.ValidationMessageFor(model => model.ReceivedDateTime)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.TruckNum)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.TruckNum, new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.TruckNum)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Quantity)
</div>
<div class="editor-field">
   @Html.Kendo().NumericTextBoxFor(model => model.Quantity).Decimals(2).HtmlAttributes(new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.Quantity)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Latitude)
</div>
<div class="editor-field">
    @Html.Kendo().NumericTextBoxFor(model => model.Latitude).Decimals(8).Format("##.########").HtmlAttributes(new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.Latitude)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Longitude)
</div>
<div class="editor-field">
    @Html.Kendo().NumericTextBoxFor(model => model.Longitude).Decimals(8).Format("##.########").HtmlAttributes(new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.Longitude)
</div>

I just upgraded my kendo ui to the latest version, however the line below the window title is lost. After some investigation, I found it's because the "margin-top" set to "-30px" on the kendo window title bar.  I made a fix by defining the following in my style sheet, but is this the right way to fix this issue?  Is there a way to customize how the margin-top is defined. 

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 ?