Telerik Forums
Kendo UI for jQuery Forum
2 answers
644 views

I have two comboboxes on the same app view. One works properly and the other one doesn't.

 The issue is that the workOrderType combo isn't showing the selected/existing value that's already in the object source. The selections are in the dropdown/combo correctly, but when it loads it shows only the placeholder.

Below is my relevant code. I'm omitting the part that loads the original item. When I do a  pause on the javascript, I can see that detail.WorkOrderTypeId does have a correct value. Any ideas what might be causing this?

 

$scope.statusComboOptions = {
    dataSource: new kendo.data.DataSource({
        data: []
    }),
    placeholder: "Select a Status",
    filter: "startswith",
    dataTextField: "Description",
    dataValueField: "Id"
}
 
$scope.workOrderTypeComboOptions = {
    dataSource: new kendo.data.DataSource({
        data: []
    }),
    placeholder: "Select a Work Order Type",
    filter: "startswith",
    dataTextField: "Description",
    dataValueField: "Id"
}
 
var asyncPromises = [];
 
asyncPromises.push(workOrdersService.getStatuses().then(function (data) {
    $scope.statusComboOptions.dataSource.data(data);
}));
 
asyncPromises.push(workOrdersService.getWorkOrderTypes().then(function (data) {
    $scope.workOrderTypeComboOptions.dataSource.data(data);
}));
 
$q.all(asyncPromises).then(function () {
    $scope.asyncResolved = true;
});
 

 

<div class="control-group">
    <label>Status</label>
    <select kendo-combo-box
            k-options="statusComboOptions"
            ng-model="detail.StatusId"
            k-ng-delay="asyncResolved"></select>
</div>
<div class="control-group">
    <label>Work Order Type</label>
    <select kendo-combo-box
            k-options="workOrderTypeComboOptions"
            ng-model="detail.WorKOrderTypeId"
            k-ng-delay="asyncResolved"></select>
</div>

Alex
Top achievements
Rank 1
 answered on 23 Jan 2018
7 answers
661 views
Hi,

i have a Grid with 300px width, it has three columns,

first column contains a numeric data type and its width is set to 40

when showing the data is appears correctly, but when inline editing mode, the NumericTextBox is showing too big which causes other elements to overflow, how can i control the width of this NumericTextBox

Screenshots attached
Franklin
Top achievements
Rank 1
 answered on 23 Jan 2018
1 answer
306 views

I have a tree with 5 levels => L1, L2, L3, L4 & L5, the tree implements lazy loading. Hence only L1 level nodes are currently in the datasource.

I accept an input from the user that has 5 Id's. Each of which corresponds to one level of the tree. EX : Id1 => L1, Id2 => L2 and so on...
Then,

        var treeview = $("#treeView").data("kendoTreeView");
        var dataSource = treeview.dataSource;
        var data = dataSource.get(Id1);
        var levelonenode = treeview.findByUid(data.uid);
        // Logic to append the child nodes of levelonenode (with one of the child nodes having id =Id2)

//now when i check the debugger, the append operation is complete but the dataSource shows that levelonenode doesn't have any children yet.

       var leveltwodata = dataSource.get(Id2);
//does not exist

I suspect that the children have been appended but havent yet been rendered on the UI so the dataSource hasnt been refreshed.

Is there a workaround for this?

Any help would be appreciated!

Thanks,
Niranjan.


Dimitar
Telerik team
 answered on 22 Jan 2018
4 answers
548 views

Hello

I'm displaying a time in an input field with maskedTextbox on it. I allow the user to specify his preferred time format:

hh:mm:ss or hh.mm.ss. or hh/mm/ss       (hours:minutes:seconds)

It works fine working with the separator : and / but not with . (dot). Here is a working example showing you that the dot is overwritten by a coma:

<!DOCTYPE html>
<html>
<head>
    <title></title>
 
    <!-- This works fine
    -->
</head>
 
<script type="text/javascript">
    $(document).ready(function() {
        kendo.culture("de-DE"); // Same problem with 'de-AT'
        // kendo.culture("de-CH"); // This works fine
 
        $(".maskTimer").kendoMaskedTextBox({
            mask: "h0.t0.t0",
            rules: {h: /[0-2]/, t: /[0-5]/}
        });
    });
</script>
 
<body>
 
    <div>
        <input id="time" class="maskTimer" style="width: 100px;" value="120000">
    </div>
 
</body>
</html>

 

After starting the script you see the time this way: 12,00,00 (coma instead of dot as defined in kendoMaskedTextBox -> mask). If you use colon (:) or slash (/) it works fine as well. It also works using f.e. the culture 'de-CH' but not for 'de-AT' (same behaviour as 'de-DE'). I have no clue about this behaviour for other countries. I have no idea why/how the coma overwrites my defined time format. Maybe I'm doing something simple wrong.

Another weird behaviour: If you delete the time in the input field you can see the correct mask: __.__.__ but when you start entering a new time the dot will be replaced by a coma as soon as you pass the first dot (by typing). All weird to me. As far as I know Germany (de-DE) and Austria (de-AT) use : or . as time separator and not a coma, so this can't be any default value for those countries. Can you explain me this or even better what I did wrong?

Regards

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 22 Jan 2018
5 answers
330 views

Hi

I downloaded the last version of KendoUI

I include kendo.all.min.js and styles. I'm planing to use kendo directives as I'm working with Angularjs (1.3.16 as kendo is not ready for 1.4). When I load my page I got this error :

Uncaught Error: Invalid template:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dcmitype="http://purl.org/dc/dcmitype/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><dc:creator>${creator}</dc:creator><cp:lastModifiedBy>${lastModifiedBy}</cp:lastModifiedBy><dcterms:created xsi:type="dcterms:W3CDTF">${created}</dcterms:created><dcterms:modified xsi:type="dcterms:W3CDTF">${modified}</dcterms:modified></cp:coreProperties>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\r\n<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dcmitype="http://purl.org/dc/dcmitype/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><dc:creator>'+($kendoHtmlEncode(creator))+'</dc:creator><cp:lastModifiedBy>'+($kendoHtmlEncode(lastModifiedBy))+'</cp:lastModifiedBy><dcterms:created xsi:type="dcterms:W3CDTF">'+($kendoHtmlEncode(created))+'</dcterms:created><dcterms:modified xsi:type="dcterms:W3CDTF">'+($kendoHtmlEncode(modified))+'</dcterms:modified></cp:coreProperties>';}return $kendoOutput;'

 

It is the very first time I saw this kind of error, Any advise on this ?

 

Thanks !

 

 

Veselin Tsvetanov
Telerik team
 answered on 22 Jan 2018
2 answers
923 views

Say I want to have a column within my grid that displays a checkbox as in this example.  This grid is a child of a parent grid.
When I click the checkbox, I want to call a javascript function that not only updates a few fields of the row that the checkbox is on, but the parent row as well.

Using Kendo UI MVC 2015 (yes I know its dated)

So, looking at this example:
https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids

How then, could I call a javascript function that passes a reference to the row that contains the checkbox, which then is used to get a reference to the parent of that row?  If I can get a reference to the row of the checkbox, then I can do something like this:

var row = e.Row.Parent as GridViewRowInfo;
if (row != null)
{
    row.Cells["Cost"].Value = (int)row.Cells["Cost"].Value + newChildCost - oldChildCost;
}

 

Stefan
Telerik team
 answered on 22 Jan 2018
15 answers
728 views

Is there a nice clean solution for styling columns that may or may not be editable? So the user can tell without clicking in the cell if they can edit it.

I know its easy enough to add a css class to columns if you know they are always going to be editable or not. But in my case the editable fields will be different based on other values of the record and/or permissions of the user.

Thanks

Stefan
Telerik team
 answered on 22 Jan 2018
1 answer
799 views

I have the base functionality of D&D working just fine. What I need to know is how to bind the behavior to dynamically created elements. I've found no reference in the documentation to allow the draggable event to bubble up to the newly created element. I don't want to have to unbind and rebind the kendoDraggable every time I create an element. Here's an example of what I'm trying to do:

https://dojo.telerik.com/OxUJE

 

Thanks

 

 

Preslav
Telerik team
 answered on 19 Jan 2018
1 answer
74 views

I have a scheduler that is set to a month view and would like to implement the kendo-charts in each of the dates. Does anyone have any suggestions on how I should approach this or is this not possible? Any help would be appreciated.

 

Inside html:

<kendo-scheduler id="scheduler k-options="monthCtrl.scheduler"/>

Inside controller:

this.schedulerOptions = {
                max: new Date(),
                editable: false,
                height: 1000,
                views: [
                    "month"
                ],
};

Veselin Tsvetanov
Telerik team
 answered on 19 Jan 2018
10 answers
1.6K+ views
Hello Telerik team,
I am evaluating Kendo Web. I have a requirement to template the pager buttons look and feel.  I would like to change the Grid page buttons from circle to squares and also make them much bigger for touch friendly.

Where do I look to modify them?  Is this in the CSS or , templating concept?

Thanks,
Peruri
Dimo
Telerik team
 answered on 19 Jan 2018
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)
Filter
SPA
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
ContextMenu
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
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?