Questions on Kendo UI for jQuery Forum

1 answer

289 views

I have a tab strip that links to two views (snippet 1). What I would like to do is have a way to initially select the second tab and its corresponding view.

I tried using the selectedIndex property (snippet 2), but it seems to always display whichever view I define first in code - I can change the highlighted tab, but what I really want to do is change the view that is displayed.

I have tried various versions of using the application's navigate method from body.onload, but that seems to work poorly.

Any ideas?

(Snippet 1)

        <div data-role="footer">
            <div data-role="tabstrip" id="tabstrip">
                <a href="#tabstrip-viewnotes" data-icon="recents">View Notes</a>
                <a href="#tabstrip-addnote" data-icon="add">Add Note</a>
            </div>
        </div>

(Snippet 2)

        $("#tabstrip").kendoMobileTabStrip({
                    selectedIndex: 1
                });

TabStrip (Mobile)

answered on 29 Jan 2013

1 answer

86 views

Back button doesn't play nice with other buttons

We would like to have a header that has a back button and home button next to each other. Unfortunately, when we include a button next to the back button and run our app on a PC in Firefox or IE, the home button displays half a line lower than it should.

It looks right on the mobile devices that I have tested, but it would be kinda nice if it looked right on the PC too - it's nice to be able to test/demo the app on a PC.

    <div data-role="view" data-title="Test page">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="left" data-role="backbutton" class="nav-button" href="#index">Back</a>
            <a data-align="left" data-role="button" class="nav-button" href="default.aspx" data-rel="external" data-icon="home"></a>
        </div>
    </header>

Button (Mobile)

answered on 29 Jan 2013

5 answers

163 views

Tablet View Problem

I am using Kendo UI mobile, Phone Gap and Icenium for developing Mobile app.

When I running my app in Iphone and Iphone5 simulator, it's working fine.but when I try on Ipad simulator, the UI will be same as smartphone UI .

I read that Kendo UI mobile will automatically detect and change to the Device native look (http://demos.kendoui.com/mobile/simulator).

Should I include css media(-webkit-device-pixel-ratio:2) for IPad? or anything more?

Guide me to know the issue...

General Discussions

answered on 29 Jan 2013

1 answer

263 views

[Solved] SQL Server / Kendo UI

I have a small application that returns SQL Server data to a cshtml page and populates a chart.

But, the code I used does not seem like the best solution and I was wondering if you could take a look at my code and give me an idea of a better way?

My code is below.

Model:

public class LoginHistory

{

public Int32 LoginHistoryID { set; get; }

public Decimal LoginDuration { set; get; }

public string LoginApp { set; get; }

public DateTime LoginDateTime { set; get; }

public string LoginUser { set; get; }

public string LoginLocation { set; get; }

public string LoginEnvironment { set; get; }

}

CSHTML:

@model IEnumerable<AllanTest01.Models.LoginHistory>

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Index</title>

<link rel="stylesheet" href="~/Content/kendo.common.min.css">

<link rel="stylesheet" href="~/Content/kendo.default.min.css">

<link href="~/Content/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery.min.js"></script>

<script src="~/Scripts/kendo.all.min.js"></script>

<script src="~/Scripts/kendo.aspnetmvc.min.js"></script>

</head>

<body>

<div>

Login History Charts 01

<br /><br />

filters_here

<br />

Date Range: @(Html.Kendo().DateTimePicker().Name("StartDateTime")) - @(Html.Kendo().DateTimePicker().Name("EndDateTime"))

<br /><br />

<table style="width:100%;">

<tr>

@* loop thru the apps *@

@foreach (var item in Model)

{

<td>

@(Html.Kendo().Chart()

.Name(item.LoginApp.ToString().Replace(" ", "_"))

.Title(item.LoginApp)

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.Series(series =>

{

series.Column(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");

series.Column(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");

})

.CategoryAxis(axis => axis

.Categories("2005", "2006", "2007", "2008", "2009")

)

.ValueAxis(axis => axis

.Numeric().Labels(labels => labels.Format("{0}%"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}%")

)

.HtmlAttributes(new { style = "width:300px;" })

)

</td>

}

</tr>

</table>

@foreach (var item in Model)

{

<p

>@item.LoginHistoryID | @item.LoginDuration | @item.LoginApp | @item.LoginDateTime | @item.LoginUser | @item.LoginLocation</

p>

}

</div>

</body>

</html>

HomeController.cs:

using AllanTest01.Models;

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace AllanTest01.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

public ActionResult Index()

{

var items = GetLoginHistory();

var newItems = (from p in items

select new LoginHistory

{

LoginHistoryID = p.Field<Int32>("LoginHistoryID"),

LoginDuration = p.Field<Decimal>("LoginDuration"),

LoginApp = p.Field<String>("LoginApp"),

LoginDateTime = p.Field<DateTime>("LoginDateTime"),

LoginUser = p.Field<String>("LoginUser"),

LoginLocation = p.Field<String>("LoginLocation")

}).ToList();

return View(newItems);

}

private List<DataRow> GetLoginHistory()

{

List<DataRow> list = null;

string srtQry = @"Select LoginHistoryID, LoginDuration, LoginApp, LoginDateTime, LoginUser, LoginLocation, LoginEnvironment

From LoginHistories";

string connString = "Data Source=.\\sqlexpress;Initial Catalog=AllanTest;Integrated Security=True";

using (SqlConnection conn = new SqlConnection(connString))

{

using (SqlCommand objCommand = new SqlCommand(srtQry, conn))

{

objCommand.CommandType = CommandType.Text;

DataTable dt = new DataTable();

SqlDataAdapter adp = new SqlDataAdapter(objCommand);

conn.Open();

adp.Fill(dt);

if (dt != null)

{

list = dt.AsEnumerable().ToList();

}

return list;

}

Charts

answered on 29 Jan 2013

3 answers

1.8K+ views

Customize Update/cancel button in popup edit mode

Hi,

Is there a way to customize buttons in the grid popup editmode?

I have looked through code for creating the popup window and it seems that the buttons are appended regardless to the html before creating the window.
ie.:
html += that._createButton("update") + that._createButton("canceledit");
html += '</div></div>';

I want to change to position, icons and text but keeping the functionality.

I tried changing content on open event, but this seems not to be the best approach.
i.e:

 open: function (e)
        {
          // TODO: fikse knapper: 
          // debugger;
          var content = $(e.sender.content());
          content.find(".popup-fieldset-wrapper").append(content.find(".k-button"));
          content.find(".k-button").wrapAll("<div class='buttons' style='float: right;'/>");
          content.find(".k-button.k-grid-update").addClass("save");
          content.find(".k-button.k-grid-cancel").addClass("cancel");
          e.sender.content(content); //at first i was converting content back to html(), but seems much better when just putting the jQuery object into content. 
          //          e.sender.center();
        }

However this method looses the mvvm binding and the widgets looses its functionality!
Any help appreciated.

Grid

answered on 29 Jan 2013

1 answer

327 views

Pager with next/prev text, no icons.

I cannot figure out how to (w/out hacking at the css styles), configure the pager to use the text rather than the icon/button images for the next and previous buttons.

The following is used to setup the messages, which I can inspect the elements and see that the text is updated correctly, but how do I make it so that the pager uses the text rather than the icons?

messages: {
display: "{0}-{1} of {2} total accounts",
empty: "No accounts to display",
first: "First",
last: "Last",
next: "Next",
previous: "Previous"
}

Thanks

Grid

answered on 29 Jan 2013

1 answer

120 views

Sliding Panes

I would like to know if you have any plans to extend the splitter control to include the "Sliding Panes" functionality like you have in the ASP.NET AJAX controls (http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_clicktoopen/defaultcs.aspx)

Thx
Sagi

Splitter

answered on 29 Jan 2013

1 answer

162 views

Problems with grid in ie7 and ie8

I have two issues when running the grid in ie7 and ie8 compatibility mode:

Paging does not work. After paging I get the js errors shown in the attached screen shot.
The Grid cells collapse down and the data is abbreviated or not shown and is out of alignment with the headers.

Here’s my config:

#Grids{

width: 100%;

height:400px;

overflow-y: auto;

overflow-x: auto;

border:1px solid #00215C;

}

</div>

var loadMoneyOrderDetailsGrid = function(details){

$("#gridMoneyOrders").show().kendoGrid({

dataSource: {

data: details,

pageSize: 10,

schema: {

model: {

fields: {

FacilityName: { type: "string" },

MoneyOrderID: { type: "string" },

IssueID: { type: "string" },

ClerkID: { type: "string" },

IssueDateTime: { type: "date" },

SaleAmount: { type: "string" },

PaidAmount: { type: "string" },

ProcessDate: { type: "date" },

SerialNumber: { type: "string" }

}

},

//change: onChange,

selectable: "row",

groupable: false,

sortable: true,

pageable: {

refresh: true,

pageSizes: false

}

,

columns: [ {

field: "FacilityName",

width: 40,

title: "Facility Name"

} , {

field: "MoneyOrderID",

width: 10,

title: "City"

} , {

field: "IssueID",

title: "Issue",

width: 10

}, {

field: "ClerkID",

title: "Clerk",

width: 10

}, {

field: "IssueDateTime",

title: "Issue Date",

width: 20,

format: "{0:MM/dd/yyyy}"

}, {

field: "SaleAmount",

title: "Sale Amount",

format: "{0:$0.00}",

width: 20

}, {

field: "PaidAmount",

title: "Paid Amount",

format: "{0:$0.00}",

width: 20

}, {

field: "ProcessDate",

title: "Process Date",

format: "{0:MM/dd/yyyy}",

width: 20

}, {

field: "SerialNumber",

title: "Serial Number",

width: 20

}

]

});

var grid = $("#gridMoneyOrders").data("kendoGrid");

grid.refresh();

};

Grid

answered on 29 Jan 2013

1 answer

178 views

[Solved] Nested custom type is null

I have a model with preoperty of custom type
It's bound to drop down editor in web grid

$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
.....
fields: {
Site: { validation: { required: true }, editable: true },
}
}
}

columns: [
{
field: "Site",
editor: siteDropDownEditor,
template: "#=Site.SiteName#"
}]

The problem is that when Update hits controller's method nested custom type is null/empty (like in image)
Please advise where is mistake

Grid

answered on 29 Jan 2013

1 answer

366 views

Using append and select

If I append a tab I want to be able to select it by an ID or string instead of index. I tried passing an `id` property to my append data but had no luck. How can I do this?

TabStrip

answered on 29 Jan 2013