Questions on Kendo UI for jQuery Forum

1 answer

232 views

Hi

I'm trying to do a DataSource synchronize with the server, like in the Video
"Get Started With The Kendo UI DataSource".
My Forms works correctly, the grid show me the data correctly and I can Update an Delete well.
The problem is when I send the info from inputs to the file that processes. I'm using PHP and I send the info by POST but I don´t receive anything.

Here´s the code for the inputs, is the same that in the video:

$(document).ready(function() {
                $("#splitter").kendoSplitter();

                dataSource = new kendo.data.DataSource ({
                   transport: {
                       read: {
                           url: "data/instituciones.php"
                       },
                       /*create: {
                           url: "data/instituciones.php",
                           type: "PUT"
                       },*/
                       update: {
                           url: "data/prueba.php",
                           type:"POST"
                       },
                       /*destroy:{
                           type:"DELETE"
                       }*/
                   },
                   schema: {
                       data:"data",
                       model: {
                           id:"id_Inst",
                           fields:{
                               nombre:{validation:{required: true}},
                               tipo:{validation:{required: true}}
                           }
                       }
                   }
                });

                var selected;

                $("#institucion").kendoGrid({
                    dataSource:dataSource,
                    selectable:true,
                    navigable:true,
                    change: function(){
                        var id = this.select().data("id");
                        selected = this.dataSource.get(id);

                        this.dataSource.options.transport.destroy.url = "data/instituciones" + id;
                        this.dataSource.options.transport.update.url = "data/instituciones" + id;

                        $("#cambiarNombre").val(selected.get("nombre"));
                        $("#cambiarTipo").val(selected.get("tipo"));
                    }
                });

                $("#crearInst").click(function(){
                    dataSource.add({nombre: $("#nombreInst").val(), tipo: $("#tipoInst").val()});
                    dataSource.sync();

                    $("#nombreInst").val('');
                    $("#tipoInst").val('');
                    dataSource.read();
                });

                $("#update").click(function(){
                    selected.set("nombre", $("#cambiarNombre").val());
                    selected.set("tipo", $("#cambiarTipo").val());
                    dataSource.sync();
                });

                $("#delete").click(function(){
                    dataSource.remove(selected);
                    dataSource.sync();
                })
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="splitter">
                <div id="left">
                    <div class="inner">
                        <h3>Create</h3>
                        <dl>
                            <dt>Nombre:</dt>
                            <dd><input type="text" id="nombreInst" name="nombreInst"></dd>
                            <dt>Tipo:</dt>
                            <dd><input type="text" id="tipoInst" name="tipoInst"></dd>
                            <dd><button id="crearInst">Crear</button></dd>
                        </dl>
                    </div>
                </div>
                <div id="middle">
                    <div id="rigth-top">
                        <div class="inner">
                            <div id="grid">
                                <table id="institucion">
                                    <tr>
                                        <th data-field="nombre">Nombre</th>
                                        <th data-field="tipo">Tipo</th>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="right">
                    <h3>Edit</h3>
                    <dl>
                        <dt>Nombre:</dt>
                        <dd><input type="text" id="cambiarNombre" name="cambiarNombre"/></dd>
                        <dt>Tipo:</dt>
                        <dd><input type="text" id="cambiarTipo" name="cambiarTipo"/></dd>
                        <dd><span><button id="update">Actualizar</button><button id="delete">Borrar</button></span></dd>
                    </dl>

And the code used in PHP:

<?php

    include 'conexion.php';
    header("Content-type: application/json");

    $con = conexion();

    $verb = $_SERVER["REQUEST_METHOD"];

    if ($verb == "GET") {
    $data = array();
    $query = pg_query($con, "SELECT * FROM \"Institucion\"");

    while ($rows = pg_fetch_object($query)) {
        $data[] = $rows;
    }


    echo "{\"data\":" .json_encode($data). "}";
    }

    if ($verb == "POST") {

        $id = $_POST["id_Inst"];
        $nombre = $_POST["cambiarNombre"];
        $tipo = $_POST["cambiarTipo"];

        $rs = pg_query($con, "UPDATE \"Institucion\" SET nombre = '$nombre' WHERE id_Inst = ".$id) or die(pg_last_error($con));

        echo json_encode($rs);

    }

?>

The query runs perfectly but in the field "nombre" I dont receive data so I guess that I have problems sending the info from the inputs maybe in the DataSource I dont know.
Someone can help me?

Thanks a lot,
LHGC

Data Source

answered on 15 Feb 2012

1 answer

88 views

Chart does not render in IE7 or IE8

I can't seem to get the chart to render in IE (above mentioned versions). It does work fine in chrome. Any ideas? The script below simply creates a datasource in a server side class and returns the data to create a pie chart.

{edit} I was able to display a chart in IE8 but only if I copied my script/html into a .HTM file. If I run the same "code" in an ASPX file within my asp.net application it fails within one of the .js files. Does this mean that this particular set of lightweight UI controls would not work using asp.net?

var graphData = new kendo.data.DataSource( {

transport: {

read: {

type:

"POST",

url:

"data_reader_webservice.asmx/GetDataJSON",

data: { DeviceID: $(

"#deviceList").data("kendoDropDownList").value(),

ParameterID: $(

"#parameterList").data("kendoDropDownList").value(),

startDate: $(

"#startDate").data("kendoDatePicker").value(),

endDate: $(

"#stopDate").data("kendoDatePicker").value()

},

contentType:

"application/json; charset=utf-8",

dataType:

"json"

},

parameterMap:

function (options) {

return JSON.stringify(options);

}

},

schema: {

data:

"d",

model: {

fields: {

ParameterID: { type:

"string" },

ParameterName: { type:

"string" }

}

},

error:

function (e) {

alert(e[0].responseText);

}

});

graphData.read();

$(

"#chart_test").kendoChart({

title: { text:

"Tha Chart!" },

chartArea: { width: 600, height: 400 },

seriesDefaults: { type:

"pie" },

dataSource: graphData,

series: [{field:

"ParameterValue", name: "value"}],

categoryAxis: { field:

"DeviceID", name: "id" }

});

Charts

answered on 15 Feb 2012

1 answer

150 views

No Text on buttons

Hi,

Is there away to make the buttons don't have text? Just the icon? suggested code below.

<a href="#" data-role="button" data-icon="add" data-style="notext"></a>

Button (Mobile)

answered on 15 Feb 2012

1 answer

341 views

Dynamically Loading Content

Coming from Silverlight, I am looking to create remote widgets (or components) that encapsulate all of their operation and look and feel into a single html/script file which can be loaded dynamically.   I would like to stay within the confines of HTML/JS/CSS rather than dipping into ASP.NET MVC.

The widgets need to be displayed within the div they are assigned to and automatically handle window/container re-sizing events, as well as pass context information from the controller to the component/widget.   (Think portal/dashboard).

Are there any examples which illustrate how to accomplish this?

Also, while looking at the Kendo source, I noticed that the components use kendo.ui.widget framework.   Should this be the mechanism that I use to create these components?   If so, are there any documents or examples which illustrate how to roll-your-own?

Thanks.

General Discussions

answered on 15 Feb 2012

3 answers

366 views

[Solved] Changing dataSource on chart won't update my chart.

I want to update the dataSource of my chart based on a selection in a kendoDropDownList, however no change is applied (and neither do I see exceptions).

$('#parking-filter-select').kendoDropDownList({

dataSource: usageData,

change: function (e) {

var value = $('#parking-filter-select').val();

var chart = $('#chart-utilization').data("kendoChart");

chart.dataSource = new kendo.data.DataSource({

data: usageData[value].Usage

});

chart.refresh();

}

});

$('#chart-utilization').kendoChart({

title: {

text: "Parking utilization for week"

},

dataSource:{

data: usageData[0].Usage

},

series:[{

type: "column",

field: "Max",

name: "Max utilization"

}],

categoryAxis:{

field: "Week"

},

tooltip: {

visible: true,

template: "${ Max } of ${ Capacity }"

},

legend: {

visible: false

}

});

I tried setting chart.dataSource.data too, but that also didn't work.

Charts

answered on 15 Feb 2012

3 answers

67 views

Bug(?): Column bars don't animate up to the right height when system under slight but not extreme load.

All values from datasource are exactly '1'. As you can see the bars don't render up correctly, when the animation is running it seems to hit the right height, and then shoot back.

Chrome: 18.0.1025.11 beta-m
KendoUI: 2011.3.1129. (from NuGet, no updates available on 15-2-2012).

Charts

answered on 15 Feb 2012

0 answers

155 views

splitter resizing

Posted 13 minutes ago (permalink)

hello,

here is my html code
<div id="splitter1">
            <div id="splitter1leftpane"></div>
            <div id="splitter1rightpane">
                <div id="splitter2" >
                    <div id="splitter2toppane"></div>
                    <div id="splitter2bottompane"></div>
                </div>
            </div>
        </div>
</div>
i am setting min = 100 max = 300 orientation horizontal on splitter1,
i am setting min = 100 max = 300 orientation vertical on splitter2,
initially splitter 1 is sized to max
but when i resize splitter 1 to min, it gets stuck & doesnt again resize to max

thanks & regards

chirag jani

Splitter

asked on 15 Feb 2012

4 answers

218 views

Splitter problem with expand

http://jsfiddle.net/WNcQJ/2/

1. drag the splitter to the left
2. Collapse it to the right.

The splitter stays at the same place and icons dissapear.

What am I doing wrong.

Splitter

answered on 15 Feb 2012

2 answers

313 views

Ruby on Rails - JSON and Nested Grids

Hello,

I saw this Kendo blog post on how to do nested Grids in PHP: http://www.kendoui.com/blogs/teamblog/posts/12-01-18/get_rolling_with_kendo_ui_and_php_ndash_part_1.aspx

I am essentially trying to do the same thing, however I have data coming from Rails and I can't seem to get this example to work with my Rails code. If I need to provide you more code, please let me know.

The project is using nested models - Posts and Comments. Each Post has a 'title' and 'content' field. Each Comment also has a 'title' and 'content' field.

Posts have many Comments and each Comment has a post_id associated with it in the database.

When I render views on the server, I use this path to get comments:

http://localhost:3000/posts/1/comments

This would render all the comments for Post #1. And the Post JSON would look like this:

{"content":"My first post","created_at":"2012-02-07T18:56:16Z","id":1,"title":"Hello","updated_at":"2012-02-07T18:56:16Z"}

If I wanted a specific comment, I would put

http://localhost:3000/posts/1/comments/7

The Comment JSON would come out like this:

{"content":"Interesting","created_at":"2012-02-10T22:16:45Z","id":7,"post_id":1,"title":"Great post!","updated_at":"2012-02-10T22:16:45Z"}

Since there is a post_id attribute on the Comment, I'm assuming I'd need to filter for that on the sub-grid.... but I'm not sure how to do that.

Here is what I have so far:

var PostsData = new kendo.data.DataSource({

transport: {

read: "/posts.json"

}

});

$("#posts-grid").kendoGrid({

dataSource: PostsData,

columns: [

{

field: "title",

title: "Title"

},

{

field: "content",

title: "Content",

}],

detailTemplate: kendo.template($("#posts-grid-template").html()),

detailInit: detailInit

});

function detailInit(e) {

// Reference current row being initialized

var detailRow = e.detailRow;

// Create a subgrid for the current

// detail row, getting comments for the post

detailRow.find(".posts-grid").kendoGrid({

dataSource: {

transport: {

read: "comments"

},

schema: {

data: "content"

},

serverFiltering: true,

filter: { field: "post_id", operator: "eq", value: e.data.post_id }

},

columns: [{ title: "Comments", field: "content" }]

})

}

Here is the html code that contains the templates:

<h1>Kendo Grid Test</h1>

<div id="nav"></div>

<div id="container">

</div>

<script type="text/template" id="users-grid-template">

<p>Users Grid Template</p>

<div id="users-grid"></div>

</script>

<script type="text/x-kendo-template" id="posts-grid-template">

<div class="comments-grid"></div>

</script>

<script type="text/template" id="nav-template">

<div>

<ul id="nav_container">

<li><a href="#users">Users</a></li>

<li><a href="#posts">Posts</a></li>

</ul>

</div>

</script>

Any help is greatly appreciated!

Grid

answered on 15 Feb 2012

1 answer

240 views

Hyphens in Xml element names breaks DataSource

Kendo DataSource does not appear to work with XML that has hyphenated (element) names.

For instance, try a working XML-bound demo and change the XML source element names and field references to include hyphen(s).

I'm not expecting to have to escape the '-' character in the field XPath expressions... am I overlooking something?

I don't have the luxury or modifying the web service that provides this data.

Would appreciate comments from anyone able to reproduce, work around, or otherwise enlighten me about this issue.

Data Source

answered on 15 Feb 2012