Questions on Kendo UI for jQuery Forum

2 answers

188 views

[Solved] kendo.ui.UploadSelectEvent file size is null in IE8

Im using kendoUpload control to upload the file. Everything works fine in IE10, but as soon as I switch to IE8 mode the uploaded file size property remains null.
is it by design?

$importFiles.kendoUpload({

async: {

autoUpload: false,

saveUrl: saveUrl,

removeUrl: removeUrl

},

multiple: false,

showFileList: true,

select: (e: kendo.ui.UploadSelectEvent): void => {

$selectMsg.show();

},

upload: (e: kendo.ui.UploadUploadEvent): void => {

var file: any = e.files[0];

// file.size is null in IE8

if ((file.size != null) && (((file.size / 1024) / 1024) > allowedFileSizeInMB)) {

showErrorModal('The selected file is too large.');

e.preventDefault();

$selectMsg.hide();

}

});

Upload

answered on 03 Sep 2014

1 answer

91 views

Loading new views in the main-pane when clicking a link in the left frame

Hello,

im new in mobile HTML5 development. Im trying to use the split view. When now a link is clicked on the left pane, I just want to load a new view in the left pane and additional load another view on the main pane. How can I realize that?

SplitView

answered on 03 Sep 2014

3 answers

344 views

How do I trigger a splitter resize when ng-show causes splitter to become visible after window resize?

I have a splitter that I need to hide or show based on certain conditions. I'm using angular's ng-show to hide and show the div containing the splitter.

If the window is resized while the splitter div is hidden, showing the div results in a 0 width first column.

I have seen similar issues on the forums that suggest triggering a resize on the splitter, but it doesn't work the way I'm trying to do it. I suspect that the resize is being triggered before the splitter is actually shown, but I'm not sure where else to put the resize trigger.

Sample code reproducing the issue is below.

Thanks!

<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script>

</script>


</head>
<body>

<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl" style="width: 100%;">

<h1>How can I trigger a splitter resize when ng-show makes the div visible?</h1>
<h3>Calling $scope.mainSplitter.trigger("resize") when setting the visibility boolean doesn't work...</h3>
<h4>
<ol>
<li>Click the button to hide the splitter.</li>
<li>Resize the window.</li>
<li>Click the button to show the splitter. First column has zero width.</li>
<li>Resize the window again and observe the splitter resize.</li>
</ol>
</h4>
<button ng-click="toggleVisible()">{{buttonText}}</button>
<div class="box-col" style="width: 100%;" ng-show="isSplitterVisible">
<div kendo-splitter="mainSplitter"
k-panes="[ { size: '100px' }, null]"
k-orientation="horizontal">
<div>
<p>Pane 1</p>
</div>
<div>
<p>Pane 2</p>
</div>
</div>
</div>
</div>
</div>

<script>
angular.module("KendoDemos", [ "kendo.directives" ]);

function MyCtrl($scope) {
$scope.isSplitterVisible = true;
$scope.buttonText = "Hide Splitter";

$scope.toggleVisible = function()
{
$scope.isSplitterVisible = !$scope.isSplitterVisible;
if ($scope.isSplitterVisible){
// Splitter is visible. Try to trigger a resize
$scope.mainSplitter.trigger("resize");

// Change the button text
$scope.buttonText = "Hide Splitter";
}
else{
// Change the button text
$scope.buttonText = "Show Splitter";
}
}
}
</script>

</body>
</html>

Splitter

answered on 03 Sep 2014

27 answers

982 views

Phone vs. Tablet

This might be a higher level question than just the SplitView but since it is the primary situation I will discuss I thought to put the question here.

With the 2012 Kendo Summer release, new tablet level widgets were introduced.

Does this mean that kendo is strategically divided into the following?

Web vs. Mobile (Phone/Tablet)

i.e. do I build mobile applications with kendo mobile like normal and just "spice" the tablet level widgets on the screen when appropriate and let kendo handle the rendering of these tablet level widgets on mobile devices?

Or is it reccommended to built a tablet specific view of your mobile application?

In addition, if I use the splitview widget, how will it react on the mobile device? Just not display and treat the panes like normal mobile panes?

SplitView

answered on 02 Sep 2014

3 answers

590 views

In MVC View, I need to pass value from within the model to the controller from a KendoUI Widget

The code below works. The controller receives the value "Test Value" when the Upload widget is executed.However, I have a key value from the model that is displayed within this view that I need to send instead of the hardcoded text.

Note. This is a custom template within a grid popup editor.

Widget

ViewBag.Title = "Test Value"
@(Html.Kendo().Upload() .Name("files") .TemplateId("fileTemplate") .Async (a => a .Save("Save", "OpenRecords"), new { MyRequest = ViewBag.Title }) .AutoUpload(true)) )

Controller

public ActionResult Save(IEnumerable<HttpPostedFileBase> files, string MyRequest)
{
// The Name of the Upload component is "files"

if (files != null)
{
foreach (var file in files)
{
// Some browsers send file names with full path.
// We are only interested in the file name.

var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
// The files are not actually saved in this demo
file.SaveAs(physicalPath);
ViewBag.FileName = fileName;
//return Content(physicalPath);

}

}

// Return an empty string to signify success
return Content("");

}

Upload

answered on 02 Sep 2014

2 answers

463 views

Change event fired twice on ComboBox using AngularJS

I'm using Kendo UI v2014.2.716 with AngularJS v1.2.18 and have a ComboBox declared like below:

<select kendo-combo-box k-options="vm.manufacturerOptions" ng-model="vm.make.ManufacturerId"></select>

My options object sets the dataSource, dataTextField, and dataValueField, while the form gets the make object via the controller's resolve property. Everything appears to work as expected and I can see the ComboBox value change appropriately if I bind a separate element to the vm.make.ManufacturerId property. The part that is confusing me, though, is that when I tab off or click off the select element the change event is fired again and the value and text both reflect the text of the ComboBox, which obviously is not what I'd expect. I've tried reproducing this in the Dojo but have been unable to, but my code isn't very complex and I can't spot what could be causing the second change event to fire when the select element loses focus.

I was hoping someone might be able to think of what could be causing the second change event to fire.

ComboBox

answered on 02 Sep 2014

1 answer

1.7K+ views

[Solved] Binding string date value to model in angular kendo date picker

I have an api which return the date in this format "014-08-26T15:10:45.402Z" i am using angular kendo ui .The problem i am facing is the date is not getting bound to the kendo date picker.Could someone help me out . The result is same whether I use ng-model or k-ng-model. Do we need to convert the data in the model to date object? OR there is a much simpler way.
<input kendo-date-picker ng-model="emp.datestart" k-format="MM/dd/yyyy" />

http://dojo.telerik.com/uGIq

DatePicker

answered on 02 Sep 2014

6 answers

3.7K+ views

[Solved] How to determine if Window is open

I need to check if the Window is already open, since calling open again on a centered window that has been dragged re-centers it. What's te best way to determine if the window is already open?

Window

answered on 02 Sep 2014

5 answers

537 views

Custom edit form with fields not displayed in grid

Hello,

I am writing an order-entry app using AngularJS and Kendo UI Grid. I am new to both and am looking for some guidance on how best to approach the scenario below.

The order line grid is populated with Json data from a server (ASP.NET Web API). For example, for order # 3:

[

   {

      "OrderId":3,

      "Line":1,

      "ItemId":"0023",

      "Description":"Alcaline substrat-234",

      "Class":"A34",

      "Manufacturer":"AA123",

      "PartNo":"12347354",

      "Qty":2,

      "ExtCost":12.72,

      "ExtPrice":19.10,

      "ExtTax":1.80,

      "Comment":"Some comment... Could be long...",

      Serials: [

        "AAAA1234",

        "BBBB2222"

        ]

   },

   {

      "OrderId":3,

      "Line":2,

      "ItemId":"0056",

      "Description":"Bee pulsating epox",

      "Class":"34",

      "Manufacturer":"ZB83",

      "PartNo":"52234623",

      "Qty":1,

      "ExtCost":252.31,

      "ExtPrice":290.11,

      "ExtTax":20.10,

      "Comment":"Some other comment about this line...",

      Serials: [

        "AAAA1234",

        "BBBB2222"

        ]

   }

]

In the grid, I only display a few of the fields:
ItemNo, Description, Manufacturer, PartNo, Qty, ExtPrice

For adding and editing records, a custom pop-up form should display additional fields:

ItemNo (R/O):
Description (R/O):
Manufacturer (R/O):
PartNo (R/O):
Comment (not in grid):
Qty:
Price:
Serial Numbers (not in grid): (button which opens up S/N form)

There are two approaches that come to mind:
1) Do an additional json call to retrieve the edit-form fields (for editing) + another for saving the edits / new records. I would also reduce the fields in the json above to only include fields shown in the grid.
2) Use some kind of local caching to reduce the server round-trips. Perhaps Breeze (but I have never used it)? Need something simple, robust and AngularJS friendly.
3) ...?

Recommendations / advice would be appreciated!

A sample / JsFiddle or similar that shows how to use a custom edit form (preferably with some extra field [not in the grid]) with Kendo UI grid and AngularJs would also be very helpful.

Thanks,
Lars

Grid

answered on 02 Sep 2014

1 answer

769 views

Custom Create/Edit Popup for Scheduler

Hi,

we´re trying to start with kendo scheduler, but have some questions with customizing the create/edit popup form when double-clicking on the scheduler for creating an new entry.

We need to display a cascading dropdownlist in this form to select a value in order based on the first/second selection from a remote datasource.
1:1 like in your demo/example, examples/dropdownlist/cascadingdropdownlist.html

But I don´t know if it´s possible with kendo to customize like this? I made a few tests but had no success.

Can you help me with this? Maybe you have some examples codes for me?

Thank you,
Christoph

Scheduler

answered on 02 Sep 2014