Questions on Kendo UI for jQuery Forum

3 answers

136 views

Chart navigator

I'm having trouble getting the navigator to display.

See below code that should run in the dojo.

I've also tried this from the stock chart example:

navigator: {

series: {

type: "area",

field: "value"

},

select: {

from: "7/6/2014",

to: "7/7/2014"

}

},

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/financial/index">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />

<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content">

<div id="chart"></div>

</div>

<script>

var categories = ["7/5/2014", "7/6/2014", "7/7/2014", "7/8/2014"];

var initialData = [{ value: 33, date: "7/5/2014" }, { value: 20, date: "7/6/2014" }, { value: 15, date: "7/7/2014" }, { value: 21, date: "7/8/2014" },

{ value: 5, date: "7/5/2014" }, { value: 3, date: "7/6/2014" }, null, { value: 25, date: "7/8/2014" },

{ value: 1, date: "7/5/2014" }, { value: 1, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 1, date: "7/8/2014" },

{ value: 10, date: "7/5/2014" }, { value: 10, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 7, date: "7/8/2014" },

]

var initialSeries = [{

name: "Product Nuggets",

data: [{ value: 33, date: "7/5/2014" }, { value: 20, date: "7/6/2014" }, { value: 15, date: "7/7/2014" }, { value: 21, date: "7/8/2014" }],

color: "#f43c42"

},

{

name: "Product Costco Colombian Blend",

data: [{ value: 5, date: "7/5/2014" }, { value: 3, date: "7/6/2014" }, { value: 3, date: "7/6/2014" }, { value: 25, date: "7/8/2014" }],

color: "#f3ac32"

}, {

name: "Station Line",

data: [{ value: 1, date: "7/5/2014" }, { value: 1, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 1, date: "7/8/2014" }],

color: "#b8b8b8"

}, {

name: "Blox 130514000002",

data: [{ value: 10, date: "7/5/2014" }, { value: 10, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 7, date: "7/8/2014" }],

color: "#bb6e36"

}];

function createChart() {

$("#chart").kendoChart({

title: {

text: "Recall"

},

legend: {

visible: true,

position: "left"

},

seriesDefaults: {

type: "line",

missingValues: "gap",

//stack: {

// type: "1"

//}

},

series: initialSeries,

valueAxis: {

line: {

visible: false

},

minorGridLines: {

visible: true

}

},

dateField: "date",

dataSource: { data: initialData },

categoryAxis: {

categories: categories,

majorGridLines: {

visible: false

}

},

navigator: {

series: [

{ field: "value", type: "area"}

]

},

tooltip: {

visible: true,

shared: true,

format: "N0"

//template: "#= series.name #: #= value #"

}

});

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

</script>

</div>

</body>

</html>

Charts

answered on 10 Jul 2014

5 answers

217 views

Kendo grid issue in iPAD

Hi Team,

kendo Grid not showing all records in last page in iPad. Issue replicating in Demo site also. URL: http://demos.telerik.com/kendo-ui/web/grid/index.html

Steps to reproduce: 1. Load the above URL.2. Arrange the items per page to ‘20’3. Click on the last but one pagination link (ex: 4 in above URL) and scroll down to the bottom of the grid.4. Click on the pagination link for the last page. Observe blank grid or grid loading with only few records. If we tap on the grid/try to scroll up on the grid then it will show all the records.

thanks
Sekhar.

Grid

answered on 10 Jul 2014

1 answer

109 views

conversion of kendo by clicking on button

Hi All,

I want to display kendo multi select in each row of a grid which has 2000 records, somehow page gets hanged.
I log an SO : http://stackoverflow.com/questions/24607953/kendo-multi-select-initialization-for-two-thousand-records

I m using JgGrid to do populate the grid. I there any way to restrict the page from hanging or to increase the performance..

Any help is deeply appreciated..

MultiSelect

answered on 10 Jul 2014

2 answers

154 views

Accessing Shapes

Hi,

Is there a way to access multiple shapes on the mouse over event? Using the demo below, I'd like to highlight Alaska and the continental US when hovering over one of them.

http://demos.telerik.com/kendo-ui/map/geojson

Thanks,
Mike

Map

answered on 10 Jul 2014

2 answers

252 views

Styling checkbox and radiobutton. Whether?

Whether you plan to add in upcoming versions of styling and functionality elements such as Checkbox and Radiobutton?

General Discussions

answered on 10 Jul 2014

2 answers

340 views

Sorting a Grid bound to array...

Is it possible to set the sort of a grid that is bound to a simple array ? I know I could make the array into a dataSource and add sorting that way, but this array is a child of an object which the entire template is bound to, so I use the value bindings for a grid to the child array.

See jsbin sample http://jsbin.com/haciba/1/edit

Do I need to sort this data ahead of time, before I create the observable, or is there a way to declaratively set the sorting on the grid ?

Thanks,

Robin

MVVM

answered on 10 Jul 2014

1 answer

142 views

Grid with Foreign Key Column Displaying Blank After Creation

Hi, my code is the following

VIEW

@(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view

.Name("Usuarios")

.AutoBind(true)

.Columns(columns =>

{

columns.Bound(p => p.Id).Visible(false);

columns.Bound(p => p.Nombre).Width(300);

columns.Bound(p => p.Apellido1).Width(300);

columns.Bound(p => p.Apellido2).Width(300);

columns.Bound(p => p.Codusuario).Width(300);

columns.Bound(p => p.Fechacambiopassword).Width(300);

columns.Bound(p => p.Idperfil).Width(300);

columns.ForeignKey(p => p.Idperfil, (System.Collections.IEnumerable)ViewBag.Perfiles, "Id", "Descripcion").Width(300).EditorTemplateName("PerfilesDropDownList");

columns.Command(command => { command.Edit(); command.Custom("Eliminar").Click("grid_remove"); }).Width(200);

})

.ToolBar(commands => commands.Create())

.Sortable(s => s.SortMode(GridSortMode.SingleColumn))

.Filterable()

.Pageable()

.Scrollable(scroll => scroll.Height("auto"))

.Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false).TemplateName("UsuariosEdicion").Window(w => w.Title("Editar Usuario").Width(700)))

.DataSource(dataSource => dataSource

.Ajax()

.Sort(sort => sort.Add("Apellido1").Ascending())

.Model(model => model.Id(p => p.Id))

.Create(create => create.Action("InsertarUsuario", "Account"))

.Read(read => read.Action("ObtenerUsuarios", "Account").Data("getAdditionalData"))

.Update(update => update.Action("ModificarUsuario", "Account"))

.Destroy(destroy => destroy.Action("EliminarPerfil", "Account"))

.Events(e => e.RequestStart("grid_mostrarspinner").RequestEnd("grid_ocultarspinner").Error("error"))

.PageSize(5)

)

.Events(e => e.Remove("grid_remove").Edit("editar"))

)

Controller

public async Task<JsonResult> InsertarUsuario([DataSourceRequest] DataSourceRequest request, Usuarios usuario)

{

if (ModelState.IsValid)

{

Error error = await ServicioSeguridad.Current.InsertarUsuarioAsync(usuario);

}

return Json(new[] { usuario }.ToDataSourceResult(request, this.ModelState));

}

public async Task<JsonResult> ObtenerUsuarios([ModelBinder(typeof(MyDataSourceRequestBinder))] MyDataSourceRequest request, FiltroBusquedaUsuarios filtrousuario)

{

MyDataSourceRequest req = new MyDataSourceRequest

{

Page = request.Page,

Aggregates = request.Aggregates,

Filter = request.Filter,

PageSize = request.PageSize,

Group = request.Group,

Sort = request.Sort

};

MyDataSourceResult usuarios = await ServicioSeguridad.Current.ObtenerUsuariosFiltrosAsync(req, filtrousuario, "");

//Debug.WriteLine("total:" + usuarios.Total.ToString());

DataSourceResult resultado = new DataSourceResult

{

Data = usuarios.Data,

Total = usuarios.Total,

AggregateResults =null,

Errors = null

};

//Debug.WriteLine("Data:" + ((List<Usuarios>)resultado.Data).Count.ToString());

Parse p = new Parse();

DataSourceRequest requestKendo = p.ParseRequest(request.Page, request.PageSize, request.Sort, request.Group, request.Filter, request.Aggregates);

//DataSourceResult resultado = usuarios.ToDataSourceResult(requestKendo);

return Json(resultado, JsonRequestBehavior.AllowGet);

}

JAVASCRIPT

function rellenargrid() {

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

//llama al read del grid

grid.dataSource.fetch();

}

This code javascript is called from a button search.

When I insert a new record and press the button that calls the search function fetch of datagrid cell shows foreignkey column blank, when press F5 in the browser correctly displays the value in cell

Thanks in Advance

Grid

answered on 10 Jul 2014

2 answers

153 views

Allowing customization

Hi
Presently we use a date picker which allows for heavy customization, how much can the Kendo datepicker be customized?

We have the concept of low and high dates, e.g. someone may have a job that runs from today to highdate (forever), or from lowdate to today (hes always been doing it but it changes today). We use special dates to accommodate this

Our existing datepicker allows us to have low and high date in the footer, I see the Kendo datepicker has a footer template but it doesn't seem like you can put html in there as its encoded?

Also where kendo has " < Jan > " in the header we have " << < Jan > >> " where the '<<' allows for changing the year. Can this be done with Kendo?

thanks

DatePicker

answered on 10 Jul 2014

8 answers

169 views

[Solved] Views within forms

Hi
Can you explain whats happening here please?

http://trykendoui.telerik.com/eMUf/2

In short I have a web page with a form which holds everything, I want something similar for mobile, a default view and then another one within a form.

Here it just flashes, I assume it's crashing in the background?

thanks

View

answered on 10 Jul 2014

1 answer

233 views

mailto: or tel: in href of actionssheet don't works

Hello,

i try following actionsheet in my mobile web ...

<ul data-role="actionsheet" id="listViewTeamActions" data-popup='{"direction": "left"}'>
<li><a href="mailto:1234@456.de">MailTo</a></li>
<li><a href="tel:1234567">Call</a></li>
</ul>

Later i will set href dynamically using jQuery.

The links doesn't work. If i click on one of them the actionsheet close ... but nothing else happened.

How do use mailto: and tel: links in actionsheet ?

Regards

Juergen

ActionSheet

answered on 10 Jul 2014