Telerik Forums
Kendo UI for jQuery Forum
1 answer
257 views
I have an autocomplete widget that works when I prepopulate the data from my ajax service but not when I use the DataSource Transport.

I am allowed to use json (dont need jsonp) but something else is the issue.
my table holds 60K employees so obviously I need to filter it down.
any ideas where I am making my mistake?
Thanks.


                 
                 var dataSource = [];  
                 var dataParam = [];
                 var remoteHost="http://www.myHost.com/Service.asmx/";
                 var remoteMethod ="getEmployees";
                                    
                 $(function () {                                         
                     // method 1: remotely hosted ajax - works with AutoComplete
                     callAjax(remoteMethod, dataParam, onSuccess);
                    
                     // method 2: Kendo Transport
                         $("#input").kendoAutoComplete({
                             minLength:3,
                             dataTextField:'Value',
                             dataSource:{
                                 serverPaging:true,
                                 pageSize:20,
                                 contentType:'application/json; charset=utf-8',
                                 type:'POST',
                                 dataType:'json',
                                 transport:{
                                     read: remoteHost + remoteMethod
                                 }
                             }
                         })
                 });                 

                // SUPPORT FUNCTIONS FOR METHOD #1
                 function onSuccess(data, status){
                     alert("got data");                    
                    // dataSource=data.d;                    
                    // buildAutoComplete();                    
                 }
                
                 function buildAutoComplete() {
                     $("#input").kendoAutoComplete({
                        minLength: 2,
                        dataTextField: "Value",
                        dataSource: dataSource                        
                     });                    
                 }
Edemilson
Top achievements
Rank 1
 answered on 30 Aug 2012
1 answer
186 views
Hello,
I am following the examples linking the grid with a database through php found here.
Also, following the example of grid with popup editing found here.
I am trying to combine these examples so i can edit a grid linked with a database through php using popup editing, without a success.

First approach - keeping the different end points for the dataSource as in the popup editing example.

<div id="order_example" class="k-content">
    <div id="grid"></div>
     
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                          url: "order.php"
                        },
                        update: {
                          url: "order_update.php"
                        },
                        parameterMap: function(options, operation) {
                          if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                          }
                        }
                    },
                    schema: {
                        data: "data",
                        model: {
                          id: "_id",
                          fields: {
                            description: {validation: {required: true} }
                          }
                        }
                    }
                    //pageSize: 10
                },
                batch: true,
                columns: [
                           {title: "ID", field: "_id"},
                           {title: "Description", field: "description"},
                           {command: "edit"}
                ],
                height: 450,
                navigatable: true,
                editable: "popup"
            });
        });
     
        </script>
  </div>

Second approach - keeping the whole functionality in one php file as in the first example...
Code changed is in dataSource: 
transport: {
      read: {
        url: "order.php"
      },
      update: {
        url: "order.php",
        type: "POST"
      }
},

In both approaches the following happen:

  • With jquery 1.7.1, when i click the edit button it just disappears!! It reappears though, when i click another one, so the last one disappears...

  • With jquery 1.8.0 i get the following error in the console...
Uncaught Error: Syntax error, unrecognized expression: tr:not(.k-grouping-row) > td:not(.k-hierarchy-cell,.k-detail-cell,.k-group-cell,.k-edit-cell,:has(a.k-grid-delete)) jquery-1.8.0.min.js:2
Z.error jquery-1.8.0.min.js:2
bg jquery-1.8.0.min.js:2
Z.compile jquery-1.8.0.min.js:2
bm jquery-1.8.0.min.js:2
h.querySelectorAll.bm jquery-1.8.0.min.js:2
Z jquery-1.8.0.min.js:2
h.querySelectorAll.Z.matchesSelector jquery-1.8.0.min.js:2
p.extend.filter jquery-1.8.0.min.js:2
p.fn.extend.is jquery-1.8.0.min.js:2
p.event.dispatch jquery-1.8.0.min.js:2
p.event.add.g.handle.h jquery-1.8.0.min.js:2

Any ideas? Has anyone tried to do the same thing? Please any help is appreciated!! 

Alexander Valchev
Telerik team
 answered on 30 Aug 2012
3 answers
193 views
Hi,

We are really struggeling to get the DataSource working the way we want it. We are building a PoC with Kendo UI Complete. We've created a ViewModel that looks like this:

[DataContract]
    public partial class VMProject : VMRoot
    {
        public VMProject() {}
 
        public static VMProject GetById(object sender, int id)
        {
            return CallGetVMById<VMProject>("", id);
        }
 
        public static VMEntitySet<VMProject> AllVMProjectList(object sender)
        {
            return (VMEntitySet<VMProject>)CallGetVMAllList<VMEntitySet<VMProject>>(sender);
        }
 
        [DataMember]
        public String Name
        {
            get { return CallGetData<String>("Name"); }
            set { CallSetData ("Name", value); }
        }
 
        [DataMember]
        public VMEntitySet<VMProjectRegel> ProjectRegelList
        {
            get { return CallGetData<VMEntitySet<VMProjectRegel>>("ProjectRegelList"); }
            // set  { CallSetData ("ProjectRegelList", value); }
        }
 
    }

The consumed class VMRoot looks like this:
[DataContract]
    public partial class VMRoot : Viewmodel
    {
        public VMRoot() {}
 
        public static VMRoot GetById(object sender, int id)
        {
            return CallGetVMById<VMRoot>("", id);
        }
 
        public static VMEntitySet<VMRoot> AllVMRootList(object sender)
        {
            return (VMEntitySet<VMRoot>)CallGetVMAllList<VMEntitySet<VMRoot>>(sender);
        }
 
        [DataMember]
        public Int32 Id
        {
            get { return CallGetData<Int32>("Id"); }
            set { CallSetData ("Id", value); }
        }
 
        [DataMember]
        public DateTime CreatedOn
        {
            get { return CallGetData<DateTime>("CreatedOn"); }
            set { CallSetData ("CreatedOn", value); }
        }
 
        [DataMember]
        public Int32 CreatedBy
        {
            get { return CallGetData<Int32>("CreatedBy"); }
            set { CallSetData ("CreatedBy", value); }
        }
 
        [DataMember]
        public DateTime ChangedOn
        {
            get { return CallGetData<DateTime>("ChangedOn"); }
            set { CallSetData ("ChangedOn", value); }
        }
 
        [DataMember]
        public Int32 ChangedBy
        {
            get { return CallGetData<Int32>("ChangedBy"); }
            set { CallSetData ("ChangedBy", value); }
        }
 
    }

The VMEntitySet is an ObservableCollection which contains VMProjectRegel objects. These are defined like so:
    [DataContract]
    public partial class VMProjectRegel : VMRoot
    {
        public VMProjectRegel() {}
 
        public static VMProjectRegel GetById(object sender, int id)
        {
            return CallGetVMById<VMProjectRegel>("", id);
        }
 
        public static VMEntitySet<VMProjectRegel> AllVMProjectRegelList(object sender)
        {
            return (VMEntitySet<VMProjectRegel>)CallGetVMAllList<VMEntitySet<VMProjectRegel>>(sender);
        }
 
        [DataMember]
        public Int32 Aantal
        {
            get { return CallGetData<Int32>("Aantal"); }
            set { CallSetData ("Aantal", value); }
        }
 
        [DataMember]
        public Decimal Prijs
        {
            get { return CallGetData<Decimal>("Prijs"); }
            set { CallSetData ("Prijs", value); }
        }
 
        [DataMember]
        public Decimal BTW
        {
            get { return CallGetData<Decimal>("BTW"); }
            set { CallSetData ("BTW", value); }
        }
 
    }

We have defined the Model like so:
var Project = kendo.data.Model.define(
{
    id: "Id",
    fields:
    {
        DatumAanvang:
        {
            type: "date"
        },
        DatumFaktuur:
        {
            type: "date"
        },
        Name:
        {
            type: "string"
        },
        CreatedOn:
        {
            "type": "date"
        },
        CreatedBy:
        {
            "type": "number"
        },
        ChangedOn:
        {
            "type": "date"
        },
        ChangedBy:
        {
            "type": "number"
        }
    }
});

And the DataSource like so:

var dataSourceprojecten = new kendo.data.DataSource(
            {
                // the transport tells the datasource what endpoints
                // to use for CRUD actions
                schema:
                {
                    model: Project
                },
                transport:
                {
                    read:
                    {
                        url: "../api/projectonderhoud/get",
                        dataType: "json"
                    }
                }
            });

The JSON we receive looks like this:
[
  {
    "DatumAanvang": "\/Date(1345732135057+0200)\/",
    "DatumFaktuur": "\/Date(1345732135059+0200)\/",
    "Name": "Project onderhoud",
    "ProjectRegelList": [
      {
        "Aantal": 99,
        "Prijs": 99.000000000000,
        "BTW": 1.000000000000,
        "Id": 101,
        "CreatedOn": "\/Date(1345732135085+0200)\/",
        "CreatedBy": 10,
        "ChangedOn": "\/Date(1345732135085+0200)\/",
        "ChangedBy": 10
      }
  ],
    "Id": 1,
    "CreatedOn": "\/Date(1345732135060+0200)\/",
    "CreatedBy": 10,
    "ChangedOn": "\/Date(1345732135060+0200)\/",
    "ChangedBy": 10
  }
]

If I let the code run it results in HTML that shows the wrong Date format for the CreatedOn date. When however I specify the Model in the DataSource like so:

var dataSourceprojecten = new kendo.data.DataSource(
{
    // the transport tells the datasource what endpoints
    // to use for CRUD actions
    schema:
    {
        model:
        {
            id: "Id",
            fields:
            {
                DatumAanvang:
                {
                    type: "date"
                },
                DatumFaktuur:
                {
                    type: "date"
                },
                Name:
                {
                    type: "string"
                },
                CreatedOn:
                {
                    "type": "date"
                },
                CreatedBy:
                {
                    "type": "number"
                },
                ChangedOn:
                {
                    "type": "date"
                },
                ChangedBy:
                {
                    "type": "number"
                }
            }
        }
    },
    transport:
    {
        read:
        {
            url: "../api/projectonderhoud/get",
            dataType: "json"
        }
    }
});

Now the date is shown correctly. I just don't understand why the defined Model is not seen by the DataSource and the model defenition inside the DataSource is seen.

Regards
Paul

Atanas Korchev
Telerik team
 answered on 30 Aug 2012
6 answers
403 views
Hi Guys,

I have probably rather stupid, but still very frustrating problem with Kendo Datasource - particulary binding a remote service (json) to a list. I spent few hours yesterday reading, trying, experimenting - but to no avai, so this is my very last ressource...

It's the following scenario: I want to take an existing Kendo Mobile Ui example, "Pull to Refresh", which comes in the example folders when Kendo mobile is downloaded, but can also be found online here, and instead of binding it to Twitter REST service (as shown in the example), to bind it to my own datasource - data from remote REST service.

My service is located at:
http://sharedove.cld.sr/sahreconf2012/_vti_bin/ShareDoveRestService/ShareDove.svc/anonymous/GetSessions

So what I do with the original code is following:
- Change service address to the one above
- Change the name of the data field property from "results" (Twitter service) to "AllSessions" (my service)
- Change the template to show one single field ("TrackName")

What happens is following: In fiddler, I see my data loaded (hurray), with response code 200 (everything ok), but it just won't display (bind).

Screenshot of the Chrome developer tools with the service response selected is here.

So, I have no idea where does it go wrong. Everything looks plain and simple, I get my data, but it still would not show/bind.

Any ideas from you, good people?

Thanks!!

A, of course, my full code is (this is the "Pull to Refresh" example, with few lines modified):

<!DOCTYPE html>
<html>
<head>
    <title>Pull to refresh</title>
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
 
    <ul id="pull-to-refresh-listview"></ul>
</div>
 
<script id="pull-to-refresh-template" type="text/x-kendo-template">
    <div class="tweet">
        #= TrackName #
    </div>
</script>
 
<script>
    function mobileListViewPullToRefresh() {
            var lastID;
            var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                transport: {
                    read: {
                        url: "http://sharedove.cld.sr/sahreconf2012/_vti_bin/ShareDoveRestService/ShareDove.svc/anonymous/GetSessions", // the remove service url
                        dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
                    },
                    parameterMap: function(options) {
                        var page = options.page;
                        var parameters = {
                            q: "javascript",
                            since_id: lastID //additional parameters sent to the remote service
                        }
 
                        return parameters;
                    }
                },
                change: function() {
                    var item = this.view()[0];
 
                    if (item) {
                        lastID = item.id_str;
                    }
                },
                schema: { // describe the result format
                    data: "AllSessions" // the data which the data source will be bound to is in the "results" field
                }
            });
 
        $("#pull-to-refresh-listview").kendoMobileListView({
            dataSource: dataSource,
            pullToRefresh: true,
            appendOnRefresh: true,
            template: $("#pull-to-refresh-template").text()
        });
    }
</script>
 
<style scoped>
    .tweet {
        font-size: .8em;
        line-height: 1.4em;
    }
    .pullImage {
        width: 64px;
        height: 64px;
        border-radius: 3px;
        float: left;
        margin-right: 10px;
    }
    .sublink {
        font-size: .9em;
        font-weight: normal;
        display: inline-block;
        padding: 3px 3px 0 0;
        text-decoration: none;
        opacity: .8;
    }
</style>
 
 
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
HDC
Top achievements
Rank 1
 answered on 30 Aug 2012
1 answer
149 views
Hi Friends,

I want to enter data in grid using popup.  But when I try to load, it's not display popup.  I have attached my cshtml code and mvc controller code here.

cshtml:
 
@(Html.Kendo().Grid(Model.CustomerOrderDetails)
            .Name("CustomerOrder")
            .Columns(columns =>
                {
                    columns.Bound(p => p.TransitionSN).Width(70);
                    columns.Bound(p => p.DateOfPurchase).Width(140);
                    columns.Bound(p => p.CustomerName).Width(140);
                    columns.Bound(p => p.BrandName).Width(140);
                    columns.Bound(p => p.Qty).Width(50);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
                }
            )
            .ToolBar(toolbar => toolbar.Create())
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Pageable()
            .Sortable()
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.TransitionSN))
                .Read(read => read.Action("NewCustomer_Read", "CustomerOrder"))
                .Create(update => update.Action("NewCustomer_Create", "CustomerOrder"))
                .Update(update => update.Action("NewCustomer_Create", "CustomerOrder"))
                .Destroy(update => update.Action("NewCustomer_Create", "CustomerOrder")))
            )



------------------------------------------------------------------------------
Controller:

 
public ActionResult NewCustomer()
        {
            return View(new NewCustomer { CustomerAddress = "", CustomerEmail = "", CustomerName = "", CustomerCode = "", CustomerOrderDetails = SQLOrder.SelectAll() });
            //return View();
        }
 
 
        public ActionResult NewCustomer_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(SessionNewCustomerRepository.All().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            //return Json(SQLOrder.SelectAll().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
 
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult NewCustomer_Create([DataSourceRequest] DataSourceRequest request, CustomerOrder.Models.OrderDetails newcustomer)
        {
            if (newcustomer != null && ModelState.IsValid)
            {
                SessionNewCustomerRepository.Insert(newcustomer);
            }
            return Json(new[] { newcustomer }.ToDataSourceResult(request, ModelState));
        }

I have also attached the screen shot which I got.

Please help me .

Thanks & Regards,

Rupendra
Top achievements
Rank 1
 answered on 30 Aug 2012
1 answer
316 views
Does the Window object support an event which is fired when the user clicks the close icon but BEFORE the window is actually closed? Something like jQuery-UI's beforeClose event.

i'm trying to build a conditional close.

Thanks
Rafi
Nohinn
Top achievements
Rank 1
 answered on 30 Aug 2012
0 answers
80 views
Hi,

Which layout (Grid or Flow) does Kendo UI complete with ASP.Net MVC supports?

Could anyone please answer to this question?

Regards,
Suman
Suman
Top achievements
Rank 1
 asked on 30 Aug 2012
0 answers
86 views
Hi,

Which layout (Grid or Flow) does Kendo UI complete with ASP.Net MVC supports?

Could anyone please answer to this question?

Regards,
Suman
Suman
Top achievements
Rank 1
 asked on 30 Aug 2012
7 answers
300 views
I'm loading a treeview with hierarchical data, via a kendo hierarchical datasource:-

var treeSource = new kendo.data.HierarchicalDataSource({
    schema:{
        model:{
            hasChildren:"HasChildren",
             
            children: "Items",
            id:"Id"
            
        }
    }
     
 
$('#AjaxTreeView').kendoTreeView({
    dataSource: treeSource,
    template: "#=  item.Text # ",
    loadOnDemand: false,
    dragAndDrop: true,
    select: onSelect,
    drag: onNodeDragging
 
 
 
 
});

This displays the data fine (each node has formatted HTML text as it's value - which is why a template is defined), however when a node is dragged and dropped onto another one, quite often the child nodes disappear (and sometimes even the node being dropped disappears).

I also have a function which restricts the dragging operation to valid nodes
function onNodeDragging(e) {
 
    if (!isDropAllowed(e))
 
        e.setStatusClass("k-denied");
 
 
}


This doesn't happen every time, but over about 75% of the time.

Is this a bug, or do I need to do anything else?
AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 30 Aug 2012
2 answers
203 views
The demo for Editing custom editor at http://demos.kendoui.com/web/grid/editing-custom.html shows us how to bind to a drop down when performing inline editing, and also the Unit Price has the numeric textbox since the field's type is set to "number" within the schema's model configuration of the data source.  

What if the data type for each item within a column changed from row to row?  How could we dynamically get the grid's inline editor to render a numeric textbox if it's "number", or date picker if it's a "Date", and so on?

Put another way, what if we wanted to take the notion of the grid's filtering capabilities and turned it on its side?  Create a grid of filters, each row being the corresponding column header of the grid to apply these filters on?

Here's an example of the desired output:

  <style>
    table,th, td { border: 1px solid silver; padding:0 2px; }
  </style>
  <p>This dynamic table:</p>
  <table>
  <thead>
    <tr><th>Col 1</th><th>Col 2</th></tr>
  </thead>
  <tbody>
   <tr><td>Data</td><td>ABC DEF</td></tr>
   <tr><td>Data</td><td>8/20/2012</td></tr>
  </tbody>
</table>
  <p>Would correspond to this dynamic filter table:</p>
<table>
  <thead>
    <tr><th rowspan="2">Field</th><th colspan="2">Filter 1</th><th rowspan="2">Logical Operator</th><th colspan="2">Filter 2</th></tr>
    <tr><th>Operator</th><th>Value</th><th>Operator</th><th>Value</th></tr>
  </thead>
  <tbody>
    <tr><th>Col 1</th><td>Contains</td><td>abc</td><td>Or</td><td>Contains</td><td>def</td></tr>
    <tr><th>Col 2</th><td>Is After</td><td>8/1/2012</td><td>And</td><td>Is Before</td><td>8/31/2012</td></tr>
  </tbody>
</table>

You may ask, "Why would someone bother managing the built-in filtering outside of the grid control?"  The answer is a requirement to have both server-side filtering (to get the bulk data load) as well as client-side filtering (to "search within" the server-filtered results).  I don't think this can be easily accomplished with one kendoGrid.

Any ideas and/or thoughts would be great!

Petur Subev
Telerik team
 answered on 30 Aug 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
Application
Map
Drag and Drop
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
ScrollView
Switch
TextArea
BulletChart
Licensing
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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?