Telerik Forums
Kendo UI for jQuery Forum
7 answers
1.6K+ views

I want to use the ListView to select items, very similar to this example: http://demos.telerik.com/kendo-ui/listview/selection

There are two items that I'm having a problem with. First, I need to be able to select the first item in the list view by default (ie. on new object creation). I found this code in another thread, but it's not working:

var listView = $("#listView").data("kendoListView");   
listView.select(listView.element.children().first());

Secondly, I need to be able to select an item in the list view by ID (ie. editing an existing object).

This is the JSON I'm sending to the ListView:

{"Icons":[{"Name":"fa-icon-bolt","ID":23},{"Name":"fa-icon-book","ID":3},{"Name":"fa-icon-building","ID"
:32},{"Name":"fa-icon-building-o","ID":24},{"Name":"fa-icon-calculator","ID":15},{"Name":"fa-icon-car"
,"ID":18},{"Name":"fa-icon-certificate","ID":2},{"Name":"fa-icon-cloud","ID":6},{"Name":"fa-icon-cog"
,"ID":33},{"Name":"fa-icon-desktop","ID":4},{"Name":"fa-icon-diamond","ID":26},{"Name":"fa-icon-exclamation"
,"ID":29},{"Name":"fa-icon-file","ID":25},{"Name":"fa-icon-fire-extinguisher","ID":36},{"Name":"fa-icon-flask"
,"ID":16},{"Name":"fa-icon-globe","ID":11},{"Name":"fa-icon-graduation-cap","ID":1},{"Name":"fa-icon-h-square"
,"ID":20},{"Name":"fa-icon-headphones","ID":12},{"Name":"fa-icon-info","ID":27},{"Name":"fa-icon-laptop"
,"ID":8},{"Name":"fa-icon-line-chart","ID":19},{"Name":"fa-icon-mobile","ID":9},{"Name":"fa-icon-newspaper-o"
,"ID":10},{"Name":"fa-icon-plus","ID":28},{"Name":"fa-icon-puzzle-piece","ID":13},{"Name":"fa-icon-road"
,"ID":34},{"Name":"fa-icon-rocket","ID":35},{"Name":"fa-icon-share-square-o","ID":5},{"Name":"fa-icon-suitcase"
,"ID":30},{"Name":"fa-icon-truck","ID":14},{"Name":"fa-icon-university","ID":7},{"Name":"fa-icon-user"
,"ID":22},{"Name":"fa-icon-user-secret","ID":17},{"Name":"fa-icon-users","ID":21}]}

And this is how I'm currently initializing it:

function initIconsView() {
    var datasource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "GET",
                url: "/Controllers/MainController.cfc?method=getIcons",
                processData: true,
                dataType: "json",
                cache: false
            }
        },
        schema : {
            type: "json",
            data: "Icons"
        }
    });
          
    $("#icons_list").kendoListView({
        dataSource: datasource,
        selectable: true,
        template: kendo.template($("#icon_list_template").html())
    });
}

And the template/HTML:

<script id="icon_list_template" type="text/x-kendo-template">
    <div class="icon">
        <i class="#: data.Name # fa-icon-2x"></i>
    </div>
</script>
 
<div class="demo-section k-content wide">
    <div id="icons_list"></div>
</div>

Really they're two different facets of the same issue - programmatically selecting an item in the ListView.

Ashleigh L
Top achievements
Rank 1
 answered on 21 Jan 2016
1 answer
260 views

after upgrading to "2016.1.118" my code (see below) produce an "Uncaught TypeError: Cannot read property 'date' of undefined" when trying to access dataItem properties in chart.series.notes.label.template:

The code:

var devChart = $("#chart").kendoStockChart({
    theme: "bootstrap",
    dataSource: chartDs,
    dateField: "date",
    series: [{
        type: "line",
        style: "smooth",
        field: "pct",
        noteTextField: "date", // keep, however overruled by label.template
        notes: {
            position: "bottom",
            icon: {
                visible: false
            },
            label: {
                color: "white",
                border: {
                    dashType: "dash"
                },
                background: "#777",
                rotation: -90,
                position: "inside",
                template: "#:kendo.toString(category, 'dd-MMM-yyyy')#" // this code works in "2016.1.118" version
                //template: "#:kendo.toString(dataItem.date, 'dd-MMM-yyyy')#" // this code worked in pre-"2016.1.118" version
            }
        }
    }],
    ...

 

My dataset:

[{"rId":6789,"date":"2015-05-06T12:28:33.643+02:00","max":160.00,"score":140.0,"pct":88.0,"survey":"survey 1"},{"rId":7228,"date":"2015-05-29T11:14:42.047+02:00","max":160.00,"score":150.0,"pct":94.0,"survey":"survey 1"},{"rId":9590,"date":"2015-08-11T13:53:27+02:00","max":160.00,"score":160.0,"pct":100.0,"survey":"survey 1"},{"rId":12770,"date":"2015-10-02T10:53:55+02:00","max":160.00,"score":140.0,"pct":88.0,"survey":"survey 1"},{"rId":14890,"date":"2015-10-28T12:41:27+01:00","max":160.00,"score":140.0,"pct":88.0,"survey":"survey 1"},{"rId":16222,"date":"2015-11-06T13:12:12+01:00","max":365.00,"score":365.0,"pct":100.0,"survey":"survey 2"}]

EZ
Top achievements
Rank 2
 answered on 21 Jan 2016
2 answers
345 views

I want to check out the new Dashboard app template, but I'm having trouble finding it.  I upgraded UI for ASP.NET MVC to Q1 2016 using Telerik Control Panel.  It is installed in the C:\Program Files (x86)\Telerik folder.  When I couldn't find the template there, I also installed Kendo UI Professional (including examples).  I found this blog that speaks of an apptemplates folder, but I'm not seeing that in my installation.  Were the templates moved somewhere else in this release? 

Thanks.

Joel
Top achievements
Rank 1
Iron
 answered on 21 Jan 2016
1 answer
428 views

Kendo Q3 2015, asp.net mvc 

 I have the scenario where I'm binding columns to nullable objects.  I'm using the client template, and have a little html to add if the value is not null.

I've simplied my code here.  "ChildObject" is a property that can be null.  If it is null, show nothing.  If it is not null, show ChildObject.Name (in some custom html)

columns.Bound(c => c.ChildObject.Name)
.Title("Some Column")                  
.ClientTemplate(                      
"#= (ChildObject == null) ? ' ' : '<div>' + ChildObject.Name + '</div>' #"                  
)                  
.Width(100);

This code throws the invalid template error.  If I remove the '+'s, it works fine. Example:  '<div>Hello</div>' works, however that wouldn't allow me to add databound text. 

Thanks

Hristo Valyavicharski
Telerik team
 answered on 21 Jan 2016
7 answers
2.2K+ views
Hi, I'm instantiating an editable grid via the MVC wrappers (example code below).  What I want to do is respond to a change in the Amount (or other fields) with some custom client-side logic that will update the total (Amount * Unit Price = Total).

What's the best way to set this up?  Do I need an editor template or something?  Can someone point me to an example?

@(Html.Kendo().Grid<MaterialEstimateQuantityApplicationModel>()
                  .Name("MaaterialEstimateQuantityApplicationGrid")
                  .Columns(columns =>
                      {
                          columns.Bound(p => p.Amount);
                          columns.Bound(p => p.QuantityAmount);
                          columns.Bound(p => p.MaterialMarkup);
                          columns.Bound(p => p.UnitPrice);
                          columns.Bound(p => p.Total);
                          columns.Bound(p => p.MaterialEstimationId).Visible(false);
                          columns.Bound(p => p.ItemQuantityId).Visible(false);
                      })
                  .Editable(editable => editable.Mode(GridEditMode.InCell))
                    //.Pageable()
                  .Navigatable()
                    //.Sortable()
                  .Scrollable()
                  .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .Batch(true)
                                                .PageSize(20)
                                                .ServerOperation(false)
                                                .Events(events => events.Error("error_handler"))
                                                .Model(model => model.Id(p => p.Id))
                                                .Read("EditingLaborItemsCreate_Read", "Estimate", new { estimateId = Model.EstimateId })
                                                .Update("EditingLaborItemsCreate_Update", "Estimate")
                                                .Create("EditingLaborItemsCreate_Create", "Estimate")
 
                  ).
Boyan Dimitrov
Telerik team
 answered on 21 Jan 2016
3 answers
297 views

I am adding items on client with url parameter set:

var item = this.links.append({ text: text, url: url }, parent);
//http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#methods-append

The generated code is:

<li role="treeitem" class="k-item" data-uid="64c022e1-c7c4-470e-8dab-a5f821290894" aria-selected="false " id="menuitems-admin_management_database">
  <div class="k-top">
    <a class="k-in k-state-focused" href="#!/admin/management/database">Database</a>
  </div>
</li>

I would expect that k-link class is also added to the a tag, otherwise this happens.(On some themes text is not visible)

Alex Gyoshev
Telerik team
 answered on 21 Jan 2016
1 answer
394 views

Hi I have a simple multiselect....

 <select id="msProducts" multiple style="width:100%;"></select>

 

$(document).ready(function () {

        //products multi-select
        $("#msProducts").kendoMultiSelect({
            placeholder: "Select Product(s)",
            dataTextField: "ProductNameText",
            dataValueField: "ProductNameValue",
            dataSource: {
                type: "json",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "Home/Products"
                    }
                }
            }
        });

});

 

My Contoller has:

    'GET: Home/Products
    <HttpGet>
    Function Products() As JsonResult
        Dim DiaryProductList As List(Of ProductsModel) = ProductsModel.GetProducts
        Return Json(DiaryProductList , JsonRequestBehavior.AllowGet)
    End Function

 

My ProductsModel Class has:

Public Class ProductsModel

    Public Property ProductNameText As String

    Public Property ProductNameValue As String

    Public Shared Function GetProducts() As List(Of ProductsModel)
        Dim ProductList = New List(Of ProductsModel)
        Dim dc As New DBDataContext
        Try
            Dim ProductsQuery = (From pIn dc.Products
                                Where p.ProductStatus <> "discontinued"
                                Select New With {.ProductNameValue = p.ProductName,
                                    .ProductNameText = p.ProductName}).OrderBy(Function(lst) lst.ProductNameValue)
            For Each r In ProductsQuery
                ProductList.Add(New ProductsModel() With {.ProductNameValue = r.ProductNameValue,
                                  .ProductNameText = r.ProductNameText})
                Next

           Catch ex As Exception
                ProductList.Add(New ProductsModel() With {.ProductNameValue = "",
                                  .ProductNameText = ex.Message})
            Finally
                dc.Connection.Close()
            End Try
            Return ProductList
    End Function
End Class

My problem is that although the muti-select gets populated (with some 5000+ products) the dropdown is not filtering as a user types. For example if I beging typing the word CAKE. As soon as I type C the I-beam disappears and after a second or two the dropdown drops for a brief moment and the disappears clearing the multi-select completely. The only way I can populate at the moment is type the letter A, wait and then scroll through the complete list and select what I need for each item I need. Have I missed something. Should I introduce paging in order to limit the data? 

Thanks

Georgi Krustev
Telerik team
 answered on 21 Jan 2016
2 answers
213 views

I am trying to export a grid to excel. There is a column group which might have any number of columns depending on configuration. The issue is when i export the grid, i am not able to see the values of the column names instead i see variable names. attachments show what i mean. please help me!

 this is what i used in my view.

.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.Filterable(true)
)

Vladimir Iliev
Telerik team
 answered on 21 Jan 2016
2 answers
1.2K+ views

I have a basic editor that I need to check for content. If empty I will generate error. My code to check for empty is:

    var dropdownlist = $("#addNew_dTeam").data("kendoDropDownList");
        if (dropdownlist.value() == "") {
            validFlag = false;
            errorMsg = "<li>Select Team</li>"
        }

        dropdownlist = $("#addNew_dType").data("kendoDropDownList");
        if (dropdownlist.value() == "") {
            validFlag = false;
            errorMsg += "<li>Select Entry Type</li>"
        }

        var multiSelect = $("#msServers").data("kendoMultiSelect");
        if (multiSelect.value() == "") {
            validFlag = false;
            errorMsg += "<li>Add at least one Server or select N/A</li>"
        }

        var editor = $("#diaryComments").data("kendoEditor");
        if (editor.value() == "") {
            validFlag = false;
            errorMsg += "<li>A comment is mandatory</li>"
        }

Alex Gyoshev
Telerik team
 answered on 21 Jan 2016
6 answers
2.5K+ views
I have just started crawling the documentation and have not yet run across where to find a list of the various version of the CDN Files

For example, below I would like to find a page on the site that list the various versions...


    <!-- <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />-->
    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" />

    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" />

    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css" rel="stylesheet" />

    <script src="cordova.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
Alex Gyoshev
Telerik team
 answered on 21 Jan 2016
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
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
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?