Questions on Kendo UI for jQuery Forum

6 answers

619 views

JSON chart

Hi, Im trying to bind a chart with json, but I cant get it to work.
Here is how the json looks like.

{"d":{"__type":"test.PersonSearchSummary","TotalSearches":300,"Hits":250,"Alternates":30,"Misses":20}}

Here is how i try to create the chart

function createChart() {
                    $("#chart").kendoChart({
                        theme: "kendo",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        seriesDefaults: {
                            type: "column",
                            stack: true
 
                        },
                        dataSource: {
                            transport: {
                            read: {
                            type: "POST",
                                contentType: "application/json; charset=utf-8",
                                url: "Default.aspx/GetPersonSearchData",
                                    dataType: "json"
                                }
                            }
                        },
 
                        series: [{
                            name: "PersonSearch",
                            field: "TotalSearches"
                            
                        }, {
                            name: "United States",
                            field: "Hits"
                            
}],
                            valueAxis: {
                            majorUnit: 1000
 
                            },
                            categoryAxis: {
                            field: "test.PersonSearchSummary"
                            },
                            tooltip: {
                                visible: true,
                                format: "{0}%"
                            }
                        });
                    }
 
                    $(document).ready(function() {
                        createChart();
 
                        $(document).bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    });

Data Source

answered on 07 Apr 2014

8 answers

644 views

Back Button and Drawer not working properly

Hello,

I'm having this piece of code to manage the UI:

In my template I have:

<div data-role="layout" data-id="overview-layout" data-platform="ios" data-model="viewModel">

<header data-role="header">

<div data-role="navbar">

<a data-role="backbutton" id="back-button" class="nav-button" data-align="left">Back</a>

<span data-role="view-title"></span>

<a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right" ></a>

</div>

</header>

and then the footer and closing tab.

And in my home page I have this one, rewriting the header:

<div data-role="view" data-layout="overview-layout" data-init="initiate_geolocation()" data-title="Meet My Friends" id="two-drawer-home">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#left-drawer" data-icon="drawer-button" data-align="left"></a>

<span data-role="view-title"></span>

<a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right" ></a>

</div>

</header>

The reason why I'm doing this is I need 2 menus on the home page, but I want to remove one of the left drawer on any other page and display the back button again.
So basically it "almost" works... almost

I'm having 2 difficulties to make it works.

1 - When going to another page From a link from the left or the right drawer, if I want to go back to the previous page by pressing the back button I come back to to the page at the position it was when the drawer is open (totally on the left or the right of the screen to let the drawer be displayed). But the drawer is not display so I just have some blank space left on the side of the screen. Why is the page not re initialized at the correct position ( center of the screen ). It seems like the page is not re initialized at its correct position or that I'm redirected to the drawer page that does not open/display.

2 - When I'm on a different page than the home page, the right drawer does not work at all .. only the back button works. Why ?

Many Thanks

Below is the code of the 2 menus:

<div data-role="drawer" id="left-drawer" style="width: 100px" data-title="What's Up" data-views="['two-drawer-home', '/mobile/m/drawer/two-way-drawers.html']" data-before-show="prevent">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul id="left-drawer-menu">

<li id="LM-available" ><div class="number">0</div>Available Friends</li>

<li id="LM-notified" ><div class="number">0</div>Notified Events</li>

<li id="LM-matched" ><div class="number">0</div>Matches</li>

<li id="LM-invites" ><div class="number">0</div>Invites</li>

</ul>

</div>

<div data-role="drawer" id="right-drawer" style="width: 200px" data-title="Menu" data-position="right" data-views="['two-drawer-home', '/mobile/m/drawer/two-way-drawers.html']" data-before-show="prevent" data-init="checkAvailability">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" id="leftMenuList">

<li data-icon="settings"><a href="#profile">Profil</a></li>

<li data-icon="settings"><a href="#interests">Centers Of Interests</a></li>

<li data-icon="add">Create Event</li>

<li data-icon="add">Search Friends?</li>

<li data-icon="comments">Let's Hang Out Today! <input id="switchAvailable" type="checkbox" data-role="switch" data-change="switchAvailability"></li>

<li data-icon="graph"><a href="#" id="logout">Log Out</a></li>

<hr />

</ul>

</div>

Drawer (Mobile)

answered on 07 Apr 2014

9 answers

510 views

Grid group collapse issue

Hi,

Using Kendo grid I was able to bind data and group by any column. But after grouping, if I want to collapse or expand the grouped data the uisng the arrow next to the group header, this functionality is not working consistently. if it works first time it will not work after refreshing the data on the grid and vice versa.

So you please help on this?

Thanks,
Ephrem

Grid

answered on 07 Apr 2014

2 answers

254 views

Create and add a custom view

Hi,

i would like to create and add a custom view to the scheduler, the view should display 14 days instead of 7 as the "week" view do .
I am quite new in Kendo UI

Thanks in advance,

Patrick

Scheduler

answered on 04 Apr 2014

2 answers

231 views

Create and add a custom view to the scheduler

Hi,

i would like to create and add a custom view to the
scheduler, the view should display 14 days instead of 7 as the "week"
view do .

Thanks in advance,

Patrick

Scheduler

answered on 04 Apr 2014

4 answers

589 views

DropDownList in Partial using DataSource.Read

I have several grids that I use to maintain records in tables. Several of these have a foreign key where I use a DropDownList to allow the user to select a name from the list rather than an ID. I have gotten all of this working great by using your examples. I basically have a UIHint on my property that specifies the partial view to use when editing/adding and item and I have partial views defined.

Like I said, everything is working great if I follow your examples and bind the DropDownLists to a collection in ViewData by using the .BindTo property on the DDL. Now I am trying to get away from using ViewData and I changed it to bind by using DataSource.Read and passing a controller and action but now there are no items in the list when I go to edit. The controller method is getting hit and results are being returned, it just never looks like anything actually gets loaded into the dropdown.

Here is my partial view with the DropDown:

@(

Html.Kendo().DropDownListFor(m => m)

.Name("Department")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetDepartments", "DepartmentMaintenance");

});

})

.DataValueField("DepartmentId")

.DataTextField("DepartmentName")

)

And here is my controller method:

//

// GET: /DepartmentMaintenance/GetDepartments

public ActionResult GetDepartments([DataSourceRequest]

DataSourceRequest request)

{

var bll = new CatalogMaintenanceBll();

var departments = bll.GetDepartmentList(false);

return Json(departments.ToDataSourceResult(request));

}

It is making it into the controller method and departments does have items in it.

Can anyone see anything obviously wrong or know of anything that might cause this behavior?

Thank you!

DropDownList

answered on 04 Apr 2014

1 answer

218 views

Clear/Stop style formatting

Hi,

I have incorporated several custom styles similar to http://demos.telerik.com/kendo-ui/web/editor/styles.html, but the problem is that style continues when the user hits the enter key to start a new line. The editor inserts a <p> tag with a <span style="mystyle"> from currently selected style. This can be seen in the demo above by going to the end of the content, adding a new line of text, selecting a style, and then hitting enter. The only way to "get out" of the style is to go into html view, which I cannot expect my users to do.

In my experience, the best way to use the styles (formatting) option in the editor is to highlight the text and choose the style. After that, the style should no longer apply. Is it possible to tell the editor to stop using a style when the enter key is pressed? Otherwise, would I be able to add a snippet to clear all formatting?

Thank you,
David A.

Editor

answered on 04 Apr 2014

3 answers

79 views

Notifications Templates demo creates blank notifications for some themes

Hello,

The Notifications Templates demo creates blank notifications for the Silver, Uniform and Metro themes. The problem is related to the text color.

Regards,
Holger

Notification

answered on 04 Apr 2014

1 answer

970 views

kendoDropDownList

Hi I am very new to this and need help in kendoDropDownList
I am using kendoDropDownList and as soon as user selects the dropdown item - i need to postback to Controller action method with the appropriate value
ex: if user selects "Test 1", i need to send to controller "4" - how do i do it?
here is my code

        $(document).ready(function () {
            var data = [
                { text: "ALL", value: "-1" },
                { text: "Test 1", value: "4" },
                { text: "Test 2", value: "32" }
            ];

            //var selectedValue = $("#assayTypeIDIndex").val();
            $("#ddlAssayType").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data,
                ignoreCase: false,
                select: onSelect,
                index: 0 // another issue is I cannot set the selectedValue (defined above) here????? if i do it this wouldn't work - only numeric hardcoded value (0 or 1 or 2) will work
            });

            function onSelect(e) {
                var atIdx = e.item.index();
                var atValue = this.dataItem(e.item.index()).value;
                $('#assayTypeIDIndex').val(atIdx);
                $("#assayTypeIDFilter").val(atValue);
                $("#assayTypeIDSearch").val(atValue);
                $(this).closest('form').submit();
            }
thanks in adv...

DropDownList

answered on 04 Apr 2014

1 answer

53 views

Failed on the scroll when some html5 object are embeb

Dear friends,

I´am so happy with phonegap and Kendo UI Mobile.

But i have some problem that i have not found solution from some days ago.

When i insert/embeb some html5 object like a <iframe> <object> <video> ( i´am talking in this moment on a IOS system ) the scroll fails because the element i can put it without scroll, but then all the rest of the window elements scroll ( header and footer ).

I need, evidently, to have all static without scroll , or in some case, only scroll a normal content of the div.

This issue makes imposible open a PDF into my content area, open a video into my content area, or simply open a remote URL on my content area, because always the scroll fails scrolling the header and footer and making bad the app.

Some ideas?

Some code example of my div where i´am trying to insert content:

<div data-role="view" id="2" data-layout="tabstrip-layout">

<div class="prueba">

<iframe></frame>

<video></video>

<object></object>

</div>

Regards

General Discussions