Telerik Forums
Kendo UI for jQuery Forum
3 answers
86 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
288 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
108 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
198 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
170 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
328 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
397 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
91 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
3 answers
130 views
https://github.com/telerik/kendo-mobile-music-store

I've downloaded this repo locally to play with things a bit, and noticed that the error modal window has a strange behavior. It opens for just a split second, and then immediately closes itself.
Alexander Valchev
Telerik team
 answered on 06 Dec 2013
1 answer
228 views
Is there a way to clear all markers from a map or delete a single marker?

Iliana Dyankova
Telerik team
 answered on 06 Dec 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?