I'm trying to create a Hierarchical Tree Table in Eclipse Neon for a SAPUI5 Project.
I've looked at the following SDK for TreeTables : https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.BasicODataTreeBinding/preview
I'm not getting any joy when executing my project, nothing is displayed in my chrome web browser.
Please see below my various code snippets, where am I going wrong?
Common.view.xml :
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:tree="sap.ui.table"
controllerName="testcommon.Common" xmlns:html="http://www.w3.org/1999/xhtml">
<Page>
<content>
<tree:TreeTable id="treeTable"
selectionMode="Single"
enableColumnReordering="false"
expandFirstLevel="false"
rows="{
path : '/table',
parameters : {
countMode: 'Inline',
treeAnnotationProperties : {
hierarchyLevelFor : 'HierarchyLevel',
hierarchyNodeFor : 'NodeID',
hierarchyParentNodeFor : 'ParentNodeID',
hierarchyDrillStateFor : 'DrillState'
}
}
}">
<tree:columns>
<tree:Column label="Description">
<Text text="Description"/>
</tree:Column>
<tree:Column label="HierarchyLevel">
<Text text="HierarchyLevel" wrapping="false" />
</tree:Column>
<tree:Column label="NodeID">
<Text text="NodeID" wrapping="false" />
</tree:Column>
<tree:Column label="ParentNodeID">
<Text text="ParentNodeID" wrapping="false" />
</tree:Column>
</tree:columns>
</tree:TreeTable>
</content>
</Page>
Common.controller.js :
sap.ui.controller("testcommon.Common", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf testcommon.Common
*/
onInit: function() {
var model1 = new sap.ui.model.json.JSONModel();
model1.loadData("model/mock.json");
this.getView().setModel(model1, "model1");
jQuery.sap.require("sap.m.MessageBox");
},
index.html :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("testcommon");
var view = sap.ui.view({id:"idCommon1", viewName:"testcommon.Common", type:sap.ui.core.mvc.ViewType.XML});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
mock.json file which is in folder model under WebContent :
{"table":
[
{
"NodeID": 1,
"HierarchyLevel": 0,
"Description": "1",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 2,
"HierarchyLevel": 0,
"Description": "2",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 3,
"HierarchyLevel": 0,
"Description": "3",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 4,
"HierarchyLevel": 1,
"Description": "1.1",
"ParentNodeID": 1,
"DrillState": "leaf"
},
{
"NodeID": 5,
"HierarchyLevel": 1,
"Description": "1.2",
"ParentNodeID": 1,
"DrillState": "expanded"
},
{
"NodeID": 6,
"HierarchyLevel": 2,
"Description": "1.2.1",
"ParentNodeID": 5,
"DrillState": "leaf"
},
{
"NodeID": 7,
"HierarchyLevel": 2,
"Description": "1.2.2",
"ParentNodeID": 5,
"DrillState": "leaf"
},
{
"NodeID": 8,
"HierarchyLevel": 1,
"Description": "2.1",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 9,
"HierarchyLevel": 1,
"Description": "2.2",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 10,
"HierarchyLevel": 1,
"Description": "2.3",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 11,
"HierarchyLevel": 1,
"Description": "3.1",
"ParentNodeID": 3,
"DrillState": "expanded"
},
{
"NodeID": 12,
"HierarchyLevel": 2,
"Description": "3.1.1",
"ParentNodeID": 11,
"DrillState": "expanded"
},
{
"NodeID": 13,
"HierarchyLevel": 3,
"Description": "3.1.1.1",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 14,
"HierarchyLevel": 3,
"Description": "3.1.1.2",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 15,
"HierarchyLevel": 3,
"Description": "3.1.1.3",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 16,
"HierarchyLevel": 3,
"Description": "3.1.1.4",
"ParentNodeID": 12,
"DrillState": "leaf"
}
]}
When run index.html as Web App Preview I only see a blank screen and I don't see any errors in F12 Developer tools in Chrome. Please assist.
Thanks lots,
Mark
You can only use treeAnnotationProperties with an OData model. It won't work with a JSON model.
Try to structure your data differently and bind it using the arrayNames parameter, like in the example below:
https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.JSONTreeBinding/code
Related
I have own algorithm for calculating column width and want have it unchangeable,
but ag-Grid resize it! After searching docs for all available methods to achieve needed results, but not have.
I prepare this pure minimal html file to illustrate situation.
Does anyone know the right way?
</div>
<script charset="utf-8">
'use strict'
let gridOptions = {
defaultColDef: {
editable: true,
sortable: true,
flex: 1,
minWidth: 20,
maxWidth: 400,
filter: true,
resizable: false,
suppressSizeToFit: true,
suppressResize: true,
headerClass: 'fixed-size-header',
},
columnDefs: [
{
"field": "id",
"width": 80
},
{
"field": "name",
"width": 350
},
{
"field": "created_at",
"width": 140
},
{
"field": "updated_at",
"width": 140
}
],
rowData: [
{"id": 1,
"name": "Mathematics",
"created_at": "2020-04-22 10:32:13 UTC",
"updated_at": "2020-04-22 10:32:13 UTC"
},
{"id": 2,
"name": "Algebra",
"created_at": "2020-04-22 10:32:13 UTC",
"updated_at": "2020-04-22 10:32:13 UTC"
} ]};
document.addEventListener('DOMContentLoaded', () => {
const eGridDiv = document.querySelector('#GridDiv');
new agGrid.Grid(eGridDiv, gridOptions);
});
</script>
Your problem is you are using flex: 1. The definition for setting the flex property is:
Used instead of width when the goal is to fill the remaining empty
space of the grid
Remove the flex: 1 from your defaultColDef.
See here.
I'm trying to get the GitHub data using Talend big data. The thing is, i have multiple URLs,because used each URL to take some values & stored into single mongoDB. The below order only i'm going to try & get the informations,
https://api.github.com/users/sample/repos
https://api.github.com/repos/sample/awesome-ciandcd/commits
https://api.github.com/repos/sample/awesome-ciandcd/contributors
Each URLs are giving the single JSONArray with multiple data format.Please give some suggestion to do this. I've already tried with sub-jobs component. But not get clear job.
My Output Should be like,
{
"gitname": "sample",
"gitType" : "User",
"password": "password",
"repoCount": 3,
"repositoryDetails": [
{
"repoName": "MergeCheckRepository",
"fileCount": 10,
"branchCount": 6,
"releaseCount": 2,
"commitsCount": 10,
"contributorsCount": 3,
"totalPulls": 1,
"mergeCount": 1,
"totalIssues": 12,
"closedIssueCount": 3,
"watchersCount": 1,
"stargazersCount": 4,
"contributorsDetails": [
{
"login": "sample",
"avatarURL": "https://avatars2.githubusercontent.com/u/30261572?v=4",
"contributions": 3
}
],
"commitDetails": [
{
"name": "sample",
"email": "sampletest#test.com",
"date": "2017-07-20T09:09:09Z"
}
]
},
{
"repoName": "Dashboard",
"filecount": 19,
"branchCount": 4,
"releasecount": 2,
"commitsCount": 5,
"contributorsCount": 3,
"totalPulls": 1,
"totalIssues": 2,
"closedIssueCount": 3,
"watchersCount": 1,
"stargazersCount": 4,
"contributorsDetails": [
{
"login": "sample",
"avatarURL": "https://avatars2.githubusercontent.com/u/30261572?v=4",
"contributions": 3
},
{
"login": "Dashboard",
"avatarURL": "https://avatars2.githubusercontent.com/u/30261572?v=4",
"contributions": 3
}
],
"commitDetails": [
{
"name": "sample",
"email": "sampletest#test.com",
"date": "2017-07-14T09:09:09Z"
},
{
"name": "Dashboard",
"email": "prakash.thangasamy#test.com",
"date": "2017-07-19T09:09:09Z"
},
{
"name": "testrepo",
"email": "test.dashboard#test.com",
"date": "2017-07-20T09:09:09Z"
}
]
}
]
}
How to achieve this one with sub-job? Is there any other way to do this?
What is the correct way to manage the state of radio and checkboxes using React?
In some instances a form would be rendered partially completed so some radio and checkboxes would be pre selected on first load.
I have the following code snippet and i cannot get it to work as expected.
var formData = {
"id": 13951,
"webform_id": 1070,
"page": 0,
"type": "radios",
"name": "What industry are you in?",
"tooltip": "",
"weight": 0,
"is_required": 1,
"default_value": "",
"validation": "",
"allow_other_option": 0,
"other_option_text": "",
"mapped_question_id": "a295189e-d8b4-11e6-b2c5-022a69d30eef",
"created_at": "2017-04-07 18:40:39",
"updated_at": "2017-04-07 18:40:39",
"option_conditional_from": null,
"default_value_querystring_key": "",
"deleted_at": null,
"is_auto_save": 0,
"is_component_number_hidden": 0,
"is_component_inline": 0,
"enable_confirm_validation": 0,
"confirm_validation_text": null,
"additional_options": "",
"url_mapping": "",
"webformcomponentoptions": [
{
"id": 13888,
"webform_component_id": 13951,
"key": "Hospitality",
"value": "Hospitality",
"created_at": "2017-04-07 18:40:39",
"updated_at": "2017-04-07 18:40:39",
"group": "",
"selected" : false
},
{
"id": 13889,
"webform_component_id": 13951,
"key": "Retail",
"value": "Retail",
"created_at": "2017-04-07 18:40:39",
"updated_at": "2017-04-07 18:40:39",
"group": "",
"selected" : false
},
{
"id": 13890,
"webform_component_id": 13951,
"key": "Other",
"value": "Other",
"created_at": "2017-04-07 18:40:39",
"updated_at": "2017-04-07 18:40:39",
"group": "",
"selected" : false
}
]
}
class WebformApp extends React.Component {
render() {
return (
<form>
<label>{this.props.webform.name}</label>
<div className="group-wrapper">
<Radio radio={this.props.webform.webformcomponentoptions} />
</div>
</form>
)
}
}
class Radio extends React.Component {
render() {
var options = [];
this.props.radio.forEach(function(radio, i) {
options.push(<Option option={radio} key={radio.id} index={i} />);
})
return (
<div>{options}</div>
)
}
}
class Option extends React.Component {
constructor(props) {
super(props);
this.handleOptionChange = this.handleOptionChange.bind(this);
this.state = {selectedIndex: null};
}
handleOptionChange(e) {
this.setState({selectedIndex: this.props.index}, function() {
});
}
render() {
const selectedIndex = this.state.selectedIndex;
return (
<div>
<input type="radio"
value={this.props.option.value}
name={this.props.option.webform_component_id}
id={this.props.option.id}
checked={selectedIndex === this.props.index}
onChange={this.handleOptionChange} />
<label htmlFor={this.props.option.id}>{this.props.option.key}</label>
</div>
)
}
}
ReactDOM.render(
<WebformApp webform={formData} />,
document.getElementById('app')
);
https://codepen.io/jabreezy/pen/KWOyMb
The most important thing would be to have the Radio component handle the state, and keeping track of the selected option.
In addition, I would simplify by using map instead of forEach, and foregoing the Option component for a class method returning an <input type='radio'>. For simplicity's sake, using the option value for keeping track of the selected state instead of the index, and mimicking React's select component allowing a default value prop instead of setting each option's selected prop (which you don't seem to be using).
Finally, for order's sake, renaming the Radio:s radio prop to the (IMO) more correct options. Ergo (caveat, I haven't tested this):
class WebformApp extends React.Component {
render() {
return (
<form>
<label>{this.props.webform.name}</label>
<div className="group-wrapper">
<Radio options={this.props.webform.webformcomponentoptions} value={this.props.webform.value} />
</div>
</form>
)
}
}
class Radio extends React.Component {
constructor (props) {
super(props)
this.handleOptionChange = this.handleOptionChange.bind(this)
this.state = {value: this.props.value}
}
render() {
return this.props.options.map(this.getOption)
}
handleOptionChange (e) {
this.setState({value: e.target.value})
}
getOption (option) {
return (
<div>
<input type='radio'
value={option.value}
name={option.webform_component_id}
id={option.id}
key={option.id}
checked={this.state.value === option.value}
onChange={this.handleOptionChange} />
<label htmlFor={option.id}>{option.key}</label>
</div>
)
}
}
ReactDOM.render(
<WebformApp webform={formData} />,
document.getElementById('app')
);
Thank you so much for your input Linus. You set me along the correct path and i've solved my problem the following way:
var formData = {
"id": 13951,
"webform_id": 1070,
"page": 0,
"type": "radios",
"name": "What industry are you in?",
"tooltip": "",
"weight": 0,
"is_required": 1,
"default_value": "",
"validation": "",
"allow_other_option": 0,
"other_option_text": "",
"mapped_question_id": "a295189e-d8b4-11e6-b2c5-022a69d30eef",
"created_at": "2017-04-07 18:40:39",
"updated_at": "2017-04-07 18:40:39",
"option_conditional_from": null,
"default_value_querystring_key": "",
"deleted_at": null,
"is_auto_save": 0,
"is_component_number_hidden": 0,
"is_component_inline": 0,
"enable_confirm_validation": 0,
"confirm_validation_text": null,
"additional_options": "",
"url_mapping": "",
"webformcomponentoptions": [
{
"id": 13888,
"webform_component_id": 13951,
"key": "Hospitality",
"value": "Hospitality",
"created_at": "2017-04-07 18:40:39",
"updated_at": "2017-04-07 18:40:39",
"group": "",
"selected" : false
},
{
"id": 13889,
"webform_component_id": 13951,
"key": "Retail",
"value": "Retail",
"created_at": "2017-04-07 18:40:39",
"updated_at": "2017-04-07 18:40:39",
"group": "",
"selected" : false
},
{
"id": 13890,
"webform_component_id": 13951,
"key": "Other",
"value": "Other",
"created_at": "2017-04-07 18:40:39",
"updated_at": "2017-04-07 18:40:39",
"group": "",
"selected" : false
}
]
}
class WebformApp extends React.Component {
render() {
return (
<form>
<label>{this.props.webform.name}</label>
<div className="group-wrapper">
<Radio radio={this.props.webform.webformcomponentoptions} />
</div>
</form>
)
}
};
class Radio extends React.Component {
constructor(props) {
super(props);
this.state = {selectedOption: 'Other'};
}
handleOptionChange(changeEvent) {
this.setState({
selectedOption: changeEvent.target.value
})
};
renderOption(props) {
return (
<div>
<h3>{props.index}</h3>
<input type="radio"
value={props.option.value}
name={props.option.webform_component_id}
id={props.option.id}
checked={props.status}
onChange={props.clickeme} />
<label htmlFor={props.option.id}>{props.option.key}</label>
</div>
)
};
render() {
return (
<div>
{this.props.radio.map(function(radio) {
var selected = this.state.selectedOption === radio.value;
return <this.renderOption option={radio} key={radio.value} status={selected} clickeme={(e)=> this.handleOptionChange(e)} />;
}, this)}
</div>
)
};
};
ReactDOM.render(
<WebformApp webform={formData} />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
hi i need List grouping control by using js view.but openui5 provides code by using xml view.
https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.ListGrouping/preview
how to convert this code into js view and how to make ListGrouping able to selection for both element level and group level and change this as dropdown box
List.view.xml
<mvc:View
controllerName="sap.m.sample.ListGrouping.List"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<List
items="{
path: '/ProductCollection',
sorter: {
path: 'SupplierName',
descending: false,
group: true
},
groupHeaderFactory: '.getGroupHeader'
}"
headerText="Products" >
<StandardListItem
title="{Name}"
description="{ProductId}"
icon="{ProductPicUrl}"
iconDensityAware="false"
iconInset="false" />
</List>
</mvc:View>
List.controller.js
sap.ui.define([
'jquery.sap.global',
'sap/m/GroupHeaderListItem',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, GroupHeaderListItem, Controller, JSONModel) {
"use strict";
var ListController = Controller.extend("sap.m.sample.ListGrouping.List", {
onInit : function (evt) {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
getGroupHeader: function (oGroup){
return new GroupHeaderListItem( {
title: oGroup.key,
upperCase: false
} );
}
});
return ListController;
});
how to write the same code by using js view
I have tried like as follows, but i am getting Error: Missing template or factory function for aggregation items of Element sap.m.List#__list0 !
List.view.js
sap.ui.jsview("oui5mvc.List", {
getControllerName : function() {
return "oui5mvc.List";
},
createContent : function(oController) {
odbbshiftGlobalId = this.getId();
var oMyFlexbox = new sap.m.FlexBox({
items: [
oList = new sap.m.List({
width: '500px',
group: true,
groupHeaderFactory: '.getGroupHeader',
items: [
]
}),
]
});
oMyFlexbox.placeAt(this.getId()).addStyleClass("tes");
}
});
List.controller.js
sap.ui.controller("oui5mvc.List", {
onInit: function() {
var data = {
"ProductCollection": [
{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g",
"Price": 856.49,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 3,
"UoM": "PC",
"Width": 51,
"Depth": 42,
"Height": 18,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-6100.jpg"
},
{
"ProductId": "2212-121-828",
"Name": "Gladiator MX",
"Category": "Graphics Card",
"SupplierName": "Technocom",
"Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV",
"WeightMeasure": 321,
"WeightUnit": "g",
"Price": 81.7,
"CurrencyCode": "EUR",
"Status": "Discontinued",
"Quantity": 10,
"UoM": "PC",
"Width": 34,
"Depth": 14,
"Height": 2,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1071.jpg"
},
{
"ProductId": "K47322.1",
"Name": "Hurricane GX",
"Category": "Graphics Card",
"SupplierName": "Red Point Stores",
"Description": "Hurricane GX: DDR2 RoHS 512MB Supporting 1024MB Clock rate: 550 MHz Memory Clock: 933 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 64-bit Highlighted Features: DVI Out, TV-In, TV-Out, HDTV",
"WeightMeasure": 588,
"WeightUnit": "g",
"Price": 219,
"CurrencyCode": "EUR",
"Status": "Out of Stock",
"Quantity": 25,
"UoM": "PC",
"Width": 34,
"Depth": 14,
"Height": 2,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1072.jpg"
},
],
"ProductCollectionStats": {
"Counts": {
"Total": 14,
"Weight": {
"Ok": 7,
"Heavy": 5,
"Overweight": 2
}
},
"Groups": {
"Category": {
"Projector": 1,
"Graphics Card": 2,
"Accessory": 4,
"Printer": 2,
"Monitor": 3,
"Laptop": 1,
"Keyboard": 1
},
"SupplierName": {
"Titanium": 3,
"Technocom": 3,
"Red Point Stores": 5,
"Very Best Screens": 3
}
},
"Filters": [
{
"type": "Category",
"values": [
{
"text": "Projector",
"data": 1
},
{
"text": "Graphics Card",
"data": 2
},
{
"text": "Accessory",
"data": 4
},
{
"text": "Printer",
"data": 2
},
{
"text": "Monitor",
"data": 3
},
{
"text": "Laptop",
"data": 1
},
{
"text": "Keyboard",
"data": 1
}
]
},
{
"type": "SupplierName",
"values": [
{
"text": "Titanium",
"data": 3
},
{
"text": "Technocom",
"data": 3
},
{
"text": "Red Point Stores",
"data": 5
},
{
"text": "Very Best Screens",
"data": 3
}
]
}
]
}
};
var oTemplate11 = new sap.m.StandardListItem({title : "{Name}"});
oList.setModel(new sap.ui.model.json.JSONModel(data));
oList.bindItems("/ProductCollection");
oList.placeAt('content');
},
getGroupHeader: function (oGroup){
return new sap.m.GroupHeaderListItem( {
title: oGroup.key,
upperCase: false
});
},
});
Your call to bind items to the list is not entirely correct.
The method takes an object with binding information as parameter instead of just the path to the model property. See the documentation for bindItems and bindAggregation in general.
In your case it should look like
oList.bindItems({
path: "/ProductCollection",
template: new sap.m.StandardListItem({
title: "{Name}",
description: "{ProductId}",
icon: "{ProductPicUrl}"
})
});
Hopefully someone can help me with this - I've been staring at this for 8 hours and can't seem to find a solution. I'm trying to implement a pretty simple Kendo UI MVVM grid. The grid just has a list of roles with an attached category. When you click edit, the grid should allow an inline edit and the category column should turn into a drop down - which is a template that is also bound to a field in the view model.
Here's my jsfiddle: http://jsfiddle.net/Icestorm0141/AT4XT/3/
The markup:
<script type="text/x-kendo-template" id="someTemplate">
<select class="form-control categories" data-auto-bind="false" data-value-field="CategoryId" data-text-field="Description" data-bind="source: categories"></select>
</script>
<div class="manage-roles">
<div data-role="grid"
data-scrollable="true"
data-editable="inline"
data-columns='[
{ "field" : "JobTitle", "width": 120, "title" : "Job Title Code" },
{ "field" : "Description" },
{ "field" : "Category", "template": "${Category}","editor" :kendo.template($("#someTemplate").html()) },
{"command": "edit"}]'
data-bind="source: roles"
style="height: 500px">
</div>
</div>
And the javascript:
var roleViewModel = kendo.observable({
categories: new kendo.data.DataSource({
data: [
{ "CategoryId": 1, "Description": "IT" },
{ "CategoryId": 2, "Description": "Billing" },
{ "CategoryId": 3, "Description": "HR" },
{ "CategoryId": 4, "Description": "Sales" },
{ "CategoryId": 5, "Description": "Field" },
{ "CategoryId": 10, "Description": "Stuff" },
{ "CategoryId": 11, "Description": "Unassigned" }
]
}),
roles: new kendo.data.DataSource({
data: [
{ "RoleId": 1, "JobTitle": "AADM1", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
{ "RoleId": 2, "JobTitle": "AADM2", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
{ "RoleId": 3, "JobTitle": "ACCIN", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
{ "RoleId": 4, "JobTitle": "ACCSU", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
]
})
});
kendo.bind($(".manage-roles"), roleViewModel);
I havent been able to figure out why the editor template is not binding the drop down. When I use the same markup for template rather than binding to the category name with ${Category}, it works for the template property. (For some reason this doesnt work in fiddle. But the exact same code works locally).
At this point I'll take any suggestions/approaches anything. I really wanted to use MVVM and not the .kendoGrid() syntax but I'll get over myself if it cannot be done. Anyone got any insight into whats going on with the editor template?
You can still build your grid using MVVM, but I think you have to make custom editors with a function call.
So instead of "editor" :kendo.template($("#someTemplate").html()), you just call a function.
edit: rolesViewModel.categoryEditor
See http://demos.kendoui.com/web/grid/editing-custom.html
See sample http://jsbin.com/UQaZaXO/1/edit