Questions on Kendo UI for jQuery Forum

3 answers

153 views

Problem with Grid Popup Editor and Combo Boxes while in Add Mode.

I have a Grid with a popup editor that contains combo boxes. Each of the boxes works fine when in Edit mode. However, when I click Add New, and then "Update" button on the template....the values from the Combo Boxes are not being returned from the form. The fields remain NULL. I throw an alert up to verify that the selection was made...which it is. But the record does not get sent to the controller with the value that is selected.

Here is the Popup Editor Template

@model sgrc.vpd.home.Models.vwInventory

<script>

function onSelect(e) {

var combobox = $("#ItemType").data("kendoComboBox");

var dataItem = this.dataItem(e.item.index());

alert(dataItem.ItemType + " " + dataItem.TypeID);

};

</script>

@{

ViewBag.Title = "Edit Inventory Item";

}

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

@Html.HiddenFor(model => model.ItemID)

@Html.HiddenFor(model => model.VehicleID)

@Html.HiddenFor(model => model.memorycard)

@Html.HiddenFor(model => model.remarks)

@Html.HiddenFor(model => model.signon)

@Html.HiddenFor(model => model.signoff)

@Html.HiddenFor(model => model.AssignedName)

@Html.HiddenFor(model => model.caliber)

<div id="tabstrip">

<ul>

<li class="k-state-active" >

Item Information

</li>

<li >

Assignment Information

</li>

<li >

Vehicle Information

</li>

</ul>

<div id="Item Information">

<div class="edit-field">

<br />

<label for="ItemType" style="color:#212a33">Select Type:</label>

@(Html.Kendo().ComboBox()

.Name("ItemType")

.Placeholder("Select Item Type...")

.DataTextField("ItemType")

.DataValueField("TypeID")

.Filter("contains")

.Events(e => e.Select("onSelect"))

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetItems", "Inventory");

})

.ServerFiltering(false);

})

)

<label for="Status" style="color:#212a33">Select Status:</label>

@(Html.Kendo().ComboBox()

.Name("StatusID")

.Placeholder("Select Status...")

.DataTextField("Status")

.DataValueField("StatusID")

.Filter("contains")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetStatus", "Inventory");

})

.ServerFiltering(false);

})

)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.serialnumber, "Serial Number/VIN")

@Html.TextBoxFor(model => model.serialnumber, new { style = "width: 80%; float:right" })

@Html.ValidationMessageFor(model => model.serialnumber)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.Description, "Description")

@Html.TextAreaFor(model => model.Description, new { cols = 83, rows = 5 })

@Html.ValidationMessageFor(model => model.Description)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.PurchaseDate, "Date Purchased")

@Html.EditorFor(model => model.PurchaseDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })

@Html.ValidationMessageFor(model => model.PurchaseDate)

@Html.LabelFor(model => model.InServiceDate, "In Service Date", new { style = "color:#212a33" })

@Html.EditorFor(model => model.InServiceDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })

@Html.ValidationMessageFor(model => model.InServiceDate)

</div>

<div id="Assignment Information">

<div class="edit-field">

<br />

<label for="AssignedID" style="color:#212a33 "width: 80%" >Assigned Officer:</label>

@(Html.Kendo().ComboBox()

.Name("AssignedID")

.DataTextField("FullName")

.DataValueField("PersonID")

.Placeholder("Select Officer")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetOfficers", "Inventory");

})

.ServerFiltering(false);

})

)

@Html.LabelFor(model => model.AssignedDate, "Date Assigned", new { style = "color:#212a33" })

@Html.EditorFor(model => model.AssignedDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })

@Html.ValidationMessageFor(model => model.AssignedDate)

</div>

<div class="edit-field" style="width:40%">

<label for="AssignedBy" style="color:#212a33" >Assigned By</label>

@(Html.Kendo().ComboBox()

.Name("AssignedBy")

.DataTextField("FullName")

.DataValueField("PersonID")

.Placeholder("Select Officer")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetOfficers", "Inventory");

})

.ServerFiltering(false);

})

)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.lastupdated, "Last Updated", new { style = "color:#212a33" })

@Html.EditorFor(model => model.lastupdated)

@Html.ValidationMessageFor(model => model.lastupdated)

@Html.LabelFor(model => model.lastupdatedby, "Last Updated By")

@Html.TextBoxFor(model => model.lastupdatedby, new { disabled = "disabled", style = "width: 30%; float:right" })

</div>

<div id="Vehicle Information">

<div class="edit-field">

<br />

@Html.LabelFor(model => model.make, "Make", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.make, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.make)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.model, "Model", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.model, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.model)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.year, "Year", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.year, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.year)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.color, "Color", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.color, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.color)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.tag, "Tag", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.tag, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.tag)

</div>

}

<script>

$(document).ready(function () {

$("#tabstrip").kendoTabStrip({

animation: {

open: {

effects: "fadeIn"

}

});

</script>

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

}

Here is the grid.

@(Html.Kendo().Grid<sgrc.vpd.home.Models.vwInventory>()

.Name("grid")

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

.Columns(columns =>

{

columns.Bound(dataInventory => dataInventory.serialnumber).Title("Serial#").Width(200);

columns.ForeignKey(dataInventory => dataInventory.ItemType, (System.Collections.IEnumerable)ViewData["itemtypes"], "TypeID", "ItemType")

.Title("Type").Width(250);

columns.ForeignKey(dataInventory => dataInventory.StatusID, (System.Collections.IEnumerable)ViewData["status"], "StatusID", "status")

.Title("Status").Width(250);

columns.ForeignKey(dataInventory => dataInventory.AssignedID, (System.Collections.IEnumerable)ViewData["officers"], "PersonID", "FullName")

.Title("Assigned To").Width(250);

columns.Bound(dataInventory => dataInventory.Description).Title("Description").Hidden(true);

//columns.Bound(dataInventory => dataInventory.StatusID).Title("status").Hidden(true);

columns.ForeignKey(dataInventory => dataInventory.AssignedBy, (System.Collections.IEnumerable)ViewData["officers"], "PersonID", "FullName")

.Title("Assigned By").Width(250);

columns.Bound(dataInventory => dataInventory.AssignedDate).Title("Date Assigned").Format("{0:g}");

columns.Bound(dataInventory => dataInventory.ItemID).Hidden(true);

columns.Bound(dataInventory => dataInventory.VehicleID).Title("VehicleID").Width(150).Hidden(true);

columns.Bound(dataInventory => dataInventory.memorycard).Title("memorycard").Hidden(true);

columns.Bound(dataInventory => dataInventory.year).Title("year").Hidden(true);

//columns.Bound(dataInventory => dataInventory.status).Title("status").Hidden(true);

columns.Bound(dataInventory => dataInventory.make).Title("Make").Hidden(true);

columns.Bound(dataInventory => dataInventory.model).Title("Model").Hidden(true);

columns.Bound(dataInventory => dataInventory.color).Title("Color").Hidden(true);

columns.Bound(dataInventory => dataInventory.tag).Title("Tag").Hidden(true);

columns.Bound(dataInventory => dataInventory.signon).Title("Signon").Hidden(true);

columns.Bound(dataInventory => dataInventory.signoff).Title("Signoff").Hidden(true);

columns.Bound(dataInventory => dataInventory.Ten84).Title("10-84").Format("{0:g}").Hidden(true);

columns.Bound(dataInventory => dataInventory.lastupdated).Hidden(true);

columns.Bound(dataInventory => dataInventory.lastupdatedby).Title("Updated By:").Hidden(true);

//columns.Bound(dataInventory => dataInventory.AssignedID).Title("OfficerID").Hidden(true);

columns.Bound(dataInventory => dataInventory.remarks).Title("Remarks").Hidden(true);

columns.Bound(dataInventory => dataInventory.PurchaseDate).Title("Purchase Date").Format("{0:MM/dd/yyyy}").Hidden(true);

columns.Bound(dataInventory => dataInventory.InServiceDate).Title("In Service Date").Format("{0:MM/dd/yyyy}").Hidden(true);

columns.Bound(dataInventory => dataInventory.caliber).Hidden(true);

columns.Command(commands =>

{

commands.Edit();

commands.Destroy();

}).Title("Commands").Width(180);

})

.ToolBar(toolbar =>

{

toolbar.Create();

// toolbar.Save();

})

.Events(e => e.SaveChanges("onSaveChanges"))

//.Events(events => events.Save("onSave"))

//.Events(events => events.Edit("onEdit"))

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditInventory"))

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.Error("onError")) // Handle the "error" event (errors set in controller)

.Batch(false)

.ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side

.Model(model =>

{

model.Id(dataInventory => dataInventory.ItemID);

//model.Field(dataDestruction => dataDestruction.CaseID).Editable(false);

})

.Create(create => create.Action("Single_Create", "Inventory"))

.Read(read => read.Action("Item_Read", "Inventory"))

.Update(update => update.Action("Single_Update", "Inventory"))

.Destroy(destroy => destroy.Action("Item_Destroy", "Inventory"))

)

.AutoBind(true)

.Pageable(page => page.Enabled(true).PageSizes(new[] { 10, 20, 30, 40 }))

.Sortable()

.Navigatable()

//.Scrollable(scrolling => scrolling.Enabled(false))

.Events(e => e.Change("onChange"))

//.Filterable()

//.Scrollable(scrolling => scrolling.Enabled(true))

//.Scrollable(s => s.Height("auto"))

.HtmlAttributes(new {style = "width:960px;"})

.Filterable()

)

Grid

answered on 23 Sep 2014

1 answer

113 views

[Solved] Not rendering sub-items when full source is loaded via ajax

I try with this code but it is not rendering childs:

<body>

<div id="main">

<div data-role="treeview" data-bind="source: test" data-load-on-demand="true"></div>

</div>

<script>

$(document).ready(function()

{

var MVVM = kendo.observable(

{

test: new kendo.data.HierarchicalDataSource(

{

transport:

{

read:

{

url: "GetTreeViewData.php"

}

},

}),

});

kendo.bind($('#main'), MVVM);

});

</script>

</body>

My GetTreeViewData is:

<?php

$result = [];

$item = new stdClass();

$item->text = "level 1.1";

$result[] = $item;

$item = new stdClass();

$item->text = "level 1.2";

$item->items = [];

$subitem = new stdClass();

$subitem->text = "level 2.1";

$item->items[] = $subitem;

$subitem = new stdClass();

$subitem->text = "level 2.2";

$item->items[] = $subitem;

$item = new stdClass();

$item->text = "level 1.3";

$result[] = $item;

header('Content-type: application/json;');

echo json_encode($result);

?>

I also try to experiments with hasChildren, children, loadOnDemand properties, without success.
What I am doing wrong?

TreeView

answered on 23 Sep 2014

3 answers

381 views

Dynamic Ajax call, get tooltip to fix it's position

This has been asked before more or less

http://www.telerik.com/forums/tooltip-opens-in-the-wrong-place-when-the-marker-is-clicked-and-then-corrects-itself-when-the-marker-is-clicked-a-second-time

I have a series of Ajax calls for loading tooltips, the size will vary per call.

I get the behaviour described in the other thread. The workaround of setting the width/height will probably work

What would be better would be if I could initially set the tooltip to invisible, hide it, get it to fix it's position and then show it. Is this possible? It obviously knows how to fix itself once the data is loaded

thanks

ToolTip

answered on 23 Sep 2014

1 answer

132 views

[Solved] Wildcard datasource refresh?

I have a page where a user can select multiple listviews to view. At certain points, i want to refresh all of these listviews. I'm trying to refresh them using a wildcard statement, but:
<code>
$("[id^=lstMss]").data("kendoListView").dataSource.read();
</code>
only refreshes the first listview, none of the other ones (all of my listviews start with the id of 'lstMss'). Is there a better, easier way to do this?

Data Source

answered on 23 Sep 2014

8 answers

955 views

DatePicker format angular

Hi,
I am having some trouble formatting dates that come from a web api as MM/dd/yyyy. When using this format I am not able to bind the date, however other formats such as yyyy-MM-dd work just fine.

Here is my view:
<input name="enddate" data-kendo-date-picker data-k-format="'MM/dd/yyyy'" data-ng-model="trip.EndDate" data-k-ng-model="trip.EndDate" required>

When the promise returns from the web api if I set the date to the exact date that gets returned the above format works: i.e: $scope.trip.EndDate = "2015-07-11T00:00:00"

Any ideas what I might be missing?

Thanks,

DatePicker

answered on 23 Sep 2014

1 answer

404 views

Kendo Grid Transport with traditional = true param

I've been trying to figure out how to send a multi-select list back to my MVC controller, what I ended up having to do was pass the traditional: true parameter into the transport.read element. However, this no longer passes the sort parameter. I have re-worked an example here:

http://dojo.telerik.com/aPAQ/2

Note that I have commented out type: 'odata', because I am not using odata (no, the grid does NOT load, but I am looking at the request that is built). The key here is to look at the request that is sent in firebug or some other dev util (chrome dev tools). Here is the sort parameter now:

take:20
skip:0
page:1
pageSize:20
sort:[object Object]

Is there a way around this?

Grid

answered on 23 Sep 2014

1 answer

526 views

Angular template inside kendo directive markup

Hi,

I'd like to use the Kendo drop down with an Angular template inside the markup or some referenced file.
In my case it is used like this at the moment:

<select ...

k-template="'<b>#: displayName #</b><br/>#: name #'"

k-value-template="'#: displayName #'">

</select>

But I would like to use it the "angular way", like:

<select ...

k-template="'<b>{{dataItem.displayName}}</b><br/>{{dataItem.name}}'"

k-value-template="'{{dataItem.displayName}}'">

</select>

That way, the drop down items, defined in the template, only appear, if I declare the template manually inside some "k-options". I've already experimented with the "ng-non-bindable" attribute, so that the angular expression can be interpreted later, but without success.
Some advice would be helpful.

I'm also looking for a solution to reference some template url. Can this be done natively with Angular or Kendo?

Kind Regards
Thomas

DropDownList

answered on 23 Sep 2014

2 answers

318 views

[Solved] Week view show only all day events

Hi Guys!

I have a scenario where i need to display only all day events in scheduler week view(vertical grouped) and hide all time specific event slots. From the scheduler configuration is not clear to me how to go about it, is there any standard way to do it?

Cheers!

Scheduler

answered on 23 Sep 2014

5 answers

294 views

ListView in MVVM mobile application with pull to refresh event.

Hi,

I've successfully managed to built an MVVM mobile application getting its data from a REST service and load a listview mobile control. However I don't seem to be able to refresh the data using the "pull to refresh" event.of the listview control.
What I'd like to know is, given the code below, how I can bind to the "pull to refresh" event from a view-model and make a call to the model entity.

Thanks for your help.

Best regards,

Gilles Kern

here is my code:

Main.js:

01.// Variables

02.var SPSite = "https://cerfich.sharepoint.com";

03.

04.// Wait for Icenium to load

05.document.addEventListener("deviceready", onDeviceReady, false);

06.

07.function onDeviceReady() {

08.

09. // Authenticate against SharePoint server

10. SPOAuth(SPSite);

11.

12. // Initialize ListView

13. $("#listview").kendoMobileListView({

14. pullToRefresh: true

15. });

16.

17. // apply the bindings

18. kendo.bind($("#ListSPItems"), VMListSPItems);

19.}

View-Model:

01.var VMListSPItems = kendo.observable({

02.

03. // Hold SharePoint list items

04. GetCustomers: function(e)

05. {

06. var Customers = GetAllCustomers(SPSite);

07. Customers.success(function(data){

08. // Get Value from SharePoint

09. var AllCustomers = null;

10. AllCustomers = data.d.results;

11.

12. // Update data

13. VMListSPItems.set("GetCustomers", AllCustomers);

14. });

15. },

16.});

View:

01.<div data-role="view" id="ListSPItems" data-title="Customers List" data-layout="mobile-tabstrip">

02. <div id="CustomersError" />

03.

04. <ul id="listview" data-bind="source: GetCustomers" data-template="itemTemplate"></ul>

05.

06. <script id="itemTemplate" type="text/x-kendo-template">

07. <li><a> ${data.Title} </a></li>

08. </script>

09. </div>

Model:

01.function GetAllCustomers(siteurl)

02.{

03. return $.ajax({

04. url: siteurl + "/_api/lists/getByTitle('Customers')/items",

05. type: "GET",

06. headers: {

07. "ACCEPT": "application/json;odata=verbose"

08. },

09. //success: function (data)

10. //{

11. // //array = data.d.results;

12. // Customers = data.d.results;

13. //},

14. error: function(xhr, ajaxOptions, thrownError){

15. //var message = xhr.responseText.find("message").text();

16. var message = xhr.responseText;

17. $("#CustomersError").html(message);

18. }

19. });

20.}

ListView (Mobile)

answered on 22 Sep 2014

1 answer

118 views

[Solved] default currency validator broken with step:0.01

I have modified the kendo grid popup editor example to have min:0.01 and step:0.01 as one penny is the minimum currency unit. However, this causes the browsers based price validation to fail when you enter '9.88'. '9.87' works fine, but it really doesn't like '9.88' - it displays 'Unit price is invalid'.

UnitPrice: { type: "number", validation: { required: true, min: 0.01, step:0.01} },

I have created a repro case here:

http://dojo.telerik.com/aTaRE

Just edit any of the entries in the grid (in the pop-up editor) and change the Unit Price to 9.88. This is in the chrome browser if it makes a difference.

Cheers, Paul.

Grid

answered on 22 Sep 2014