Telerik Forums
Kendo UI for jQuery Forum
1 answer
112 views
Hello Guys,


I have read this post here:
http://www.kendoui.com/forums/kendo-ui-mobile/application/ios-7-safari-button-bar-block-part-of-the-page.aspx
Because I have the same problem : the Safari bar at the bottom which I want to get rid of~.
I have tried the "useNativeScrolling to true", but it's truncating all of my views, even if I add this code:
<div style="height:1000px">
...
</div>

I saw that there was a talk about a bug on Kendo and something was in progress: any news on that?


Regards,
Chris.
Petyo
Telerik team
 answered on 09 Dec 2013
1 answer
85 views
There are 2 major holes in the tab control that need to be fixed:

1. You should be able to set a field that is used when data bound to define which is the selected tab. This is especially important when working with Knockout or MVVM to keep the model clean instead of having to do it manually after binding.

2. There needs to be a field setting that allows you to specify the element per tab that will be used for the content. You need this for example when you have a grid that is getting filtered based on the tab click. Otherwise the grid ends up outside the tab area and looks bad visually because it's not really content.

These are 2 pretty basic things. I'm hoping these can be added to clean up this control.

Thanks!
Kiril Nikolov
Telerik team
 answered on 09 Dec 2013
3 answers
87 views
How do you show the details to the user without needing to be in edit mode?

Like in month view I'm seeing 8-12 characters of the event title...

There doesn't seem to be an event click event to hook into to open a window or something, know what I mean? 
Chris
Top achievements
Rank 1
 answered on 07 Dec 2013
3 answers
294 views
Hi there,

I am a newbee for KendoUI and trying few examples. In the sample application I am trying to develop I have a home page with links to other pages. Since it doesn;t need any Kendo support I created a links using a generic HTML list items and assign links to it. In the target pages I expect to have drawers. But they do not work as expected. 

Home page,

01.<div id="home-view" data-role="view" data-layout="home-layout" >
02.<div class="main-header"  >
03.<div class="logo"><img src="assets/img/rgb_medium.png"></div>
04.</div>
05. 
06.<div class="top-nav">
07.<ul>
08.<li class="active"><a href="#">Home</a></li>
09.<li ><a href="crm_home.html"> Mobile CRM</a></li>
10.<li ><a href="www.google.com"> Mobile Service</a></li>
11.<li ><a href="bar.html"> Sync Data</a></li>
12.<li ><a href="#clear"> Clear Data</a></li>
13.<li ><a href="#about"> About</a></li>
14.<div class="clear"> <div>
15.</ul>  
16.</div
17.<div class="clear"> <div>
18.</div>


The bar.html which is in the same folder has following code in it.

01.<div id="bar" data-role="view">
02.    <p>I am remote view, my ID is "bar", but my relative path is "bar.html"</p>
03.    <p>Swipe to reveal the drawer</p>
04.</div>
05. 
06.    <!-- remote view is listed with its relative path "bar.html", not its ID "bar" -->
07.    <div data-role="drawer" >
08.        <ul data-role="listview">
09.            <li><a href="#foo">Foo</a></li>
10.            <li><a href="#barhtml">Bar</a></li>
11.        </ul>
12.    </div>


This will not show it as a drawer but show everything as a plain html list when I click the Sync Data link in home page. 


But if I add a button to the home page with data-role="button" and put the same link the drawer works like a charm.

In home page ,
1.<div id="foo" >
2.            <a href="bar.html" data-role="button">Load remote View</a>
3. </div>



So it seems I have to have the links in the source page according to a Kendo convention to get the drawer working in the target page. What should I do to achieve what I expect.

In more general terms, is it a bad practice to mix generic HTML and Kendo UI convensions?


Thanks in advance,
Ish
Asat
Top achievements
Rank 1
 answered on 07 Dec 2013
2 answers
109 views
Dear Kendo Team,
I keep the settings of the datasource of each grid , in database ,(Paging,Sorting,Filtering,Aggregate and Grouping) as it treats server-side and this is more confortable for the client.
Grouping works as expected when is fired with drag&drop event, but i doesn't work when I send the grouping option without event triggered....
So the question is : how can I emulate this event in order to retrieve the grid grouping following the settings send... (code below, the parameterMap function used)

function paramCustomFunc(options, operation) {
    var KendoOptionGrid = FormatGridOptions(options);//format options
    var userSettings = null;
    if (ArrayFistLoad == null)
        ArrayFistLoad = new Array();
    if (ArrayFistLoad[ActiveGrid.Name] == null) {//Ensure that it first time that datasource read is called in order to apply the user custom settings
        if (PreferenceUser != null) {
            var data = PreferenceUser.data.Data[0];//retrieve data preference
            for (var i = 0; i < data.GridSettings.length; i++) {
                if (data.GridSettings[i].Datagrid == ActiveGrid.Name) {//page can contain more than 1 datagrid, so find the good settings related to datagrid
                    userSettings = data.GridSettings[i];
                    break;
                }
            }
        }
 
    }
    if (userSettings != null) {
 //if it first time and i've got specific settings, apply it 
        if(userSettings.Paging != null){
            KendoOptionGrid.Paging.page userSettings.Paging.page;
            KendoOptionGrid.Paging.skip = userSettings.Paging.skip;
            KendoOptionGrid.Paging.take = userSettings.Paging.take;
            KendoOptionGrid.Paging.pageSize = userSettings.Paging.take;
        }
        KendoOptionGrid.Grouping =  userSettings.Grouping;
        KendoOptionGrid.Filtering = userSettings.Filtering;
        KendoOptionGrid.Sorting = userSettings.Sorting;
        KendoOptionGrid.Aggregates = userSettings.Aggregates;
         
    }
    ArrayFistLoad[ActiveGrid.Name] = 1;
    return JSON.stringify({ optionGrid: KendoOptionGrid, operation: operation });
}
Thanks for your answer.
Best regards
HUA
Top achievements
Rank 1
 answered on 06 Dec 2013
5 answers
202 views
I'd like to use a listview to display the property name value pairs in a listview format.   Given the nice auto formatting of <label><input /></label> structure of splitting each cell... how would one do that with a single object?
Alexander Valchev
Telerik team
 answered on 06 Dec 2013
5 answers
173 views
Hello,

Does Datepicker depends on JQuery version? I have both JQuery-1.8.2 and jQuery-2.0.3 in my Scripts folder. Please see below how it is referenced in BundleConfig.cs and _Layout.cshtml. However, the DatePicker does not show up and it's giving an error for the Date format. Please suggest.

BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/site").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/site.js"
));

undles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common.min.css",
"~/Content/kendo/kendo.default.min.css"));

_Layout.cshtml
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
Steve
Top achievements
Rank 1
 answered on 06 Dec 2013
8 answers
347 views
Kendo version v2013.3.1119

I have two tooltip types which are appearing on two different sets of sparkline charts. I cant work why they are one way for one and another way for the other set. They charts are displaying using the mvvm patten and pretty much copies of each other apart from the using a different 'field' scope.

1. The common ones are displaying a tooltip in more of a table format (to n amount of series in in the sparkline) while hovering the mouse over the plane:
---------------------------------------------------
| series name  | custom template  |
| series name  | custom template  |
---------------------------------------------------
^ the only part of the template i provide is for the custom template. This is easy to use on hovering over, and on tablet as one doesn't have to be precise on hovering or clicking on the series to see the values along the axis.


2. The second (more simple) type of tooltip im getting is more like those found on any of the chart tooltips. But are much harder show as it requires hovering over the series values rather than anywhere along the plane.
----------------------------
| custom template |
----------------------------
^ missing the grid like pattern, and series name has gone walkies, and will only show one series at a time. This makes it hard to compare the many series values together.
This is a pain for tablet use however as selecting that 1px line (of a 40px height) on the sparkline is a frustrating challenge.


Can i ask what is driving its choice about using the two tooltip styles? And then be able to compel it to do what is most appropriate for the scenario.

To me these are pretty much identical, first the sparkline displaying the grid style tooltop:
<div data-role="sparkline"
    data-series="[{ 'name': 'Orders', 'type': 'column', 'field': 'Combined.OrderCount' }]"
    data-tooltip="{ template: $('#rangeTooltipTemplate').html() }"
    data-bind="source: dataSource">
</div>
@using (Html.BeginScripts("Daily.Range.Order.Count"))
{
    <script type="text/html" id="rangeTooltipTemplate">
        <div>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</div>
        <div>Count: #: value #</div>
    </script>
}

Second the one which is displaying the more simple tooltip. My eyes have pretty much given up on the what is different between the two. The data & schema going into both are identical. The kendo data source is effectively equal and only describes the Date field as a date. There would be different aggregates depending on the page loading:
<div data-role="sparkline"
    data-theme="bootstrap"
    data-series="[{ 'name': 'Out the door', 'type': 'line', 'field': 'Performance.AvgOutTheDoor' }]"
    data-tooltip="{ template: $('#PerformanceToolTipOutTheDoor').html() }"
    data-bind="source: dataSource, visible: showCharts">
</div>
@using (Html.BeginScripts("Performance.Range.OutDoorTime", Area.Foot))
{
    <script id="PerformanceToolTipOutTheDoor" type="text/template">
        <div>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</div>
        <div>Out the door: #: value #</div>
    </script>
}
Any ideas?

Thanks,
Matt
Matt
Top achievements
Rank 1
 answered on 06 Dec 2013
2 answers
401 views
Hi!

I have two grids (A,B).
When I select an item in grid A, details should be displayed in grid B.

Grid A contains product groups like "furniture". There are around 300 groups display in grid A.
Grid B contains the actual products associted with this group (e.g chair, table, ...). There are 10-50 product in each group.
Im using the change event on grid A to get the selected row and will then reload the datasource for grid B.
Basically it works but I see all propertys of product in grid B. I've specified the columns I'd like to display. (please see attached screenshot).
1. What I'm doing wrong?
2. What is the appropriate way to do this? Note: I can't use "client detail templates" in grid A.

Here is my code:
Grid A:
@(Html.Kendo().Grid<LFG.Model.Domain.ArticleGroup>(Model.ArticleGroups)
                    .Name("groupsGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.ID);
                        columns.Bound(o => o.GroupKey);
                        columns.Bound(o => o.Description);
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Selectable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(LFG.Web.Constants.GridPageSize)
                        .Events(events => events.Error("grid_error_handler"))
                        .Model(model =>
                        {
                            model.Id(p => p.ID);
                        })
                        .ServerOperation(false)
                    )
                    .Events(e => e.Change("onRowSelect"))
                )
Grid B:
@(Html.Kendo().Grid<LFG.Model.Domain.Article>()
                    .Name("articlesGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.ID);
                        columns.Bound(o => o.Description);
                        columns.Bound(o => o.ProductLine);
                        columns.Bound(o => o.Age);
                        columns.Bound(o => o.Approval);
                        columns.Bound(o => o.Stockpile);
                        columns.Bound(o => o.Ordered);
                        columns.Bound(o => o.Certificate);
                        columns.Bound(o => o.ArtNr);
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Selectable()
                    .DataSource(dataSource => dataSource
                        .Server()
                        .PageSize(LFG.Web.Constants.GridPageSize)
                        .Model(model =>
                        {
                            model.Id(p => p.ID);
                        })
                    )
                )
Event:
function onRowSelect(e) {
        var row = this.select();
        var id = row[0].childNodes[0].textContent;
        console.log("RowSelect - ID: " + id);
        var grid = $("#articlesGrid");
        if (grid) {
            grid.kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/Shared/GetArticlesByGroup?id=" + id
                    }
                }
            });
            grid.data("kendoGrid").dataSource.read();
        }
    }

KR
Smart Software
Vladimir Iliev
Telerik team
 answered on 06 Dec 2013
6 answers
92 views
I'm using the editor control in conjunction with Twitter Bootstrap for layout. The format dropsown is fine on page load but after it is clicked once to set text to be a H2 for example the dropdown list collapses to a narrow list where you can now longer read the options.

Is there a CSS fix I can apply to either kendoui or boostrap to prevent this happening?
Thanks,

Mark
Iliana Dyankova
Telerik team
 answered on 06 Dec 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)
SPA
Filter
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
OrgChart
TextBox
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
Popover
DockManager
FloatingActionButton
TaskBoard
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
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?