Questions on Kendo UI for jQuery Forum

6 answers

320 views

Unable to initialize menu with JSON

Hi,

I'm having trouble initializing the menu control from JSON. Using the code from the example:

$(document).ready(function() {

$("#menu").kendoMenu({

dataSource: [

{

text: "Menu Item 1",

items: [

{ text: "Sub Menu Item 1" },

{ text: "Sub Menu Item 2" }

]

},

{

text: "Menu Item 2"

}

]

})

});

The menu doesn't show up. I have tried this using <ul id="menu"></ul> as well as <div id="menu"></div> thinking that maybe it had to be an unordered list, but I can't make it work.

When I check the generated page, I can see that there is some kind of attempt to create the menu, but the items from the JSON aren't populated. As seen in web inspector:

<ul id="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal"></ul>

Menu

answered on 16 Feb 2012

0 answers

151 views

Lazy loading images inside a splitter

Using the jQuery plugin: http://www.appelsiini.net/projects/lazyload causes some quirks. If you don't specify a container for the plugin, only the visible images on the screen are loaded, scolling down on a splitter pane shows that any other that were not originally visible are not loaded.

Specify the ID of the pane with the scrollbars + images causes them to all load at once. Changing the pixel threshold does not fix this either.

Has anyone else managed to get images to lazy load with any jQuery plugin with a scrollable splitter pane?

Splitter

asked on 16 Feb 2012

1 answer

208 views

Problems sending data by POST

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

64 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

131 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

297 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

322 views

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

51 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

124 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

172 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