Telerik Forums
Kendo UI for jQuery Forum
3 answers
629 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
902 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
104 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
712 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
781 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
130 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
134 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
77 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
301 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
Date/Time Pickers
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
Gauges
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
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?