Telerik Forums
Kendo UI for jQuery Forum
3 answers
676 views
Hi,

I have a grid column with combobox editor template and I want to validate that column, i.e. if there's no item in combobox I want to get validation error. The column in grid's datasource has such structure.

ColumnID: { type: "number", validation: { required: true, min: 1 } },

and when the list of combobox editor template's values is empty the value of columnId is 0 and there's no validation errors.

Please help me to validate my grid column in above mentioned case in edit mode.

Regards,
G.A. 
Alexander Valchev
Telerik team
 answered on 05 Dec 2012
2 answers
1.0K+ views
Hi,

I fear there might be a really easy answer to this but I just can't figure it out.

I want to retrieve a data- attribute from a li after the onclick has fired. How do I do this?

<ul id="searchChoices" class="radioList" >
    <li class="selected" data-bind="click: keyTypeChanged" data-value="0">Option 1</li>
    <li data-bind="click: keyTypeChanged" data-value="1">Option 2</li>
    <li data-bind="click: keyTypeChanged" data-value="2">Option 3</li>
    <li data-bind="click: keyTypeChanged" data-value="3">Option 4</li>
</ul>
var searchViewModel = kendo.observable({
 
keyTypeChanged: function (e) {
        //debugger;
        alert($(this).attr("data-value"));
    }
  
});
Thanks in advance,
Anton
Alexander Valchev
Telerik team
 answered on 05 Dec 2012
4 answers
951 views
Hi guys,

In the following code sample, how can I replace the actionsheet, so via the click of the button, the showDetails function is
called directly and view changed (whilst taking the row context across so I can get the selected row's values out)?

 <div id="main" data-role="view" data-title="Schedule" data-model="viewModel" data-layout="default">
        <ul id="items" data-role="listview" data-template="diaryItem" data-style="inset" data-bind="source: dataSource" ></ul>       
        <ul id="actions" data-role="actionsheet">
            <li class="km-actionsheet-title">Select operation:</li>
            <li><a href="#" data-action="viewModel.showDetails">Details</a></li>
        </ul>
    </div>

<!--details view-->
    <div id="details" data-role="view" data-model="viewModel.selectedProduct" data-title="Details" data-layout="default">
        <ul id="info" data-role="listview" data-style="inset">
            <li>
               Company Name:
                <span data-bind="text: CompanyName"></span>
            </li>
       </ul>
   </div>

    <!--listview template-->
    <script id="productItem" type="text/x-kendo-template">
        <span>#= ProductName #</span>

// Clicking this button pops up the actionsheet, but I want to bypass it and call the showDetails function directly

        <a class="btnActions"
            data-role="button"
            data-rel="actionsheet"
            href="\\#actions"
            data-actionsheet-context="#= itemID #">Actions</a>
    </script>


    <script type="text/javascript">
        var app = new kendo.mobile.Application(),
            validator,
            viewModel = kendo.observable({
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "api/diary",
                            type: "GET"
                        }
                    },
                    batch: true,
                    pageSize: 20,
                    schema: {
                        data: "Data",
                        total: "Count"
                    }
                }),
                selectedItem: {},
                showDetails: function (e) {
                    var item = viewModel.dataSource.get(e.context); //gets the ActionSheet context
                    viewModel.set("selectedItem", item); //sets the selected product
                    app.navigate("#details"); //navigates to details view
                }
            });

    </script>
Petyo
Telerik team
 answered on 05 Dec 2012
2 answers
129 views
Hi, 
I would like to know if it is possible to bind the visibility of something (a div, for example) to a specific value in a select. I know I can bind the visibility to a checkbox true/false, but I want something more complicated, like binding different divs to different values of a dropdown... AND using the declarative approach :) I guess I can bind the visibility of the divs to a method that returns something based on the value of the dropdown... right?
Marcelo
Top achievements
Rank 1
 answered on 05 Dec 2012
1 answer
767 views
Hi,

I am looking to change the colour of the text in menu items and sub menu items.  I am wanting the colour to be different.  I can change the color on all menu items, or menu items without a link to a page - href.  But I have not found a way to change the colour so the top level menu items are different to the sub menu items.

html is:

<ul id="menu">
    <li><a>menuitem1</a></li>
    <li><a href="">menuitem2</a></li>
    <li><a>menuitem3</a>
        <ul>
            <li><a href="">menuitem3a</a></li>
            <li><a href="">menuitem3b</a></li>
        </ul>
    </li>   
</ul>
The code below only gets applied on menu items without href.
.k-menu
{
    /* White - only applied on menu items without href */
    color:#ffffff;
}
Then this code applies to all menus items (I did not want the sub menus to have the same colour).
/* Applied to all links - but only want top level menu items*/
.k-menu .k-item .k-link
{
    color:#ffffff; /*White*/
}
Code is also on jsfiddle:
http://jsfiddle.net/PgXSZ/

Looking at the forums someone suggested
.k-menu  .k-group
{
         /*    ..........     */
}
But I cannot get this to work.

Thanks,
Ryan
Iliana Dyankova
Telerik team
 answered on 05 Dec 2012
1 answer
817 views
Hi,

I have a doubt...

 it's possible use a methdo to get the value inside an input ... i mean:
<script id="ReadOnlyText-template" type="text/x-kendo-template">
    ${name}<input type="text" disabled="disabled" data-bind="value:replaceString(value)"></input>
</script>

instead

<script id="ReadOnlyText-template" type="text/x-kendo-template">
    ${name}<input type="text" disabled="disabled" data-bind="value:value"></input>
</script>
where 

<script type="text/javascript">
    function replaceString(value) {
        if(typeof value == 'number' && value !== undefined) {
            return kendo.toString(value, "n2");
        } else {
            return value;
        }
    }
</script>


thanks
Alexander Valchev
Telerik team
 answered on 05 Dec 2012
5 answers
171 views
In prior versions the JQery click() method worked, but in 1114 it doesn't work at all on touch devices. It works just fine with mice.

Here's a page that demonstrates the issue:

http://Dashboard.Sentegy.com/Test.html

if you are on a mouse device clicking on the button generates the alert. On a touch device (iOS) it doesn't pop up. This causes all kinds of problems because Kendo UI Web is also broken. For example selection of an item in a tree view doesn't work on touch devices. I assume its all the same underlying root cause.

The source follows:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js" type="text/javascript"></script>
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  </head>
  <body>
    <div data-role="view">
      <a id="Button" data-align="left" data-role="button" >Press me</a>
    </div>
    <script>
      app = new kendo.mobile.Application(document.body);
      $("#Button").click(function () {
        alert("Clicked");
      });
    </script>
  </body>
</html>



Petyo
Telerik team
 answered on 05 Dec 2012
1 answer
177 views
Here is my model structure:

Header -> Details -> Tags

I have no problem on displaying the Details on the grid. My problem is I want to include the Tags associated into that particular Detail record but all I can see when mapping my model the List<Tags>. This is the part that I have difficulty to implement.
Atanas Korchev
Telerik team
 answered on 05 Dec 2012
2 answers
99 views
Grid's sortable is not working if use kendo.ns.
Because kendo.sortable field is not included kendo.ns.
Please fix it.
thanks.
Iliana Dyankova
Telerik team
 answered on 05 Dec 2012
4 answers
338 views
Hello,

I'm working with the Kendo UI Drop Down List. I need to create a cascading drop down list where each drop down list supports multi-select. I would like to empower the users to "check" checkboxes associated with each item in the drop down list. 

Is this even possible with Kendo UI? If so, how? I can't seem to figure it out. Thank you!

Bill
Atanas Korchev
Telerik team
 answered on 05 Dec 2012
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
Licensing
ScrollView
Switch
TextArea
BulletChart
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
TimePicker
FloatingActionButton
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
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?