Telerik Forums
Kendo UI for jQuery Forum
1 answer
104 views
I realize this isn't part of the documentation, and I haven't glanced through the sourcecode yet to see if there is anything undocumented to allow this... 

Is it possible, or are there plans to make possible, the ability to use the SPA additions to the framework without url fragments?  Namely, a switch for the SPA framework that is able to use a combination of Pushstate, querystrings, and well-defined pages to create an ajax-driven pseudo-SPA similar to what we see in the KendoUI demo website that uses normal page-loads for those using older browsers?
Petyo
Telerik team
 answered on 21 Mar 2013
2 answers
422 views
I have assigned a class to the column-header of a particular column.  I use the following CSS to set the style:

              th.foo {background-color: #339933  !important;
                           color: white !important}

This works correctly in IE9 and Safari, but only the font-color changes in Chrome; the background color does not change.  So I believe the selector is correct.  Does anyone know what is causing the Chrome issue?


    
Tim R
Top achievements
Rank 1
 answered on 21 Mar 2013
8 answers
816 views
I've been heavily relying on the following: http://code.google.com/p/jquery-jsonp/

Can the Kendo DS do this as well by any chance?  The performance gained from the cache is AMAZING.
d
Top achievements
Rank 1
 answered on 21 Mar 2013
1 answer
164 views
Want to make a mobile website a little snazzier for a potential client. The page contains only a kendoGrid, and if in Portrait mode, only 1 column shows; in Landscape mode, all columns are shown.

I'd like to have the showColumn/hideColumn functions to animate the column widths instead of using the show() and hide() jQuery functions.

Are there plans or a workaround to make this happen?
Dimo
Telerik team
 answered on 21 Mar 2013
2 answers
1.1K+ views
Hi,
   I have a  grid with footer showing the aggregates of the columns, I need to change the backgound color of the cells in the footer (complete row), I tried using the .k-footer-template class, but it is not working.........
Himanshu
Top achievements
Rank 1
 answered on 21 Mar 2013
2 answers
319 views
Hi,

I'm opening Kendo Window using: 
  • var window = $("#window").clone(); 
After opening the window I can't find a way to close it from the window using: 
  •  window.parent.$("#window").data("kendoWindow").close();
If I open the window without .clone() this works fine but then the window content does not refresh always. With .clone() I get following error: 
  • TypeError: 'undefined' is not an object (evaluating 'window.parent.$("#closeThisWindow").data("kendoWindow").close')
I  guess this is because the reference to the cloned object is unknow. I would like to know how to refer to this .clone() window from inside this opened window.

$(document).ready(function() {
    var window = $("#window").clone();
    //var window = $("#window"); --this works
    var onClose = function() {
        $("html, body").css("overflow", "");
    }
    var onOpen = function() {
        $("html, body").css("overflow", "hidden");
    }
    if (!window.data("kendoWindow")) {
        window.kendoWindow({
            actions: ["Custom", "Refresh", "Maximize", "Minimize", "Close"],
            width: 900,
            height: 600,
            iframe: true,
            title: "Report Hours",
            content: "tunnit.free.add.cfm?start="+start+"&end="+end,
            close: onClose,
            open: onOpen,
            modal: true
        });
        window.data("kendoWindow").open();
        window.data("kendoWindow").center();
    } else {
        window.data("kendoWindow").open();
        window.data("kendoWindow").center();
    }
 
});

jari
Top achievements
Rank 1
 answered on 21 Mar 2013
1 answer
243 views

 I would like to implement the Tree view nodes in drop down as shown in attached file
the same can be achieved using telerik and i would like to know how in kendo ui MVC

ASP.NET web forms:
  <telerik:RadComboBox ID="ddlUsers" runat="server" Width="200px" Height="300px"     ShowToggleImage="True" Style="vertical-align: middle;" ExpandAnimation-Type="None"                            CollapseAnimation-Type="None"
                EmptyMessage="Select a User or User Group" AllowCustomText="true" 
                OnClientLoad="OnComboBoxLoad"
                OnClientDropDownOpened="OnComboBoxDropDownOpened"             
                 OnInit="OnInit_ddlUsers" >
                <itemtemplate>
                    <div id="divTreeView" runat="server" onclick="StopPropagation(event);">
                        <telerik:RadTreeView runat="server" ID="tvUsers" Width="100%" Height="100%"
                            OnClientNodeClicking="OnTreeNodeClicking" 
                            OnNodeClick="OnUserInfoSelected"  >
                            <DataBindings >
                                <telerik:RadTreeNodeBinding Depth="0" Expanded="true" />
                                <telerik:RadTreeNodeBinding Depth="1" Expanded="true" /> 
                            </DataBindings> 
                        </telerik:RadTreeView>
                    </div>
                </itemtemplate>
                <items>  
                    <telerik:RadComboBoxItem Text="" />  
                </items>
            </telerik:RadComboBox>  


<telerik:RadScriptBlock runat="server" ID="scriptBlock">
<script type="text/javascript">

    function OnComboBoxLoad(sender, args) {
        var combo = sender;
        var input = combo.get_inputDomElement();
        input.onkeydown = onKeyDownHandler;
    }

    function onKeyDownHandler(e) {
        if (!e)
            e = window.event;
        e.returnValue = false;
        if (e.preventDefault) {
            e.preventDefault();
        }
    }   
    function OnTreeNodeClicking(sender, args) {
        var node = args.get_node();
        var comboBoxId = sender.get_attributes().getAttribute("<%= ComboBoxId %>");       
        var comboBox = $find(comboBoxId);
        comboBox.set_text(node.get_text());
        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_text(node.get_text());
        comboBox.commitChanges();
        comboBox.hideDropDown();

        // Call comboBox.attachDropDown if:
        // 1) The RadComboBox is inside an AJAX panel.
        // 2) The RadTreeView has a server-side event handler for the NodeClick event, i.e. it initiates a postback when clicking on a Node.
        // Otherwise the AJAX postback becomes a normal postback regardless of the outer AJAX panel.

        comboBox.attachDropDown();
    }

    function StopPropagation(e) {
        if (!e) {
            e = window.event;
        }

        e.cancelBubble = true;
    }

    function OnComboBoxDropDownOpened(sender, eventArgs) {
        var tree = sender.get_items().getItem(0).findControl("tvUsers");
        var selectedNode = tree.get_selectedNode();
        if (selectedNode) {
            selectedNode.scrollIntoView();
        }

    }
</script>
</telerik:RadScriptBlock>

<script type="text/javascript">
    var divItem = document.getElementById("divTreeView");
    if (divItem != null)
        divItem.onclick = StopPropagation;
</script>
Alexander Valchev
Telerik team
 answered on 21 Mar 2013
1 answer
218 views
Hello,

I am using the autocomplete widget from the kendo ui web library and experiencing a reproduceable bug. The client javascript error being thrown is "toLowerCase is an undefined function or method". Below is my code.

DATASOURCE
===================================================
var transport = {
        read: {
            url: "ServicePackageOffers",
            dataType: "json",
            data: {},
            cache: true
        }
    };
 
    var filterDataSource = new kendo.data.DataSource({
        transport: transport,
        serverFiltering: false,
        sort: {
            field: "PackageName",
            dir: "asc"
        },
        schema: {
            model: {
                id: "Id",
                fields: {
                    PackageName: { editable: false, nullable: false, type: "string" },
                    PackageOfferName: { editable: false, nullable: false, type: "string" },
                    ClubName: { editable: false, nullable: false, type: "string" },
                }
            }
        }
    });



CONTROL RENDERING
===================================================
@(Html.Kendo().AutoComplete()
.Name("autocomplete")
.MinLength(1)
.DataTextField("PackageOfferName")
.Placeholder("Search Products...")
.Filter(FilterType.Contains)
.HtmlAttributes(new { style = "width: 100%; height: 100%" })                                
)

BIND
===================================================
$(document).ready(function () {
        $("#autocomplete").closest('.k-autocomplete.k-widget').keyup(function (e) {
            var val = $('#autocomplete').data().kendoAutoComplete.value();
            onFilterValueChanged(val);
        });
 
        filterDataSource.read();
 
        $("#autocomplete").data("kendoAutoComplete").setDataSource(filterDataSource);
    });

The exception gets thrown any time I select an item from the autocomplete list popup. The error occurs here, when I call datasource.filter.

ERROR
===================================================
function onFilterValueChanged(e) {
        setFilterText(e);
 
        sharedDataSource.filter({
            filters: [               
                { field: "PackageOfferName", operator: "contains", value: e }
            ]
        });
    }

However, if i change the control renderer to this:
CONTROL RENDERER
===================================================
<span class="k-textbox k-space-left" style="width: 100%; height: 30px">
<a href="#" id="itemFilterCommand" class="k-icon k-i-search"> </a>
<input id="autocomplete" style="width: 100%; height: 100%; padding: 0px" />
</span>

$("#autocomplete").kendoAutoComplete({
            minLength: 1,
            dataTextField: "PackageOfferName",
            filter: "contains",
            placeholder: "Search Products..."
        });

The error no longer throws, and everything works fine. But I dont want to do that, I want to do what I want to do and use the server wrappers. So... can someone try to explain why I am experiencing what I am experiencing.


Georgi Krustev
Telerik team
 answered on 21 Mar 2013
5 answers
120 views
Hi,

I'm trying to get the Date Picker in a form.
When viewing the online demo with the Nexus 7, the native Date Picker shows up.
When I am using the code, pack everything with PhoneGap I only receive a plain input. Any ideas? Code follows below.

 <form action="">
<ul data-role="listview" data-style="inset">
<li>
<label>
   Estimated Date:
    <input id="estimatedDate_input" type="date" />
   </label>                            
  </li>
 </ul>
</form>

Do I need an init or something like that - everything else (not much) like views and transistions are working.

Kamen Bundev
Telerik team
 answered on 21 Mar 2013
9 answers
1.9K+ views
Hi,

I am using dataviz-version-710 for the charts. I copied the code from the sample and tried to run it.
But some how the chart doesn't refresh.

var chart = $("#chart").data("kendoChart"),
                        series = chart.options.series,
                        type = $("input[name=seriesType]:checked").val(),
                        stack = $("#stack").prop("checked");

                    for (var i = 0, length = series.length; i < length; i++) {
                        series[i].stack = stack;
                        series[i].type = type;
                    };

chart.refresh();

Can thing I missed here? please suggest.
Hristo Germanov
Telerik team
 answered on 21 Mar 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)
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
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
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?