Questions on Kendo UI for jQuery Forum

0 answers

66 views

Can't make it work (the simplest example ever)

Hi there. I've just created the simplest ASP.NET MVC 3 web application I could. It has just one controller, just one view, and all Kendo's prerequisites up and running. Checked that using a simple DatePicker as sugested.

Now, my problems are:

1.- Initially, NO DATA is loaded. The method that retrieves records from the DB is executed without problems, buts data isn't showing on Kendo's grid.

2.- When I click on a column (right now I reduced my example entity to just two attribs, one "FullName" the other one "Email"), data IS coming to grid, but surprisly, it renders in the browser like PLAIN TEXT (!?).

Here's my current controller class code:

/// <summary>

///

/// </summary>

public class NotificacionController : Controller

{

/// <summary>

///

/// </summary>

/// <returns></returns>

public ActionResult Index()

{

return View(CargarEmpleados());

}

/// <summary>

///

/// </summary>

/// <param name="request"></param>

/// <returns></returns>

public ActionResult CargaEmpleados([DataSourceRequest] DataSourceRequest request)

{

return Json(CargarEmpleados().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

/// <summary>

///

/// </summary>

/// <returns></returns>

private static IEnumerable<EmpleadoModel> CargarEmpleados()

{

return EmpleadosGateway.ObtenerEmpleados();

}

And here, markup:

@(Html.Kendo().Grid<Sic.Mvc.Eventos.Models.Base.EmpleadoModel>()

.Name("Grid")

.Columns(columns => {

columns.Bound(e => e.NombreCompleto).Groupable(false).Width(140);

columns.Bound(e => e.Email);

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("CargaEmpleados", "Notificacion"))

)

Last but not least, Layout.cshtml:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/kendo.common.min.css")" rel="Stylesheet" />

<link href="@Url.Content("~/Content/kendo.default.min.css")" rel="Stylesheet" />

<link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="Stylesheet" />

<link href="@Url.Content("~/Content/Header.css")" rel="Stylesheet" />

<link href="@Url.Content("~/Content/Footer.css")" rel="Stylesheet" />

<link href="@Url.Content("~/Content/Site.css")" rel="Stylesheet" />

<link href="@Url.Content("~/Scripts/jquery.min.js")" />

<link href="@Url.Content("~/Scripts/kendo.all.min.js")" /> 

<link href="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")" />

</head>

<body>

<div id="Contenedor">

<div id="header">

@{Html.RenderPartial("_Panel");}

@{Html.RenderPartial("_Reloj");}

</div>

<div id="section">

@RenderBody()

</div>

<div id="footer">

<img src="@Url.Content("~/Content/Images/HTML5.png")" alt="HTML5 compatible" />

</div>

</body>

</html>

Cheers!!

General Discussions

asked on 27 Aug 2012

0 answers

129 views

Custom Command not working

I have seen several posts on this but I haven't found a solution.

My grid has a custom command that points to a javascript function:

$("#history_grid").kendoGrid({

columns: [

{ field: "type", title: "Document Type" },

{ field: "entity", title: "To/From" },

{ field: "date_received", title: "Date Sent/Received" },

{ field: "path", title: " ", template: '<a href="${ path }">Link to file</a>', width: "80px" },

{ command: { name: "ViewFile", text: "ViewFile", click: viewDoc }, title: " ", width: "100px" }

],

scrollable: true,

autobind: false,

dataSource: history_datasource

});

function viewDoc(e) {

e.preventDefault();

alert("Hello, world!");

};

Clicking the custom command button does nothing.
Help?

Grid

asked on 27 Aug 2012

0 answers

86 views

CSS Hover on iPad

I implemented a dashboard view containing Kendo bar charts and Kendo gauges. I added CSS for "hover" to these, and am displaying a upper right hand corner "X" character allowing the user to close a chart out so that they can remove it from their dashboard. All of this works perfectly fine on any desktop browser, OR on Android.

Apple is being the annoying one. The bar charts work fine, however the gauge does not. The hover event does not work for this. After some online research I found that Apple had remove hover from the supported CSS for their mobile devices. OK, that answers that, but why on earth do the bar charts work? How can I fix this behavior?

[EDIT] - Now that I think about it, the bar charts have tooltips on hover. So you guys must have fixed the hover behavior for the iPad. Can anything be done for the gauges?

LinearGauge

asked on 27 Aug 2012

2 answers

182 views

how to open the window at specified location

how to open the window at specified location,
At the bottom，In the lower right corner。。。
I do not want to open at center ,
how do I?

Window

answered on 27 Aug 2012

3 answers

579 views

Intellisense in Visual Studio

Just like for JQuery there is a Visual Studio intellisense file called Jquery-1.7.2.-vsdoc.js is there an equivalent for kendo UI and kendo UI mobile? If not that would be very useful while programming day-to-day.

Also an API like http://api.jquery.com would be real helpful in finding about different things.

General Discussions

answered on 27 Aug 2012

2 answers

238 views

Grid problem

Hi everyone!
First i congratulate the team of Kendo UI for this tool so good for web developers, well let's get

I have a problem with a Grid with inline editing option enabled, the problem is that the button for add a new row doesn't work and i don't know what is the way for add,edit and delete rows, also i want to know what the variable that receives php from grid.

thanks in advanced

This is the code

 
$(function() {
    kendo.culture("es-ES");
    var grid = $("#grid").kendoGrid({dataSource: {transport: {read: "datos_grid.php",create: {url: "datos_grid.php",type: "POST"},parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)}
                    }
                }},schema: {data: "data",total: function(result) {
                    var data = this.data(result);
                    return data ? data.length : 0
                },model: {id: "id",fields: {id: {validation: {required: true}},user_id: {validation: {required: true}},purchase_date: {validation: {required: true},type: "date"}}}},pageSize: 5,autoSync: true,batch: true},columns: [{title: "ID",field: "id",type: "text"}, {title: "Id Usuario",field: "user_id",type: "text"}, {title: "Fecha",field: "purchase_date",format: "{0:dd/MM/yyyy}"}, {command: ["edit", "destroy"],title: "&nbsp;",width: "210px"}],pageable: {refresh: true,pageSizes: 5},toolbar: ["create", {template: kendo.template($("#template").html())}],editable: "inline"});
    $("#category").keyup(function() {
        var value = $(this).val();
        if (value) {
            grid.data("kendoGrid").dataSource.filter({logic: "or",filters: [{field: "id",operator: "contains",value: value}, {field: "user_id",operator: "contains",value: value}]})
        } else {
            grid.data("kendoGrid").dataSource.filter({})
        }
    })
});

Grid

answered on 27 Aug 2012

1 answer

181 views

Sort Icon with additional controls in column header

We have a custom filtering controls in the column header of the Grid, now when we try to enable sorting then the sort icon appears in a odd location; I would like the sort icon to appear right after the label. Any suggestions on how to achieve that attached is the snapshot of how it looks and below is the markup we have for columns.

<table class='list-entity'>
<thead>
<tr>
<th data-field='Actions' style='width:48px'> </th>
<th class='filter' data-field='Code' style='width:250px'>
<label>ID</label>
<input class='grid-filter' data-field='Code' />
</th>
<th class='filter' data-field='Description'>
<label>Description</label>
<input class='grid-filter' data-field='Description' />
</th>
</tr>
</thead>
</table>

Grid

answered on 27 Aug 2012

1 answer

92 views

Help recreating transport URLs

I have a grid with a data source that posts JSON to my server and returns JSON to populate the grid. What I need to do is add the capability to download the data as an Excel file. The creation of the Excel file is easy enough, but what I need help with is forming a proper URL, using a datasource's existing filtering and sorting options as query parameters. The reason for this is that file downloads via ajax posting are not allowed.

Obviously the framework does this internally when setting a data source transport's type to GET. Is there a way I can access the transport's read URL? My export URL will be identical, with a minor change I can make manually. If there is no way to get the full URL, is there a way to have the data source's filter and sort values be URL encoded by the framework?

If these aren't possible, might I suggest adding an "export" transport option to the data source object that we could configure for just this scenario?

Thanks

Data Source

answered on 27 Aug 2012

0 answers

130 views

ListView is not working in safari

i created the listview but its not displaying radio button in safari browser, firefox is displaying correctly

this code we are using
<div data-role="modalview" style="width: 100%;" id="rcm-placement-nr-list" data-layout="checklayout">
            <ul id="menuList" data-role="listview" data-template="placementNRTemplate" data-click="placementNRSelected"
                data-source="placementNRDataSource" data-style="inset">
            </ul>
        </div>

var schema = { model: {} };

        var placementNRDataSource = kendo.data.DataSource.create({
            data: [
                        { text: "Select a Value", value: "-1" },
                        { text: "test 1 required", value: "1" },
                        { text: "test 2 Encounter", value: "2" },
                        { text: "test 3 only", value: "3"}],
            schema: schema

        });

can you please tell us how to fix this problem

ListView (Mobile)

asked on 27 Aug 2012

0 answers

308 views

CRUD Operations on local data - parameterMap not firing

Hey guys,

I have a grid bound to a DataSource which references local data. The data is loaded with a prior ajax call and is simply re-used in this DataSource to save on a round trip to the server. The local data is a subset of a larger data set.

I have a need to perform CRUD operations on this local data via a grid. Prior to sending the payload to the server, I need to map the model to a server-friendly object graph. I assume the best way to do this is via the transport.parameterMap option.

Here's my grid & DataSource configuration:

grid.kendoGrid({

dataSource: {

transport: {

read: function(options) {

options.success(filters); // filters is the local array of data

},

create: function(options) {

prime.dsCrud({ url: 'CreateFilters', crud: options });

},

update: function (options) {

prime.dsCrud({ url: 'UpdateFilters', crud: options });

},

destroy: function(options) {

prime.dsCrud({ url: 'DestroyFilters', crud: options });

},

parameterMap: function(options, operation) {

console.log(operation); // *** never fires! ***

}

},

batch: true,

pageSize: 10,

schema: {

model: {

id: 'id',

fields: {

id: { editable: false, nullable: true },

member: { type: 'string', validation: { required: true } },

operator: { type: 'number', validation: { required: true } },

dataType: { type: 'string', validation: { required: true } },

value: { type: 'string', validation: { required: true } }

}

},

sortable: true,

pageable: true,

filterable: false,

editable: true,

navigatable: true,

toolbar: ["create", "save", "cancel"],

columns: [

{

field: 'member',

title: 'Column'

},

{

field: 'operator',

title: 'Operator'

},

{

field: 'value',

title: 'Value(s)'

},

{

command: 'destroy',

title: '',

width: '170px'

}

]

});

For completeness sake, here is my prime.dsCrud function:

prime.dsCrud = function (options) {

$.ajax({

url: prime.data.queryTool + options.url,

dataType: 'jsonp',

contentType: 'application/json',

type: 'POST',

data: options.crud.data,

success: function(data, textStatus, jqXHR) {

options.crud.success(data);

},

error: function(jqXHR, textStatus, errorThrown) {

options.crud.error(jqXHR);

},

complete: function(jqXHR, textStatus) {

console.log('-----------------------------------');

console.log('response from ' + options.url + ':');

console.log(jqXHR);

console.log('-----------------------------------');

}

});

}

I realize I could probably do this in the prime.dsCrud function's "data" configuration, but I would prefer to leave this function more generic. Can anyone explain to me why my transport.parameterMap isn't firing?

Thanks!

Data Source

asked on 27 Aug 2012