I'm using a XML file returned from my server with a Data Source. The XML returned only contains a smidge of info on each item.

When applying a filter, is it possible if the filtering is done on the server, filter by a field that is not returned to the data source?
E.G. XML file doesn't contain weight of an item and I would like to apply a filter by weight?

Let's say I want to pre-expand a panel. How would I go about doing that? I tried to utilize the methods per the guide, but with all my efforts I still can't manage to do this. Could I get a direct example in basic html/javascript for how to pre-expand a panel or another method that panels support? I just don't get it :-/ (not a big js guy.)

I want to use kendo ui to crate multiple  bar charts in a page.  I am using the theme: "BlueOpal", however ,only the first chart has blue color, all the others are just black. I tested this page on IE, safari, opera, all work.
Is there anyone can give me a fix,thanks.

The code is blow:

function createChart()
  {                    
      $("#tabstrip-1").kendoChart({theme: "BlueOpal",
                              legend: { position: "bottom"},
                              seriesDefaults: { type: "column"},
                               series: [{ name:"samples", data: [58276, 57987, 96199, 59018, 54371, 73841, 71390], color:"red"}],
                              valueAxis: { labels: {format: "{0}"  }},
                              categoryAxis: { categories: ['2011/11/17', '2011/11/18', '2011/11/19', '2011/11/20', '2011/11/21', '2011/11/22', '2011/11/23'], labels:{rotation:3, format: "{0:C}"}},
                              tooltip: { visible: true, format: "{0}"}
                              });
                              
$("#tabstrip-2").kendoChart({theme: "BlueOpal",
                              legend: { position: "bottom"},
                              seriesDefaults: { type: "column"},
                               series: [{ name:"samples", data: [58276, 57987, 96199, 59018, 54371, 73841, 71390]}],
                              valueAxis: { labels: {format: "{0}"  }},
                              categoryAxis: { categories: ['2011/11/17', '2011/11/18', '2011/11/19', '2011/11/20', '2011/11/21', '2011/11/22', '2011/11/23'], labels:{rotation:2, format: "{0:C}"}},
                              tooltip: { visible: true, format: "{0}"}
                              });
}

I'm using the PanelTab but expanded by establishing a default item with class "k-state-active" is not working.
Any suggestions?

Script:

With Kendo UI, can one build apps for capturing GPS coordinates, saving to a database along with picture and text?  And also plotting multiple GPS points onto a map such as google maps?

Hi,

I am using CodeIgniter on my backend to return a JSON result, depending on parameters sent via a POST. I wanted to directly link the result to a Grid, via a DataSource. However, I am having problems either understanding DataSources, or how they pass parameters.

In the examples, you provide:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // the remote service URL
            url: "http://search.twitter.com/search.json",
            // JSONP is required for cross-domain AJAX
            dataType: "jsonp",
            // additional parameters sent to the remote service
            data: {
                q: function() {
                    return $("#searchFor").val();
                }
            }
        }
    }

 If I want to test this, I simply use a browser to check " " and it returns what would appear in the DataSource above.

The problem is that CodeIgniter does not accept parameters in the form of "?q=whatever" as standard. It can, however, accept GET and POST information.

How can I do it? I have a few theories:

1. set up the DataSource correctly to pass the parameters in a GET or POST (how?)
2. do not use a DataSource, but a javascript object to bind to the Grid (seems like a waste, how is this done?)
3. extend DataSource like you did with odata to make a special class that knows how to handle parameters in GET/POST.

What would you recommend?

I'm trying to validate the data sent to the server when I run an UPDATE operation.

I'll try to be clearer. Here's the code in detail:


Kendo Script
------------------

          <script>
                $(document).ready(function() {
                    
 
                    var Item = kendo.data.Model.define({
                        id: "id_student"
                    });
                    
                    var model = null; 


      var JsonDataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "students_read.php", 
                                dataType: "JSON"
                            },
                            create: {
                                url: "students_add.php", 
                                type: "POST"
                            },
                            update: {
                                url: "students_update.php",
                                type: "POST"
                            } ,
destroy: {
                                url: "students_delete.php",
                                type: "POST"
                            }
                        },
                        schema:{
                            model: Item
                        }
                    });




                  function onChange() {
                   
    var tr = this.select();
                        var id = tr.data("id");
                        model = this.dataSource.get(id);
                   
                        $("#id").val(model.get("id_student"));         
                        $("#name").val(model.get("name"));
                                   
                    }


                 $("#grid").kendoGrid({
                        autoBind: false,
                        dataSource:JsonDataSource,
                        height: 350,
                        selectable: "row",
                        pageable: false,
                        sortable: true,
                        scrollable: true,
                        change: onChange,
                        columns: [
                                  { title : "Id", field :"id_student"},
                                  { title : "Name", field :"name"}
                                ]
                    });
                    
                    $("#btn_load").click(function() {
                        JsonDataSource.read({name: $('#search').val()});
                    });
                    
                     $("#search").keydown(function(e) {
                        if (e.keyCode === kendo.keys.ENTER) {
                            JsonDataSource.read({name: $('#search').val()});
                        }
                    });
                    
                    $("#btn_add").click(function() {
                        $('#id').val(null);
                        $('#name').val(null);
                    });
                    
                    $("#btn_save").click(function() {
                        if ($('#id').val() == ''){
                            JsonDataSource.add({ aluno: $('#name').val() });
                            JsonDataSource.sync();
                            $('#search').val($('#name').val());
                            JsonDataSource.read({name: $('#search').val()});
                        }else{
                            model.set("aluno", $('#name').val());
                            JsonDataSource.sync();
                        }
                    });
                    
                    $("#btn_delete").click(function() {
                        JsonDataSource.remove(model);
                        JsonDataSource.sync();
                    });
                
                });
            </script>


HTML tags
---------------

       <div id="example" class="k-content">
            <div>
                Search:&nbsp;&nbsp;<input id="search" name="search" />
                <button id="btn_load">Load Data</button>
            </div><br/>
            <div id="grid"></div>
            <dl>
                <dt>Student:</dt><br/>
                <dd>Id:&nbsp;&nbsp;<input id="id" name="id" readonly="readonly"/></dd><br/>
                <dd>Name:&nbsp;&nbsp;<input id="name" name="name" /></dd><br/>
                <dd><button id="btn_add">New</button>&nbsp;&nbsp;&nbsp;<button id="btn_save">Save</button>&nbsp;&nbsp;&nbsp;<button id="btn_delete">Delete</button></dd>
            </dl>
       </div>
            
PHP script (students_update.php)
--------------------------------------------
<?php


$host = "localhost";
$username = "root";
$password = "root";
$db = "school";


$id_student = $_POST["id_student"];
$name = $_POST["name"];
        
    mysql_connect($host,$username,$password);
mysql_selectdb($db);

mysql_query("UPDATE students set name = '".$name."'  WHERE id_student = '".$id_student."'");
$result = array("result" => (mysqli_affected_rows >= 0)); 

echo json_encode($result);
?>


I wonder how to implement the code above to show the result of the UPDATE operation (if there was success or failure) via an alert (). example;


if (result == true) {
  alert("Sucess Update");
}else{
  alert("Fault Update");
}


The question is: How do I do this? Anybody could implement the code? The only thing missing to complete the example that full CRUD (Kendo + PHP) and send to the community.

Hi,

I was wondering if there was any reason I couldn't use CoffeeScript with the Kendo UI. Has anyone tried it and if so were there any gotchas.

TIA...

Can Kendo UI be easily used along side some of the grid based CSS that are widely used. I was thinking on standardizing on Kendo UI along with ZURB's Foundation (http://foundation.zurb.com/) . Notice the mobile capabilities of Zurb Foundation. The other CSS framework that I'm currently reviewing is Blueprint (http://www.blueprintcss.org/).

If anyone has other used other CSS frameworks that should work well with Kendo UI please chime in.

TIA...

Hi,

I'm trying to show the value of a hidden column when the row is selected.  I know hidden cols value can be accessed by dataSource.view.  How can I do something like:

  alert(this.dataSource.view()[this.select().index()]);

where do I specific the index or field title I want to access, and how do I get it to return a string?

Thanks