Telerik Forums
Kendo UI for jQuery Forum
1 answer
120 views
If I include jquery.validate.js on my site, the dropdownlist no longer allows selection, I can just hover over the dropdown and click - but nothing happens.  It does open, but I cannot select.  Is there an inherent conflict?  This is not desired behavior.
Atanas Korchev
Telerik team
 answered on 28 Dec 2012
4 answers
215 views

<li><a><img src="srb-images/resume-icon.png" class="fileOptionDefaultIcon"><h3>Create Document</h3></a></li>


 I do not want the list item to have a auto detail icon. How would you disable this icon?  ">"

John
Top achievements
Rank 1
 answered on 28 Dec 2012
4 answers
1.0K+ views
I have been injecting a class into the row at runtime to handle conditional styling scenarios, such as "if status = 'urgent' addClass('urgent')". A row with 'urgent' class might be styled bold and red. Conditional styling requires that one examine one or more cells of the row, so I've been getting the dataItem for each row and looking at the data.

   $(grid.tbody).find("> tr:not(.k-grouping-row, .k-detail-row, .k-group-footer)").each(function (idx, elem) {
        var dataItem = grid.dataItem(elem);     
        if (dataItem.status == 'urgent') {
            $(this).addClass('urgent');
        }
      })

One problem is that the injected class does not survive a grouping operation.  If the user drags a column-header to group by that column, the custom class injected into the row does not accompany the row to its new location. The conditional style is not reapplied when the rows are grouped. 

So I am wondering, is it possible to use templates to do this, so that the template sticks to the row even during a grouping operation? The "urgent" class would be appended to those data rows of the tbody (i.e. not into the grouping row, or the group header and group footer rows) where the value in cell3 = "urgent".  Let's say the schema field to which cell3 has been bound is called "status".

Very important: We don't want to overwrite any class that Kendo puts into the row; we want to append a class.

Here's some pseudo-code.  Is something along these lines possible?
<script id="urgentTemplate" type="text/x-kendo-tmpl">
   <tr ${ if dataItem[status] == urgent this.addClass(urgent)} </tr>
If templates cannot be made to work in this manner way, or if they don't travel with the row when it is grouped, it would be helpful to have an event that fired after each group section was instantiated, exposing the rows of the group, so one could iterate them, examine the dataItem of each, and reapply a custom class to the row when applicable. Sorry about this orange text. I'm not sure how to inject pseudo-code into my question without messing up the styling.
Tim R
Top achievements
Rank 1
 answered on 28 Dec 2012
4 answers
251 views
I am trying to get an action sheet to modify itself depending on which screen it is on.  Basically in my scenario I have an button on my navbar that I wish to be a context sensitive menu.  I have a jsbin to show an example of what I am trying here ... http://jsbin.com/ehicof/5/edit.

If you hit the 'logout' button on the top right initially the action sheet looks fine, when you go to the search tab and then to 'search 1' I change the action sheet contents to have a 'search 1' button, however the action sheet doesn't grow (and thus the 'cancel' button is not visible).  I have tried re-initializing the action sheet to no avail (using kendo.mobile.init), perhaps I am using it wrong.  Am I taking the wrong approach here?  Would I be better off making multiple action sheets and then changing the link on the navbar to the appropriate one?
Alexander Valchev
Telerik team
 answered on 28 Dec 2012
3 answers
176 views
Hi forum, I know that this question is so simple and barely fool, but I am trying the mobile UI and when I want to run the app in the web browser this ask me for an user and password, in all web browsers... but, when I run the app example from the kendoUI trial ZIP the app run fine... why this is happening? 

I'm already check permissions and that stuff, but I'm missing something. 

Thanks!
Jose
Top achievements
Rank 1
 answered on 28 Dec 2012
6 answers
181 views
Hello,

HTML
<div id="example" class="k-content">
            <div id="clientsDb">
 
                <div id="grid" style="height: 380px"></div>
 
            </div>
</div>


JS
$(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 250,
                        filterable: true,
                        scrollable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                                field:"OrderID",
                                filterable: false
                            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 350,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 250
                            }, {
                                field: "ShipCity",
                                title: "Ship City",
                                width: 300
                            }
                        ]
                    });
                });



Steps for produce this issue.

FF-17.

Step 1 : Add above code in to http://try.kendoui.com/web/widget-initialization/1
Step 2 : Filter the 'ship city'  column by 'jayesh' and Click on filter button.
Step 3 : Issue raised here


It removed the scroll bar from the grid.

IE-9.

Step 1 : Add above code in to http://try.kendoui.com/web/widget-initialization/1
Step 2 : Filter the 'ship city'  column by 'jayesh' and Click on filter button.
Step 3 : Clear the filter from 'ship city' column
Step 4 : Issue raised here


It miss aligned the data and header row. (Because it auto scroll to the Left)

Thanks,
Jayesh Goyani
Jayesh Goyani
Top achievements
Rank 2
 answered on 28 Dec 2012
5 answers
117 views
Hi all,
I just new in kendo ui and you may consider my question silly, but still I need to get an answer.

All code is available here: http://jsfiddle.net/Oleksii/vvCHX/27/

In my scenario I have mobile application with 2 views:
  • defaultView (id="") contains 2 list view: one statically defined; the second one is initialized in view init event handler); This non-static listview has template called "fileGroupsItemTemplate".
  • second view has no content (id="aboutView").
Non-static view's item MUST:
  1. be clickable (I mean Link Items) to get ability to navigate to other view;
  2. have switch on the right side in every row
  3. View MUST be chnaged only if switch is checked
I faced with the problems: if I click on switch it changes its value, but current view is changed too.

It is because switch is inside <a> tag (see template). But if I put it out of <a> tag, 1) items are shown as a link; 2) items become unclickable; 3) if I click the link, then will get an error:
{"error": "Please use POST request"}
Doew anyone know how to prevent changing view after clicking on switch inside <a> tag? I was thinking about some trick in event handlers, but item-click event of list view is raised in the first place, and switch-change just after.

Here is template:
<script id="fileGroupsItemTemplate" type="text/x-kendo-template">
    <table>
        <tr><td>
            <img src="#= data.Image#" />
        </td><td style="vertical-align: middle">
            #= data.Name #
        </td>
        </tr>
    </table>
    #if(data.Docs.length > 0){#
    <ul>
        #for(var i=0; i < data.Docs.length; i++){#
        <li>
            <a >#=data.Docs[i].Name#
            <input data-on-label="Cl" data-off-label="Sk" data-role="switch" #=data.Docs[i].NeedProcess ? "checked='checked'" : ""# /></a>
             
        </li>
        #}#
    </ul>
    #}#
</script>

Alexander Valchev
Telerik team
 answered on 28 Dec 2012
1 answer
402 views
Hi 
How can I assign a custom icon to an action and change it when clicked?

So far I have the window opening and I have successfully attached the click events - now how do I change the icon after it has been clicked (and before).


$("#idExplorerReal").kendoWindow({
    actions: ["Expand", "Custom", "Close"],
    draggable: true,
    height: "500px",
    width: "300px",
    minHeight: 500,
    minWidth: 250,
    modal: true,
    visible: true,
    resizable: true,
    title: "Explorer",
    close: onCloseWin
});
 
var kendoWindow = $("#idExplorerReal").data("kendoWindow");
 
var vv = kendoWindow.wrapper.find(".k-i-custom");
vv.click(function (e) {
    alert("custom");
});
 
var vv2 = kendoWindow.wrapper.find(".k-i-expand");
vv2.click(function (e) {
    alert("expand");
});

One more question....

How exactly does this .data("kendoWindow") work?  Does Kendo places a reference to itself in the jQuery .data() action of the element that is transformed to a Kendo Window?

Thanks,





Dimo
Telerik team
 answered on 28 Dec 2012
6 answers
353 views
I try to pass few additional URL parameters when navigating to local View. One parameter passed correctly (like this: "/#quotes?type=SHARES"). But if I pass two or more parameters (e.g. "/#quotes?type=SHARES&country=RU") javascript error occurred: "Uncaught TypeError: Cannot call method 'getAttribute' of undefined". 

Method: 
kendo.initWidget 

line: 
role = element.getAttribute("data-" + kendo.ns + "role");

Please describe how to pass correctly few parameters to local views!
Vladimir
Top achievements
Rank 1
 answered on 28 Dec 2012
1 answer
254 views
HI,
      I have used kendo grid edit ,Empty column validation working fine. but i will give the space inside the editable textbox in grid . the validation not working.I will all empty string to database.


Thanks
Parthasarathi M
Alexander Valchev
Telerik team
 answered on 28 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?