Questions on Kendo UI for jQuery Forum

2 answers

348 views

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

151 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

159 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

179 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

242 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

1 answer

396 views

Minimum column width for dynamic number of columns

Hi, I would like to know how to set the minimum column width for a dynamic number of categories for a stacked bar chart.

The problem is that when the chart is resized below a certain height then the category axis labels become bunched together and the bar widths become smaller than the series label text therefore the text no longer fit inside the bars, see attached image.

The chart is resized via the splitter.

Setting the gap and spacing properties only seems to work if you have a chart with a fixed amount columns, not columns that could be from 0 - n.

Effectively the minimum bar width should not be less than the size of the font used for the series labels.

I have tried preventing the chart from further reducing in height base on current height / number of columns, but this solution is glitchy depending on how much or how quick the splitter is moved.

How else can I set the minimum bar widths or reliably prevent the chart from resizing based on the current chart dimension and number of columns?

Andy

Charts

answered on 10 Jul 2014

2 answers

117 views

[Solved] kendo.data.Model can't have keys with periods in them

When a JavaScript Object with keys that contain periods are used to create a Model, Model.set throws an error when trying to set the offending keys. Model internally does something like a "d." + key + "=value;" which would evaluate to "d.abc.def=value;" if the key was 'abc.def'. What it needs to evaluate to is "d['" + key + "']=value;" which would evaluate to "d['abc.def']=value;"

http://trykendoui.telerik.com/aSOY

Data Source

answered on 10 Jul 2014

3 answers

276 views

Frozen Columns with Initialization from Table (Column.Locked)

I want to do what is shown here: http://demos.telerik.com/kendo-ui/grid/frozen-columns

But do it from table that already exists in the html. The problem is that I never know how many columns or what will be in the table, just that I need the first column to be locked. Is this possible?

Grid

answered on 10 Jul 2014

1 answer

209 views

Treeview checked checkboxes

Hello,

I integrated a treeview control with checkboxes and a button in my MVC view. If the button is clicked, all checked items should be processed.
However the array which should contain the id value is always null.

Hopefully somebody can give me an advise what I`am doing wrong :-)...

Partial View:

(Html.Kendo().TreeView()

.Name("Treeview")

.DataTextField("WebName")

.Checkboxes(checkBox => checkBox

.CheckChildren(true)

.Enabled(true)

.Name("checkedItems[]")

)

.DataSource(dataSource => dataSource

.Model(model => model

.Id("WebUrl")

.HasChildren("HasChildren")

)

.Read(read => read

.Action("WebsRead", "Home")

)

Home:

public ActionResult FillGrid(string[] checkedItems)

{

//Do something

return View();

}

TreeView

answered on 10 Jul 2014

3 answers

181 views

Window content area not rendering correctly

In KendoUI 2013.3.1119 the rendering of windows where the content contained <p> tags worked fine. After an upgrade to version 2014.1.416 the window content area is rendered such that at the bottom of the window it overlaps the window border and shadow if there is <p> tag in the window content. See attached screenshot.

Tested in Google Chrome 32.0.1700.107 m. The problem also occurs in IE 11.
jQuery 1.11.0

Code to reproduce problem:

$('<div id=\'window\'></div>').appendTo($(document.body)).kendoWindow({

title : 'Window Title',

width : 300,

height : 300,

modal : true,

content : {

template : '<p>Test</p>'

},

});

Any assistance would be appreciated.

Regards,

Andrew

Window