Telerik Forums
Kendo UI for jQuery Forum
4 answers
127 views
Hi,

I am lazy loading some data into my chart and wondering how do I create a status message on the chart, similar to http://www.highcharts.com/stock/demo/lazy-loading?

Thanks,
Tonih
Tonih
Top achievements
Rank 1
 answered on 26 Jul 2013
2 answers
1.1K+ views
Hi,

I was wondering what is considered the "best" way to determine if a PanelBarItem is expanded or not? So far what I've been able to come up with is to check the "aria-expanded" property or see if the child <ul> is visible, both of which feel a bit dirty. Is there a better way, or is one of these two methods considered "better" than the other?

For context, I'm retrieving the item to check by using jquery.closest from one of the child items. Example:
function (id) {
  var child = $("#s-list-objectChild-" + id);
  var parent = child.closest("[id^='s-list-object-']");
  if (parent.isExpanded()) // Perform check here
    doSomething();
  else
    doSomethingElse();
}
Thanks,
Jeff
Jeff
Top achievements
Rank 1
 answered on 26 Jul 2013
2 answers
156 views
Hi All,

Can someone point me to the right data- attribute for virtual scrolling on a grid?

This is a the configuration option on the GRID

scrollable.virtual Boolean(default: false)

I have tried the following.

data-scrollable = "virtual"
data-scrollable-virtual="true"
data-scrollable = "virtual = true"

None of these work.  I would like virtual scrolling, but if not supported using data- attributes then can I modify the grid once it is  initialized?

I tested it by making sure the page count was less then the number of items in odata results set.  Fiddler shows the first request being send with the correct top value.

Thanks for any help.

Regards

Richard...
Richard
Top achievements
Rank 1
 answered on 26 Jul 2013
1 answer
839 views
I have been stuck with this problem without much luck. I've gone down multiple paths and done google search but can’t seem to find a solution that works. Any help would be greatly appreciated.
I am using Kendo MVC grid wired up for CRUD.

@model IEnumerable<CustomerModels>
@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
    {
        columns.Bound(Customer => Customer.Name);
        columns.Bound(Customer => Customer.Number);
        columns.Bound(Customer => Customer.Phone);
        columns.Bound(Customer => Customer.DOB).Format("{0:d}").EditorTemplateName("Date");
        columns.Command(command => { command.Edit(); });
    })
                .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)         
                            .Read(read => read.Action("FilterMenuCustomization_Read", "Home"))
                                    .Model(model => { model.Id(c => c.Phone); model.Field(c=>c.DOB);})
                                           .Update(update => update.Action("FilterMenuCustomization_Update", "Home"))
                                   )
                                   
        .Pageable()
        .Sortable()
           )

When i try to edit the date field using Date Picker or even without any change to existing date, If i try to submit It gives me Error message as "DOB is not valid date".
Ex. 25/07/2013
I have included Culture and EditorTemplates as mentioned in some of the solutions i found on internet, But no help.
Any idea as to what i am doing wrong?
  
Petur Subev
Telerik team
 answered on 26 Jul 2013
1 answer
186 views
Does anyone know how to render a hierarchical grids within a View using the same model?  In my example,  the model i'm using "System.Data.DataTable" the main grid should display a list of 'projects' and the sub grid should display correlating 'designs' as a child grid.  I'm using DataTable because each customer could have different columns for their 'projects' and 'designs' in data.. Therefore, I cannot go with the fixed column solution, it MUST be dynamic columns.  When I'm using DataTable the parent grid and the child grid both are displaying the same columns because it's referencing the same model. Here's the code in my view:

    @(Html.Kendo()
        .Grid<System.Data.DataTable>()
        .Name("ProjectGrid")
        .ClientDetailTemplateId("template")
            .Columns(columns =>
            {
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    string strFormat = "", strTitle = column.Caption;
                    if (column.DataType == typeof(System.DateTime))
                        strFormat = "{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}";


                    columns
                        .Bound(column.ColumnName)
                       .Groupable(column.ColumnName != "Id" && column.ColumnName != "AsyncErrorMessage")
                       .Title(strTitle)
                       .Hidden(column.ColumnName == "Id" || column.ColumnName == "AsyncErrorMessage")
                       .Format(strFormat)
                       .Width(200);
                }

            })
        .Pageable(paging=>paging.PageSizes(new int[]{10, 20 , 30, 50} ))
        .Sortable()
        .Navigatable()
        .Filterable()
        .Groupable()
        .Selectable(selectable => selectable
                .Type(GridSelectionType.Row))
        .ColumnMenu()

            .Resizable(resize => resize
                        .Columns(true))
        .DataSource(dataSource => 
            dataSource
                .Ajax()
                    .Model(model =>
                        {
                            foreach (System.Data.DataColumn column in Model.Columns)
                            {
                                model.Field(column.ColumnName, column.DataType);
                            }
                        })
                .Read(read => read.Action("GetProjects", "Designer"))
                .PageSize(20)  
        )        
        .HtmlAttributes(new { style = "height:100%" })
        .Scrollable()

    )


<script id="template" type="text/kendo-tmpl">
@(Html.Kendo()
    .Grid<System.Data.DataTable>()
    .Name("DesignerDesignGrid_#=Id#")
        .Columns(columns =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                string strFormat = "", strTitle = column.Caption;
                if (column.DataType == typeof(System.DateTime))
                    strFormat = "{0:" + System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern + "}";


              columns
                        .Bound(column.ColumnName)
                       .Groupable(column.ColumnName != "Id" && column.ColumnName != "AsyncErrorMessage")
                       .Title(strTitle)
                       .Hidden(column.ColumnName == "Id" || column.ColumnName == "AsyncErrorMessage")
                       .Format(strFormat)
                       .Width(200);
            }
        })
        //.Events(events => events.Change("getSelectedRowId"))
    .DataSource(datasource => datasource
        .Ajax()      
        .Model(model =>
                        {
                            foreach (System.Data.DataColumn column in Model.Columns)
                            {
                                model.Field(column.ColumnName, column.DataType);
                            }
                        })  
        .PageSize(5)
        .Read(read => read
            .Action("GetDesigns", "Designer", new  { projectId = "#=Id#" })))
        .Pageable()
        .Sortable()
        .ToClientTemplate()
    )
    </script>

<script>
    var selected;
    function dataBound() {
        this.expand(this.tbody.find("tr.k-master-row").first());
    }
</script>
Vladimir Iliev
Telerik team
 answered on 26 Jul 2013
1 answer
209 views
Is there a way to set the header template for a grouped listview in the HTML markup similar to the attempt below, which does not work for me?

<ul data-role="listview" data-style="inset" data-type="group" data-auto-bind="false" data-source="firmDataSource" data-template="firmTemplate" header-template="<h2>Letter ${value}</h2>">
</ul>

I have seen examples where the header template can be defined in javascript, but have not seen an example of doing it this way.








Richard
Top achievements
Rank 1
 answered on 26 Jul 2013
9 answers
329 views
There seems to be a pesky problem in this most recent release. It seems to have something to do with some icons on the toolbar collapsing/expanding.

I accept that I may be doing something wrong, or theres some other order I need to be putting the collapsing/expanding tools on the toolbar.

So i'd like some advice, is there a way around this issue?

for instance the unlink doesnt appear (it used to mind you) unless you already have inserted a link into the editor, in which case the tool bar grows.

Is there a way I can arbitrarily say "ok after this many icons, drop down to the next line"?

that way i'd just place all the collapsing ones (especially the createTable one) on a second line by itself


$("#editor").kendoEditor({
    tools: [
     "bold",
     "italic",
     "underline",
     "strikethrough",
            {
                name: "fontName",
                items: [].concat(kendo.ui.Editor.prototype.options.fontName[8], [{ text: "Arial", value: "Arial" }, { text: "Verdana", value: "Verdana" }]),
            },
            {
                name: "fontSize",
                items: [].concat(kendo.ui.Editor.prototype.options.fontSize[0], [{ text: "13px", value: "13px" }, { text: "15px", value: "15px" }])
            },
            "formatting",
            "foreColor",
            "backColor",
            "superscript",
            "subscript",
            "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "justifyFull",
            "insertUnorderedList",
            "insertOrderedList",
            "indent",
            "outdent",
            "createLink",
            "unlink",
            "viewHtml",
            "createTable",
            "addRowAbove",
            "addRowBelow",
            "addColumnLeft",
            "addColumnRight",
            "deleteRow",
            "deleteColumn"]
});
Alex Gyoshev
Telerik team
 answered on 26 Jul 2013
3 answers
135 views
http://docs.kendoui.com/api/mobile/listview#configuration-template

I am using templates, as described in the above link. In the docs is says, "The ListView automatically wraps the template content in <li> tag. Putting a <li> tag inside the template creates invalid nesting of elements."

So how do I add a class or another attribute to the LI item?
Bart
Top achievements
Rank 1
 answered on 26 Jul 2013
0 answers
189 views

Hi,
I created a new Kendo UI for MVC application.
Dropped a KendoTreeview on my layout view.
All is well.
I add the following js code shown below to handle the select event.
When I select a node, I get the error shown in the attached screenshot.
I did some searching on the web, and it suggested that I had the wrong version of Jquery.
I am currently running Kendo 2013.2.716 and jquery 1.9.1. I tried 1.8.2 and 2.0 of jquery but still get the same result.
Any help would be appreciated.

<script type="text/javascript" >
 
    function _LayoutOnLoad()
    {
        $(function ()
        {
            var tv = $("#MainMenu").kendoTreeView(
                {
                    select: OnMainMenuSelect
 
                });
        });
 
 
    }
    function OnMainMenuSelect(e)
    {
        //alert("Selecting: " + this.text(e.node));
        alert("Selecting: " + e.node.contentText);
    }
    </script>
Randy Hompesch
Top achievements
Rank 1
 asked on 26 Jul 2013
1 answer
73 views
Greetings !

We have this grid displaying two "time" columns with corresponding TimePickers. The TimePickers shows up right in edit mode but the values initially loaded from the database aren't displayed... So when the grid appears, the two time columns are empty.

The jobs.php controller returns time values formatted as "HH:mm:ss" so strings comes looking like "17:15:00"... and the Grid must display them without the seconds. "HH:mm"

01.    $("#grid").kendoGrid({
02.        editable:true,
03.        culture:"fr-FR",
04.        dataSource: {
05.            transport: {
06.                read: {
07.                    url: "./jobs.php",
08.                    dataType:"json",
09.                    data:{f_id: f_id, action:"read"}
10.                },
11.                create: {
12.                    url: "./jobs.php",
13.                    dataType:"json",
14.                    data:{f_id: f_id, action:"create"}
15.                },
16.                update: {
17.                    url: "./jobs.php",
18.                    dataType:"json",
19.                    data:{f_id: f_id, action:"update"}
20.                },
21.                destroy: {
22.                    url: "./jobs.php",
23.                    dataType:"json",
24.                    data:{f_id: f_id, action:"destroy"}
25.                }
26.     
27.            },
28.            autoSync: true,
29.            error: function(e) {
30.                alert(e.responseText);
31.            },
32.            schema: {
33.                data: "data",
34.                model:{
35.                    id:"id",
36.                    fields: {  
37.                        id: { editable: false },
38.                        start: {type:"date"/*validation: { required: true}*/ },
39.                        end: { type:"date"/*validation: { required: true}*/ },
40.                    }
41.                }
42.            }
43.        },
44.        columns: [ 
45.                  { field: "start", title:"Start", format: "{0: HH:mm}", editor:  timeEditor},
46.                  { field: "end", title:"End"  , format: "{0: HH:mm}", editor:  timeEditor},
47.                  {
48.                      command: "destroy"
49.                  }]
50.    });
51. 
52.}
53.function timeEditor(container, options) {
54.    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
55.            .appendTo(container)
56.            .kendoTimePicker({
57.                culture: "fr-FR",
58.                interval: "15",
59.                format: "HH:mm",
60.                min: new Date(2013, 6, 24, 0, 0, 0, 0),
61.                max: new Date(2013, 6, 24, 23, 59, 0, 0)
62.            });
63.}
Vladimir Iliev
Telerik team
 answered on 26 Jul 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?