Telerik Forums
Kendo UI for jQuery Forum
1 answer
229 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
209 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
117 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
1 answer
243 views
One of our customers is trying to create a message using Cyrillic characters but each character is displaying as a question mark. What do we need to do to support this?
Petur Subev
Telerik team
 answered on 21 Mar 2013
2 answers
106 views
I've been working with the Kendo grids for a while and have begun to figure out what I can and can't do with them however this was a behavior that surprised me. So I essentially have a grid that I am updating with a different style after a trigger occurs. If the user tries to filter the datasource of that grid, any individual row styling is lost. Is this the expected behavior?

I would really like to keep my styling but obviously I'm not sure if there's an approach that will do this. It must be that filtering reconstructs the entire grid such that any styling information is lost. Is there any way to work around this easily?
Iliana Dyankova
Telerik team
 answered on 21 Mar 2013
1 answer
90 views
Hi,

Since updating to the latest 2013Q1 release the splitview widget has broken. The side-pane is now taking up the larger proportions and the main pain is smaller. This works fine on browser testing, but on an actual iPad using iOS 6.1.2 it is incorrect. I have confirmed it is not my code as the same issue is present with the online demos viewed using an iPad.

I have attached a screenshot from the ipad.

Cheers
Kamen Bundev
Telerik team
 answered on 21 Mar 2013
1 answer
100 views
My question is in two parts.

So, let's say I want to use the MultiSelect control as the "To:" field on an e-mail form, where you could select contacts from a list. The first question is, can you have it filter by both the label and value fields for a particular result? Say if the label is their name and the value is their email address?

Also, if the value is not in the list, is there an event I can handle that would let me add the item back to the datasource and then save it back up to the datasource when they hit a certain key? Or would I have to wire all that up manually?

Thanks!

Robert McLaws
AdvancedREI.com
Jayesh Goyani
Top achievements
Rank 2
 answered on 21 Mar 2013
10 answers
371 views
Hi all,

We're evaluating the KendoUI component library for an upcoming project.  The plan is to use lots of those new fangled HTML5/CSS3 libraries like bootstrap, backbone.js, require.js etc in the project.  Kendo is one of the component suite's we're looking at based on our UX team's opinion.  One issue we've run into is that the DateTime picker renders incorrectly when we use the bootstrap CSS on the page.  For example, instead of getting the thick background only on the thin line of bootstrap shows.  Are there any CSS fixes we can use to make them work together?
Alexander Valchev
Telerik team
 answered on 21 Mar 2013
6 answers
3.9K+ views
Sorry for the stupid question...The demos don't have any code...Working with MVC3 razor. Thanks.
Dimiter Madjarov
Telerik team
 answered on 21 Mar 2013
Narrow your results
Selected tags
Tags
+? 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?