Questions on Kendo UI for jQuery Forum

0 answers

232 views

I have managed to follow most of the examples and instructions regarding how to configure my Kendo UI MVC TreeView for remote data/on-demand binding. However, I have not been able to find out what parameters needs to be setup on the server to get it to work properly.

Is there an example I can follow that shows server methods/parameters? All of the examples I've seen so far only include client methods/parameters.

I have managed to get the call to the server to work using :

@Html.Kendo().TreeView().Name("treeView").DataSource(dataSource => dataSource.Read(read => read.Action("actionName", "controllerName")))

but none of the parameters and return values I've worked with on the server work at all.

Any and all C# (or even VB) server-side MVC controller method examples are appreciated!

Edit:

My apologies, but this should probably be in the Kendo MVC section of the forums. I also think I have found my answer...the problem was that I was not allowing Get requests to my controller method. The resulting exception was getting buried somewhere. I have since changed my controller method and result list to a custom class as follows:

public JsonResult TreeView(string id)

which returns a list of:

    public class kendoTreeViewItem
    {
        public string id;
        public string text;
        public string imageUrl;
        public string spriteCssClass;
        public bool hasChildren;
        public bool encoded;
    }

TreeView

asked on 28 Aug 2012

0 answers

130 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

173 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

105 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

204 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

604 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

256 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

202 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

99 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

140 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