Telerik Forums
Kendo UI for jQuery Forum
0 answers
145 views
I have a kendo combobox that I'm populating from a remote json call.  I'm also binding a json object to dom elements.  Is there a way to bind the selected value of the combobox with the id returned from the json \ viewmodel object?  Thanks

<input type="hidden" data-bind="value:Id" /><br />
         <input type="text" placeholder="First name" name="FirstName" maxlength="30" data-bind="value:FirstName" id="id_firstName" /><br />
         <input type="text" placeholder="Last name" name="LastName" maxlength="30" data-bind="value:LastName" id="id_lastName" /><br />
         <input type="text" placeholder="Email" name="email" maxlength="30" data-bind="value:Email" id="id_email" /><br />
         <input id="timeZones">
         <button data-bind="click: save" class="btn">Save</button>

$("#timeZones").kendoComboBox({
              index: 0,
              placeholder: "Select Time Zone",
              dataTextField: "DisplayName",
              dataValueField: "Id",
              filter: "contains",
              dataSource: {
                  type: "json",
                  transport: {
                      read: "/api/TimeZone/Get/"
                  }
              }
          });
Eric
Top achievements
Rank 1
 asked on 30 Aug 2012
2 answers
141 views
Hi guys,

Not too sure about this one, but for some reason the tabstrip icons are not showing on certain Blackberry handsets. I haven't loaded apps on those specific handsets, they just don't show while I'm using Ripple emulator to develop.
Martin
Top achievements
Rank 1
 answered on 30 Aug 2012
0 answers
128 views
Hello,

as demonstrated in this fiddle, using an existing HTML table for Grid definition will only work when creating the grid using the $("#grid").kendoGrid() syntax. Using the kendo.bind($("#grid"), viewModel) syntax will result in the column headers being overwritten. I've traced this to the call to Grid.setDataSource() from the MVVM framework. Stacktrace as follows (version 2012.2.823):

Widget.extend.setDataSource (kendo.all.js:16654)
binders.widget.source.Binder.extend.refresh (kendo.all.js:7740)
Class.extend.bind (kendo.all.js:7109)
BindingTarget.extend.applyBinding (kendo.all.js:7931)
BindingTarget.extend.bind (kendo.all.js:7910)
bindElement (kendo.all.js:8065)
bind (kendo.all.js:8088)
(anonymous function) (gridtest.html:23)

As a matter of fact, any call to Grid.setDataSource() after widget initialization will result in the headers being overwritten. The method used to detect a pre-existing HTML header (in Grid._thead()) fails when that header has been moved to a separate div by the init code. 

On the assumption that the table header should only be initialized once, the attached patch for kendo.all.js seems to fix this immediate problem by checking for an existing thead. I've not done any testing beyond verifying that the table headers are kept intact, so breakage elsewhere may occur.

Regards,
Stig
Stig
Top achievements
Rank 1
 asked on 30 Aug 2012
1 answer
102 views
I just started playing with the DataViz components and I have some line graphs created that work fine in Firefox and Chrome, but not IE.   Any thoughts on what I've missed here?

Sample HTML file attached.
Iliana Dyankova
Telerik team
 answered on 30 Aug 2012
0 answers
101 views
Hi,
I have a problem with the telerik menu, when i use a grid to 100% of page, the menu passes below the grid, i don't know the solution for this problem, ahhh only with Internet Explorer
Gian
Top achievements
Rank 1
 asked on 30 Aug 2012
0 answers
78 views
I have an issue with my web page that contains Kendo UI grid. In this web page, I have a top portion that uses Knockout. The bottom part of the page is a Kendo UI Grid which is from another partial page (RenderPartial)

...
<fieldset >
<div >
<span id="MyId" class="uneditable-input koeditable" data-bind="text: Name"></span>
</div>
</fieldset>
<section>
@{ Html.RenderPartial("DetailEntries", new ViewDataDictionary {{ "Id", @ViewBag.Id } });}
</section>

DetailEntries is the partial page which is a Kendo ui grid with Filterable() option.

I got an error when rendering this page. 

It happens at this knockout function

// The following function is only used internally by this default provider.
// It's not part of the interface definition for a general binding provider.
'parseBindingsString': function(bindingsString, bindingContext) {
try {
var viewModel = bindingContext['$data'];
var rewrittenBindings = " { " + ko.jsonExpressionRewriting.insertPropertyAccessorsIntoJson(bindingsString) + " } ";
return ko.utils.evalWithinScope(rewrittenBindings, viewModel === null ? window : viewModel, bindingContext);
} catch (ex) {
throw new Error("Unable to parse bindings.\nMessage: " + ex + ";\nBindings value: " + bindingsString);
}
}


Error: 
Uncaught Error: Unable to parse bindings. 
Message: ReferenceError: filters is not defined; 
Bindings value: value: filters[0].operator  

bindingsString : "value: filters[0].operator"
bindingContext: ko.bindingContext which contains the ViewModel for my top portion.

If I remove the filterable option from the Kendo UI grid, the page renders without error.

Please help.

Alex
Alex
Top achievements
Rank 1
 asked on 30 Aug 2012
1 answer
86 views
I am using MVC4 with the latest Kendo UI Q2. I am trying to use the mvc wrappers to implement a list view with a view template and an edit template 

After editing a listview item using an edit template, I click the save button. The edit template is immediately replaced by the view template before the Create/Update controller action is hit on the server. If the controller action fails some validation I can not show this to the user as the edit template is no longer visible. Is there a way to make the edit template remain open until either the controller action has completed successfully or if the controller action fails validation push the validation errors to the edit template. This would be a fairly typical pattern.


<div class="k-toolbar k-grid-toolbar">
    <a id="addRoleButton" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new Role</a>
</div>
 
    @(Html.Kendo().ListView<iProjX.Models.RoleModel>(Model.Roles)
        .Name("rolesListView")       
        .TagName("div")       
        .ClientTemplateId("rolesList")       
        .Editable()
        .Pageable()
        .DataSource(dataSource => dataSource           
            .Model(model =>
                {
                    model.Id("RoleId");
                    model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);
                    model.Field(f => f.Title);
                    model.Field(f => f.Description);;
                })
            .Events(e => e               
                .Error("rolesListViewData_error")
                .Change("rolesListViewData_change")
                .RequestStart("rolesListViewData_requestStart"))          
            .Create(create => create.Action("createRole", "Project"))           
            .Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))
            .Update(update => update.Action("updateRole", "Project"))   
            .PageSize(30)           
         )
        .Events(e => e
            .Change("rolesListView_change")
            .Edit("rolesListView_edit")
            .DataBound("rolesListView_databound"))     
    )

view template
//View template
<script type="text/x-kendo-template" id="rolesList">
    <div class="roleView" >
        <div> ${Title} </div>
        <div> ${Description} </div>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
        </div>
    </div>
</script>

edit template
@model iProjX.Models.RoleModel
 
<div class="roleView" id = "newRoleForm2" >
    @Html.ValidationSummary(true)
 
    @Html.HiddenFor(model => model.ProjectId)
    @Html.HiddenFor(model => model.RoleId)
 
    <div class="editor-label">
        @Html.LabelFor(model => model.Title)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Title, new { style = "width:99%", maxlength = 100 })
        <span data-for="Title" class="k-invalid-msg"></span>
    </div>
 
    <div class="editor-label">
        @Html.LabelFor(model => model.Description)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.Description, new { style = "width:100%; height:100px"})
        <span data-for="Description" class="k-invalid-msg"></span>
    </div>
 
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" onclick="updateClick()" href="\\#"><span class="k-icon k-update"></span>Save</a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
    </d
brian keating
Top achievements
Rank 1
 answered on 30 Aug 2012
1 answer
228 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
164 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
160 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
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?