Telerik Forums
Kendo UI for jQuery Forum
2 answers
151 views
Hello, I'm new to Kendo UI

I want you
 when  click a button to collapse the splitter.

This is my
 code:http://jsfiddle.net/N8gE3/

When call the function I get a message:

Uncaught TypeError: Object [object Object] has no method 'collapse'

Please Help me

Cristofer
Top achievements
Rank 1
 answered on 11 Jan 2012
1 answer
222 views
If I set the type of datasource to "odata" additional parameters is not added to the request string. This is my code:

var odataSource = new kendo.data.DataSource({
    type: 'odata',
    transport: {
        read: {
            url: server + query, // the service url
            data: { //additional parameters sent to the remote service
                buchungskonto: function() {
                    return "'" + $("#search").val() + "'";
                }
            }
        }
    },
    change: function() { // subscribe to the CHANGE event of the data source
        $("#results").html(kendo.render(template2, this.view()));
    }
});

The resulting request is:

/my.services/SalesData/GetCustomers()?$format=json&$inlinecount=allpages&$callback=callback

As you can see parameter "buchungskonto" is missing. It is a call to a wcf data service, GetCustomers() is mapping to some SP, "buchungskonto" one of the parameters passed to the SP. So the correct call should be:

/my.services/SalesData/GetCustomers()?$format=json&$inlinecount=allpages$callback=callback&buchungskonto='1'

Is this a bug?

Besides that: really great product! BUT, and this is a really big BUT: the documentation is not on the level I'm accustomed to from telerik. I think there is still a lot of work to do for you.

Regards
Heiko
Sovan
Top achievements
Rank 1
 answered on 11 Jan 2012
1 answer
200 views
Hello everyone, first of all sorry for the ambiguous thread name. Since the issue i'm experiencing could be grid, chart or even datasource issues, I'm posting it here. If that is not correct, I apologize a second time.

Following the examples on the site I have built a page with a chart and a grid. With $document.ready I load a few filters and the starting grid and chart, and there's a button right next to the filters to apply any changes to the "dataset" and change what's displayed.

Now, I'm having a little problem and it's that most of the time neither the grid nor the chart load, they appear empty or not at all. Using firebug I can see the requests to my datasource (I'm using a WCF Service and am calling it to return data in json format) have returned data, but the controls don't load.

If that were all, I'd think it was an issue with my configuration, maybe I was missing a property or two, but the strange thing, and what to me is the real issue is that if I refresh the page or click the button enough times, sometimes 2 or 3 times, then the controls will load, so it's not a matter of the data not being in the correct format, but on the next refresh they disappear again. In other words, the kendo controls on the page seem somewhat temperamental and only show up when they feel like it. I have tested with Chrome and even IE with the same results.

If anyone has any idea of why this might happen, I'd appreciate it if you could enlighten me, since it's driving me a tad bit crazy. I will post the code if necessary, just let me know.

Thanks for the time
Atanas Korchev
Telerik team
 answered on 11 Jan 2012
1 answer
124 views
http://jsfiddle.net/CuQDc/5/light/ 

Selecting a row produces a yellow box around the grid.
Joel
Top achievements
Rank 1
 answered on 11 Jan 2012
1 answer
90 views
http://demos.kendoui.com/web/grid/editing.html

In this demo, click on 'Add new record' and then type in a product name. Hitting the TAB key does not bring up the next cell (UnitPrice) in edit mode.

After hitting the 'Add new record' button, only if you click on the row using a mouse, it works.

Perhaps a focus-logic issue tied specifically to the mouse click?

Thanks,
Joel
Nikolay Rusev
Telerik team
 answered on 11 Jan 2012
0 answers
771 views
I was able to get a simple grid fully functional based on the weapons video at http://www.kendoui.com/videos.aspx called Get Started with the KendoUi Data Source.

I built an .asmx web service in asp.net, and I am posting the code here.

My solution requires you to have jquery.js working on your html page, and for you to set up a .asmx file that supplies web services in JSON format to read, create/update, and delete a list of Japanese weapons.  I leave it to the reader to implement their database connection of choice in C# code.  Also, one must create the Weapons class in code or have it defined in a web service they subscribe to in the code.

Home.html page 
<!doctype html>
<html>
<head>
    <title>Demo</title>
    <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/kendo.all.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>
                <h1>
                    Weapons
                </h1>
            </td>
        </tr>
    </table>
    <div id="mainSplitter" style="height:300px">
        <div id="LeftPane">
            <h3>
                Create</h3>
            <dl>
                <dt>Name:</dt>
                <dd>
                    <input type="text" id="create-name" /></dd>
                <dt>Description:</dt>
                <dd>
                    <textarea rows="5" cols="20" id="create-description"></textarea></dd>
                <dd>
                    <button id="create-weapon">
                        Create</button></dd>
            </dl>
        </div>
        <div id="MiddlePane">
            <div id="weapons">
            </div>
        </div>
        <div id="RightPane">
            <h3>
                Edit</h3>
            <dl>
                <dt>Name:</dt>
                <dd>
                    <input type="text" id="update-name" /></dd>
                <dt>Description:</dt>
                <dd>
                    <textarea rows="5" cols="20" id="update-description"></textarea></dd>
                <dd>
                    <span>
                        <button id="update-weapon">
                            Update</button>
                        <button id="delete-weapon">
                            Delete</button></span></dd>
            </dl>
        </div>
    </div>
    <script>
        $(document).ready(function ()
        {
 
            $("#mainSplitter").kendoSplitter({
                //It is best to set the height of a splitter in the div style in the html above. see <div id="mainSplitter" ...>
                //Make three panes in the three dives that comprise the splitter and sent their width in terms of percentage.
                panes: [{ size: "20%", resizable: false },
                        { size: "60%", resizable: false, scrollable: false },
                        { size: "20%", resizable: false }, ]
            });
 
            var Weapon = kendo.data.Model.define({
                id: "WeaponID"
            })
 
            //All of the operations in the data source must be specified of type POST becaue we are using an .asmx service.
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "JSON.asmx/GetWeapons",
                        dataType: "json"
                    },
                    //I remove the create event because it would end up reading the data before it was saved.
                    //create: {
                    //    type: "POST",
                    //    url: "JSON.asmx/UpdateWeapons",
                    //    success: function ()
                    //    {
                    //        dataSource.read();
                    //    }
                    //},
                    update: {
                        type: "POST",
                        url: "JSON.asmx/UpdateWeapons"
                    },
                    destroy: {
                        type: "POST",
                        url: "JSON.asmx/DeleteWeapons"
                    }
                },
                schema: {
                    data: "d",
                    model: Weapon
                }
            });
 
            var selectedWeapon;
 
            $("#weapons").kendoGrid({
                columns: [{ title: "Weapon", field: "Name" },
                            { title: "Description", field: "Description"}],
                dataSource: dataSource,
                selectable: true,
                change: function ()
                {
                    var id = this.select().data("id");
                    selectedWeapon = this.dataSource.get(id);
 
                    $("#update-name").val(selectedWeapon.get("Name"));
                    $("#update-description").val(selectedWeapon.get("Description"));
                },
                scrollable: true,
                height: 300
            });
 
            //The javascript to create a new weapon
            $("#create-weapon").click(function ()
            {
                var name = $("#create-name").val();
                //If the name is empty don't save it.
                if (name == "") {
                    alert("Please specify a name for the weapon.");
                    return;
                }
                else {
                    //A better approach that uses ajax and does the read after the data is successfully saved.
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "JSON.asmx/UpdateWeapons?Name=" + $("#create-name").val() + "&Description=" + $("#create-description").val(),
                        success: function ()
                        {
                            dataSource.read();
                        }
                    });
 
                    //Suggested Approach by Kendo site that is flawed because the read will execute before new records are saved into the database.
 
                    //                    //Add to the data source from the newly created fields.
                    //                    dataSource.add({ Name: $("#create-name").val(), Description: $("#create-description").val() });
                    //                    //This will call the create method in the data source, because we just added a record.
                    //                    dataSource.sync();
                    //                    setTimeout("dataSource.read()", 1000); //Wait one second before refreshing the datasource because the create method takes a second.
 
                    //Clear the Create fields.
                    $("#create-name").val('');
                    $("#create-description").val('');
 
                }
            });
 
            //The javascript to update a weapon
            $("#update-weapon").click(function ()
            {
                selectedWeapon.set("Name", $("#update-name").val());
                selectedWeapon.set("Description", $("#update-description").val());
                dataSource.sync();
            });
 
            //The javascript to delete a weapon
            $("#delete-weapon").click(function ()
            {
                dataSource.remove(selectedWeapon);
                dataSource.sync();
            });
 
        });
    </script>
</body>
</html>


JSON.asmx web service  
using System.Web.Services;
using System.Web.Script.Services;

 
namespace JSONService4
{
    /// <summary>
    /// Summary description for JSON
    /// </summary>
    [WebService(Description = "An ASP.Net version 4.0 JSON web service.", Namespace ="http://localhost/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [ScriptService]
    public class JSON : System.Web.Services.WebService
    {
 
        [WebMethod(Description = "Returns the list of Japanese weapons.")]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public Weapons[] GetWeapons()
        {
            //Put code here to read from the database, but you must return a simple array[] of Weapons objects. This could even be a call to another .asmx service like Outsystems to do the dirty work. 
 
        }
 
        [WebMethod(Description = "Adds to or updates the list of Japanese weapons.")]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public void UpdateWeapons()
        {
            int weaponID = 0;
            //If we can't parse the WeaponID parameter then there isn't any, and this is a create.
            if (this.Context.Request["WeaponID"] != null)
                weaponID = int.Parse(this.Context.Request["WeaponID"].ToString());
            string name = this.Context.Request["Name"];
            string description = this.Context.Request["Description"];
 
 
            //Put code here to connect to the database and do your update or insert, depending on if the id > 0 or id = 0. This could even be a call to another .asmx service like Outsystems to do the dirty work. 
 
        }
 
        [WebMethod(Description = "Deletes from the list of Japanese weapons.")]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public void DeleteWeapons()
        {
            int weaponID = 0;
            //If we can't parse the request then there isn't any, and this is a create.
            int.TryParse(this.Context.Request["WeaponID"].ToString(), out weaponID);
            string name = this.Context.Request["Name"];
            string description = this.Context.Request["Description"];
 
            //Put code here to connect to the database and delete the weapon from the Weapons table.  This could even be a call to another .asmx service like Outsystems to do the dirty work.
 
        }
 
    }
}



Adam
Top achievements
Rank 1
 asked on 11 Jan 2012
2 answers
1.2K+ views
Hello,

At our company, we are using the OutSystems platform to publish .asmx Web Services that we can consume in client side software.  I am trying to get the KendoUI grid to work with the .asmx Web Services, but I am having trouble getting any data. I am new to javascript and KendoUI, so really dumbing it down can help.  Do I need to create a service reference in my asp.net application for the service and then point the grid to that code file, or can I consume the service directly.  I read the other posts in the forum about the xml web service, but still can't get it to work.

Here is my code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Kendo2.aspx.cs" Inherits="VSKendo.Kendo2" %>
 
<!doctype html>
<html>
<head>
    <!-- meta -->
    <!-- meta -->
    <title>Grid virtualization using remote data</title>
    <!-- css -->
    <link href="Styles/kendo.examples.css" rel="stylesheet" />
    <link href="Styles/kendo.common.css" rel="stylesheet" />
    <link href="Styles/kendo.kendo.css" rel="stylesheet" />
    <!-- css -->
    <!-- script -->
    <script src="Scripts/kendo.jquery.js" type="text/javascript"></script>
    <script src="Scripts/kendo.core.js" type="text/javascript"></script>
    <script src="Scripts/kendo.data.js" type="text/javascript"></script>
    <script src="Scripts/kendo.data.odata.js" type="text/javascript"></script>
    <script src="Scripts/kendo.draganddrop.js" type="text/javascript"></script>
    <script src="Scripts/kendo.grid.js" type="text/javascript"></script>
    <script src="Scripts/kendo.groupable.js" type="text/javascript"></script>
    <script src="Scripts/kendo.pageable.js" type="text/javascript"></script>
    <script src="Scripts/kendo.people.js" type="text/javascript"></script>
    <script src="Scripts/kendo.sortable.js" type="text/javascript"></script>
    <script src="Scripts/kendo.data.xml.js" type="text/javascript"></script>
    <!-- script -->
</head>
<body>
    <form id="Mainform" runat="server">
    <!-- nav -->
    <!-- nav -->
    <!-- description -->
    <div class="description">
        Grid virtualization using remote data</div>
    <!-- description -->
    <div id="example" class="k-content">
            <script>
                $(document).ready(function ()
                {
                    $("#grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "http://loclahost/RCMPPMHub/PricingServices.asxm/GetPricingSourceList"
                            }
                        },
                        height: 280,
                        columns: ["PricingSourceName"]
                    });
                });
            </script>
            <div id="grid">
            </div>
    </div>
    <!-- tools -->
    <!-- tools -->
    </form>
</body>
</html>
Adam
Top achievements
Rank 1
 answered on 11 Jan 2012
2 answers
942 views
We've used many photo up-loaders in the past, uploadify is our current choice.  However, I just bought the Nov30th v1, and wouldn't mind migrating most code to the various widgets KendoUi offers.  I've tried using firebug to figure out our own data handler (simple copy/paste at first and later resizing photos). We currently have uploadify producing nine sizes of photos for us ranging from thumbs to full size.

Can someone post a sample data handler (processUpload.php) to get us started?
Hernan
Top achievements
Rank 1
 answered on 11 Jan 2012
0 answers
170 views
Hi!

The splitter is attaching to the DOM correctly on init. However when I try to use the ajaxRequest method, I can't seem to get it to work.

The ajaxReuqest method isn't documented very well (http://www.kendoui.com/documentation/ui-widgets/splitter/methods.aspx 
and i'm not sure how to get ahold of it again after it's been loaded on the page. I set up a simple test:

<script>
    jQuery(document).ready(function () {
        jQuery("#splitter").kendoSplitter({
            panes: [
                { min: "100px", max: "300px" },
                { contentUrl: "/test.htm" }
            ]
        });

        jQuery("#test").live("click", function () {
            var splitter = jQuery("#splitter");
            splitter.ajaxRequest("#Panel", "/test2.htm");
        });
    });
</script>

<div id="splitter">
    <div style="max-width:300px;">
        <div style="text-align:center;">
            <asp:TextBox runat="server" ID="boxSearch" Width="300" />
            <asp:Button runat="server" ID="btnSearch" Text="Search" />
        </div>
    </div>
    <div id="#Panel">
    </div>
</div>
<input type="button" id="test" value="test"/>

Please help.
Thanks!
Easton
Top achievements
Rank 1
 asked on 11 Jan 2012
0 answers
252 views
I have created a datasource (verified the results retrieved) then I try to use it when initializing a dropdownlist. The dropdown list is rendered but not populated with any data. Also how do I refresh the dropdown after the datasource results have changed? I realize that I can't reinitialize the original element multiple times. Thanks!

Sample Code:

var myDataSource = new kendo.data.DataSource({
transport: {
  read: {
   url: '@Url.Action("Method", "Entity", new { Area = "Area" })',
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   data: { param1: param }
  }
 },
 change: function (event) {
  $("#INPUT").kendoDropDownList({
       dataTextField: "Text",
       dataValueField: "Value",
       dataSource:
              {
              data: myDataSource 
              }
        }
   });
Joey Cruz
Top achievements
Rank 1
 asked on 10 Jan 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Drag and Drop
Application
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?