Telerik Forums
Kendo UI for jQuery Forum
2 answers
93 views
I have a grid that has grouping on a field called Group.  Group can be one of 3 values (Required, Optional or PickOne).  I want to have a row template that does different things depending on which group the row is in.

If the row is a Required one then I want it to have a disabled, checked checkbox, if it is optional I want it enable, unchecked checkbox and if it is a pickone then I want it to be a radio button. 

I tried the template below but it threw a invalid template exception.  It was working when I had just the required group (the second <td> that has a select control in it works) but broke when I added the logic to change the first <td> depending on Group.


    <script id="workflowTasksTemplate" type="text/x-kendo-template">
        <tr class="row">
            # if(data.Group == 'Required') { #
                <td><input type="checkbox" disabled='true' checked='true'></td>
            # else if (data.Group == 'Optional') { #
                <td><input type="checkbox" disabled='false' checked='false'></td>
            # else{ #
                <td><input type="radio" id='pickone'></td>
            # } #
            <td>
                <span class='v-workflowtask-meta'>#=task #</span>
            </td>
            <td>
                <select onchange="selectUserChanged(#=data.taskDefId#, this.value)">
                    <option value='#=data.user#'></option>
                    # if(data.Users != null) { #
                    # for (var i=0;i<data.Users.length;i++){ #
                        <option value='#=data.Users[i].UserName#'>#=data.Users[i].UserName#</option>
                    # } } #
                </select>
            </td>
        </tr>
    </script>
Shawn
Top achievements
Rank 2
 answered on 18 Dec 2013
4 answers
279 views
I am trying to provide a hyperlink that will kick off the default email client on the mobile device.  The problem is that it takes 10, 20 or even more clicks before it finally opens the email client.  This is happening on both iOS and Android.  In the browser on a PC it works as expected.

1 thing I noticed is that if I swipe somewhere on the screen and then attempt to click the link it works (more times than not).

  • What could be going on here?  
  • Does the link need some type of initialization?
  • In Android the corners are not rounded on the switch when I force the "ios" styling.  Is there a workaround for this?

<!DOCTYPE html>
<html>
<head runat="server">
  <meta charset="UTF-8">
  <title></title>
   
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
    
</head>
<body>
     <div data-role="view" id="orderhistory" data-layout="default" data-before-show="redirectBack" class="hideload">
      <ul data-role="listview" data-style="inset" data-type="group" >
        <li>
          <ul class="ordULHist">
            <li>
              <a id="ml" data-rel="external" data-role="listview-link" href="mailto:comments@yahoo.com">comments@yahoo.com</a>
            <li>
            <li>not rounded in android
            <input id="chkremember" data-role="switch" />
            </li>
          </ul>
        </li>
      </ul>
    </div>
 
  <script type="text/javascript">
    var app = new kendo.mobile.Application($(document.body), {
      platform: {
        device: "ipad",       // Mobile device, can be "ipad", "iphone", "ipod", "android" "fire", "blackberry", "meego"
        name: "ios",          // Mobile OS, can be "ios", "android", "blackberry", "meego"
        ios: true,            // Mobile OS name as a flag
        majorVersion: 5,      // Major OS version
        minorVersion: "0.0",  // Minor OS versions
        flatVersion: "500",   // Flat OS version for easier comparison
        appMode: false,       // Whether running in browser or in AppMode/PhoneGap/Titanium.
        tablet: "ipad"        // If a tablet - tablet name or false for a phone.
      }
    });
  </script>
</body>
</html>
 
Sam
Top achievements
Rank 1
 answered on 18 Dec 2013
3 answers
69 views
Does the panel bar have any callback method to indicate that the expand/collapse animation has completed? 
Jacques
Top achievements
Rank 2
 answered on 18 Dec 2013
2 answers
430 views
I'm trying to use the same DropDownList widget multiple times within a loop in form for however many fleets a manager is assigned as shown  in the attachment. The first instance of the DropDownList displays correctly. After that it displays as a text box with the value, not the text. And no dropdown.

Here's the code I used for the widget.
        @(Html.Kendo().DropDownListFor(m => m.ManagerViewModel.ManagerId)
                .Name("ManagerDropDownList")
                .DataTextField("ManagerNameLast")
                .DataValueField("ManagerId")
                .HtmlAttributes(new { style = "width: 200px;" })
                .BindTo(Model.MgrsDropdownViewModel)
                )

And here is the page source for the first and second instances. The complete list of managers is shown for both instances. But the data-val properties are missing in the second instance. How do I get the data-val to show for every instance?

<input data-val="true" data-val-number="The&#32;field&#32;ManagerId&#32;must&#32;be&#32;a&#32;number." data-val-required="The&#32;ManagerId&#32;field&#32;is&#32;
required." id="ManagerDropDownList" name="ManagerDropDownList" style="width:&#32;200px;" type="text" value="80" /><script>
jQuery(function(){jQuery("#ManagerDropDownList").kendoDropDownList({"dataSource":[{"ManagerId":280,"ManagerNameLast":"AXXXXXXO,  JOHN           "},

<input id="ManagerDropDownList" name="ManagerDropDownList" style="width:&#32;200px;" type="text" value="80" /><script>
jQuery(function(){jQuery("#ManagerDropDownList").kendoDropDownList({"dataSource":[{"ManagerId":280,"ManagerNameLast":"AXXXXXXO            , JOHN           "},
 




     
William
Top achievements
Rank 1
 answered on 18 Dec 2013
1 answer
260 views
I am building a stacked column chart.  I don't know the number of series going into it so I am using a foreach to build each series.  I want a category label for each of the series.  Typically for something like this I would use the categoryexpression but can't figure out how to do it with the way I am building.  Any help would be appreciated.

@(Html.Kendo().Chart()
    .Name("chart")
    .Theme("flat")
    .Title("Issues Waterfall")
    .DataSource(ds => ds
        .ServerOperation(false)
    )
    .Series(series =>
    {
        series.Column(new double[] { 100 }).Name("Total").Color("Blue").Stack("Total");
 
        foreach (var resp in Model.listResponsibleDowntime)
        {
            series.Column(new double?[] { resp.percent_pad }).Name(resp.resp_name).Color("White").Opacity(0).Labels(false).Tooltip(false).Stack(resp.resp_name);
            series.Column(new double?[] { resp.percent_downtime }).Name(resp.resp_name).Color(resp.resp_color).Labels(lables => lables.Format("{0:n2}%").Visible(true).Position(ChartBarLabelsPosition.OutsideEnd)).Stack(resp.resp_name);
        }
 
        series.Column(new double?[] { Model.oee }).Name("Actual").Color("Green").Stack("Actual").Labels(lables => lables.Format("{0:n2}%").Visible(true).Position(ChartBarLabelsPosition.OutsideEnd));
         
    })
    .CategoryAxis(axis => axis
        .MajorGridLines(lines => lines.Visible(false))
        .Labels(model => model
            .Rotation(0)
            .Visible(true)
        )
        //.Categories(Model.listCategories)
    )
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
        .Margin(20, 50, 20, 50)
        .Visible(false)
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Min(0)
        .Max(100)
        .Labels(labels => labels.Format("{0:n0}%"))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name #: #= kendo.format('{0:n2}', value) #")
    )
)
Hristo Germanov
Telerik team
 answered on 18 Dec 2013
2 answers
237 views
Hi,

I am trying to add a NumericTextBox in GridToolbar. The input control is converted to NumericTextBox but the Up/Down spinner buttons layout is disturbed.

Please see this jsfiddle for demo:

http://jsfiddle.net/E3TNH/1/

Regards
Hammad
Top achievements
Rank 1
 answered on 18 Dec 2013
1 answer
82 views
Hi,


we encountered a very strange issue. We update inner nodes of a tree view using loaded(false) and load() as suggested in another thread. However, after loading the nodes, the uids of the datasource and those present in the HTML does not match any more for the reloaded items.  The method treeView.findByUid(uid) does not find any item and the requested uid is in fact not present in the HTML. Is there any chance to update not only the model but also the HTML or to use an value present on the items that are loaded from server as uid and thus to have stables uids? 


Best regars & many thanks


Daniel
Telerik team
 answered on 18 Dec 2013
1 answer
134 views
One requirement of the software we are building is that users have the ability to email reports they create.  So we have it set up so that a user can create a report based on certain data parameters and view a chart (using dataviz) of the data.  This all works but we now need the ability for them to export/email this report to themselves.  So my questions are...
1.) Is there a way I can take a "picture/snapshot" of a chart... Basically end up with a static jpeg or something of the chart.
2.) Whats the best way to achieve this email/export type of functionality with the Kendo Dataviz stuff?  Any suggestions would be much appreciated.

Jason
Iliana Dyankova
Telerik team
 answered on 18 Dec 2013
1 answer
90 views

1)  There is a great example of Kendo using bootstrap but is there a downloadable version.  i.e a sample project.
http://demos.kendoui.com/bootstrap/


2) On the demos page there are examples for HTML, ASP.NET MVC , Razer and ASPX etc which is great :)  but when you go to the full documentation there is just HTML samples.     :(

Kiril Nikolov
Telerik team
 answered on 18 Dec 2013
3 answers
125 views
Hello,
I am trying to use requireJS with kendo.custom js. I downloaded kendo combobox and validator as a custom package and created a custom js. I am trying to use requireJS on this kendo.custom. 

Code snippet that is NOT working

define(["jquery/jquery","kendo/kendo.custom.min"],function() {
return {
init:function(){
$("#vertical").kendoComboBox();
var combobox = $("#vertical").data("kendoComboBox");
}
};
});

JS Error: Uncaught TypeError: Object [object Object] has no method 'kendoComboBox'

But if I use kendo.all.min instead of kendo.custom.min, this code gets executed without any error. I think I am missing adding some dependency for combo box or probably using my requireJS in a wrong way. Can you please help.

Thanks and Regards,
Santhosh Rao M
Mihai
Telerik team
 answered on 18 Dec 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?