Telerik Forums
Kendo UI for jQuery Forum
1 answer
376 views
I'm using an autocomplete control in a grid, which works well.
When the user types in the field the list is populated from an ajax call, works no problem. 
When one of the list options are selected it updates the grid values in the same row. 

Scenario: If the user clears the autocomplete control by highlighting the text, pressing delete and then tabbing out of the field we need to clear the current grid row values. 
ALSO, when the user selects a valid value we're adding a new row below the current one for the user to use. (I.e. dynamically growing the grid). 

So, we bind to the select event and on a valid selection we add the new row. This works.
We added a change event to the autocomplete control and it fires in the above mentioned scenario, but if the user selects a valid option, then highlights the text, types in something else and then selects an option from the resulting list, the select event fires, but not the change event. 

Why would that be? 
Dimo
Telerik team
 answered on 10 Jan 2014
1 answer
269 views
Hi:

I'm using the event binding to bind a viewmodel function to a div in a template, like this:

<ul id="myList"  data-role="listview" data-template="myTemplate" data-bind="source: detail.states"></ul>

 <script type="text/x-kendo-template" id="myTemplate">
        <div data-role="touch" data-bind="events: { tap: open}">
            <div class="response-container">
                <div id="text">
                    ${text}
                 </div>
                <div id="controls" class="hidden" style="height: 100px">
                                <textarea id="response-textarea" maxlength="8000"></textarea>
.
.
.

The "open" function that fires for the tap event changes the class of the inner "controls" div to "unhidden", which just makes a textarea and some other bound buttons visible.  In that function, I want to remove the event binding established in the data-bind of the template.  In other words, I want to be able to interact with the newly exposed widgets without firing the tap event over and over. One of the exposed buttons sets the class back to hidden, and then I would like to re-enable the tap event binding.  This would be trivial, if there wasn't a template involved, but I don't understand how the templating code adds the binding, so removing it is even more obscure.

So the general question is, how do you remove and restore an event binding for a listview item that is added via a template?

Thank you,

Kelly
Alexander Valchev
Telerik team
 answered on 10 Jan 2014
1 answer
235 views
Hello!

I'm evaluating Kendo for use in an asp.net mvc4 web application using razor based views.
I want implement a dropdown list in a grid cell.
I saw this example
http://demos.kendoui.com/web/grid/editing-custom.html
and I have implemented it successfully but the problem is that I don’t want to create an EditorTemplate for each dropdownlist in my application. I would like to implement kendo dropdown list in a grid cell using .Template:

columns.Bound(m => m.Names).Template(@...); 

Is there some documentation for use kendo dropdown list in a grid cell using .Template?  Can I get an MVC razor example of this?

Thanks
Vladimir Iliev
Telerik team
 answered on 10 Jan 2014
2 answers
426 views
Hello,

I'm trying to implement a functionality that defines total number of  axis divisions (by setting majorUnit dynamically) for Kendo chart. 
In order to implement this functionality, I have to calculate the maximum value of the chart and divide this value by an integer number. This methodology is used for both drawing the chart and clicking on the legend items. There is a function that is called from dataBound function for drawing the chart and from onLegendClick for reading the max value according to the changes of chart.

In order to read the max value I have to read this value from $(chartID).data("kendoChart")._model._plotArea.children[0].charts[0].valueAxisRanges.undefined.max.
My first question question is that if there is a better way to get this maximum value of the chart?
My second question is that I have to use setTimeout function in order to read the value otherwise I'll get error so is there any other way of retrieving this maximum value without using timeout function? 

I've created a sample project that is located at: http://jsfiddle.net/saes/8v8VT/

Thanks in advance,
Sam
Sam
Top achievements
Rank 1
 answered on 10 Jan 2014
1 answer
587 views
I need to know how to set validation on the mulitselect so that if no
items are selected, client and server side validation  kicks in with
appropriate message. I am binding to a custom array list with text/value
Alexander Popov
Telerik team
 answered on 10 Jan 2014
4 answers
205 views
I am struggling  to get json value,it's cannot display values
 here my coding 
display.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>
    <script type="text/javascript">
        var queryString = new Array();
        $(function () {
            if (queryString.length == 0) {
                if (window.location.search.split('?').length > 1) {
                    var params = window.location.search.split('?')[1].split('&');
                    for (var i = 0; i < params.length; i++) {
                        var key = params[i].split('=')[0];
                        var value = decodeURIComponent(params[i].split('=')[1]);
                        queryString[key] = value;
                    }
                }
            }
            if (queryString["name"] != null && queryString["category"] != null && queryString["value"] != null) {
               var name=queryString["name"];
  var category=queryString["category"];
  var value=queryString["value"];
  alert(name+category+value);
            }
        });

        function createChart() {
            $("#chart").kendoChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "data.json",
                            dataType: "json"
                        }
                    },
                    sort: {
                        field: "date",
                        dir: "asc"
                    }
                },
                title: {
                    text: "Spain electricity production (GWh)"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column"
                },
                series:
                [{
                    data:"value",
                    name: "Name"
                }],
                categoryAxis: {
                    field: "date",
                    labels: {
                        rotation: -90
                    }
                },
                valueAxis: {
                    labels: {
                        format: "{0:N0}"
                    },
                    majorUnit: 5000
                },
                tooltip: {
                    visible: true,
                    format: "{0:N0}"
                },
              
            });
        }

       
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
    <div class="demo-section">
        
        <div class="console"></div>
    </div>
    <style scoped>
        .demo-section {
            width: 700px;
        }
    </style>
</div>
</body>
</html>


//data.json

[
        {
                "month": "jan",
                "date": 1,
                "value": 3000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 3,
                "value": 6000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 6,
                "value": 8000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 1,
                "value": 3000,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 5,
                "value": 3030,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 8,
                "value": 4000,
                "name": "p2"
        },
        {
                "month": "jan",
                "date": 10,
                "value": 3000,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 10,
                "value": 3400,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 11,
                "value": 7000,
                "name": "p1"
        },
]
Iliana Dyankova
Telerik team
 answered on 10 Jan 2014
2 answers
108 views
Hi

Is there a way that i can use 2 flat data sources to stitch together an editable screen that is fully supported for mvvm.

In my example i have countries and cities, city has a fk column to country.  See fiddle example

Of course in the example it incorrectly lists all cities under each country as there is no filtering

Note :- I understand that this could be as a nested field of cities under country, but my remote data source doesnt support this, instead it gives me 2 flat result sets.

So i want to bind a div to the countries as my driving data, then from within each country template i want to bind another to the subset of cities for that country...

Its probably obvious... Any suggestions welcome

Thanks

Chris
Chris
Top achievements
Rank 1
 answered on 09 Jan 2014
12 answers
2.3K+ views
Hello,

We're evaluating tools for drawing data that will be dynamically changing (streams of data being pushed to the client).  We tried setting up a page using the Kendo UI Graph. The data renders and updates, but the redraw is noticeably slow and flickers.  We're currently calling the refresh() method on the chart to redraw after we append new values to the data source.  Is there are more efficient method for redrawing streaming data or some parameters that affect the redraw behavior that I haven't been able to locate?  For comparison, the Flot library for jQuery is noticeably smooth when rendering.

Thank you.
Iliana Dyankova
Telerik team
 answered on 09 Jan 2014
1 answer
99 views
I've tried to add a custom ValueTemplate to my DropDownList like it is described in the Kendo demo-section "Customizing Templates" -  
http://demos.kendoui.com/web/dropdownlist/template.html

It seems that in the current release 2013.3.1119.340 the DropDownList-property ValueTemplate is missing. How do I accomplish a custom valueTemplate without this property? I'm using MVC Razor.



Georgi Krustev
Telerik team
 answered on 09 Jan 2014
6 answers
234 views
see fiddle http://jsfiddle.net/A2URt/

the kendo chart does not seem to handle very small values well. We included two examples one with very small values, the other one with a bit larger values. The edge case seems to lie in values 1.0e-7.

Can somebody help, explain etc?

Kind regards Dennis
JamesD
Top achievements
Rank 1
 answered on 09 Jan 2014
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?