I want to create a custom grid on My Dashboard of User Stories under a portfolio item without child stories.
A custom grid on My Dashboard with Object: PortfolioIetm Feature and query UserStories.DirectChildrenCount = 0
it will produce this error:
Could not parse: Attribute "UserStories" on type PortfolioItems is not allowed in query expressions.
Here is a custom App SDK 2 app that builds a grid of Features with user stories where DirectChildrenCount = 0. It accesses the collection of stories on every feature
var stories = feature.getCollection('UserStories');
but populates the grid only with those stories that have no children. Here is the full App.html code that can be pasted into a custom tab:
<!DOCTYPE html>
<html>
<head>
<title>GridExample</title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'PortfolioItem/Feature',
fetch: ['FormattedID','Name','UserStories'],
pageSize: 100,
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_createGrid: function(features) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: features,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
{
text: 'Story Count', dataIndex: 'StoryCount'
},
{
text: 'User Stories', dataIndex: 'UserStories',
renderer: function(value) {
var html = [];
Ext.Array.each(value, function(userstory){
html.push('' + userstory.FormattedID + '')
});
return html.join(', ');
}
}
]
});
},
_onDataLoaded: function(store, data){
var features = [];
var pendingstories = data.length;
//debugger;
Ext.Array.each(data, function(feature) {
var f = {
FormattedID: feature.get('FormattedID'),
Name: feature.get('Name'),
_ref: feature.get("_ref"),
StoryCount: feature.get('UserStories').Count,
UserStories: []
};
var stories = feature.getCollection('UserStories');
stories.load({
fetch: ['FormattedID'],
callback: function(records, operation, success){
Ext.Array.each(records, function(story){
var number = story.get('DirectChildrenCount');
if (number == 0) {
f.UserStories.push({_ref: story.get('_ref'),
FormattedID: story.get('FormattedID')
});}
}, this);
--pendingstories;
if (pendingstories === 0) {
this._createGrid(features);
}
},
scope: this
});
features.push(f);
}, this);
}
});
Rally.launchApp('CustomApp', {
name:"GridExample"
//parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
Related
In my project am showing js grid from partial view. so tried like this
View
<div id="searchgrid" class="col-lg-12">
#Html.Partial("ResultGrid", new List<SCM_MVC.Models.User>(), new ViewDataDictionary(this.ViewData) { { "index" , ViewData["Form"] } })
</div>
<script src="~/assets/js/jquery-1.10.2.js"></script>
<script>
var url = '#Url.Action("ResultGrid", "User", new { xEdit = ViewData["Form"]})';
$('#btnloadgrid').click(function () {
$('#searchgrid').load(url);
})
</script>
Partial View
#model IEnumerable<SCM_MVC.Models.User>
#{
/**/
/**/
#section head {
#*<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/demos.css" />*#
<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/jsgrid.css" />
<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/theme.css" />
<script src="~/SCM/jsgrid/js/jquery-1.8.3.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.core.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.load-indicator.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.load-strategies.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.sort-strategies.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.field.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.core.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.text.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.number.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.select.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.checkbox.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.control.js"></script>
}
/**/
<table id="jsGrid"></table>
#section scripts {
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script>
$(function () {
$("#jsGrid").jsGrid({
height: "70%",
width: "100%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the user?",
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "/api/data",
data: filter,
dataType: "json"
});
},
insertItem: function (item) {
return $.ajax({
type: "POST",
url: "/api/data",
data: item,
dataType: "json"
});
},
updateItem: function (item) {
return $.ajax({
type: "PUT",
url: "/api/data/" + item.ID,
data: item,
dataType: "json"
});
},
deleteItem: function (item) {
return $.ajax({
type: "DELETE",
url: "/api/data/" + item.ID,
dataType: "json"
});
}
},
fields: [
{ name: "user_id", title: Resources.Resource.user_id, type: "text", width: 150 },
{ name: "username", title: Resources.Resource.user_name, type: "text", width: 50 },
{ name: "mailid", title: Resources.Resource.mailid, type: "text", width: 200 },
{ name: "role", title: Resources.Resource.role, type: "text", width: 50 },
{ name: "dept", title: Resources.Resource.dept, type: "text", width: 100 },
{ name: "designation", title: Resources.Resource.designation, type: "text", width: 100 },
{ name: "city", title: Resources.Resource.city, type: "text", width: 100 },
{ name: "country", title: Resources.Resource.country, type: "text", width: 100 },
{ type: "control" }
]
});
});
</script>
}
}
DataController
namespace SCM_MVC.Controllers
{
public class DataController : ApiController
{
// GET: Data
public IEnumerable<object> Get()
{
//ClientFilter filter = GetFilter();
//var result = DB.Client.Where(c =>
// (String.IsNullOrEmpty(filter.Name) || c.Name.Contains(filter.Name)) &&
// (String.IsNullOrEmpty(filter.Address) || c.Address.Contains(filter.Address)) &&
// (!filter.Married.HasValue || c.Married == filter.Married) &&
// (!filter.Country.HasValue || c.Country == filter.Country)
//);
Models.User xuser = new Models.User();
List<Models.User> xuserlist = new List<Models.User>();
//if (ViewData["index"] == null)
//{
// ViewData["index"] = xEdit;
//}
xuser.UserId = "US-0001";
xuser.UserName = "Robert";
xuser.Mailid = "robert#gmail.com";
xuser.Role = "Admin";
xuser.Designation = "Sales Admin";
xuser.Dept = "Sales";
xuser.State = "Tamil Nadu";
xuser.Country = "India";
xuserlist.Add(xuser);
return xuserlist;
}
}
}
UserController
public ActionResult ResultGrid(string xEdit)
{
Models.User xuser = new Models.User();
List<Models.User> xuserlist = new List<Models.User>();
xuser.UserId = "US-0001";
xuser.UserName = "Robert";
xuser.Mailid = "robert#gmail.com";
xuser.Role = "Admin";
xuser.Designation = "Sales Admin";
xuser.Dept = "Sales";
xuser.State = "Tamil Nadu";
xuser.Country = "India";
xuserlist.Add(xuser);
return PartialView(xuserlist);
}
But in Screen its not showing. What am doing wrong here?
Thanks
Am using Visual Studio 2017 ASP.Net MVC
I am trying to display ScheduleState for UserStories in a grid.
I am not able to display ScheduleState as editable bar, like we see in Rally, with DPCA bar-columns for each state.
For e.g. SimpleTreeGrid example on below link shows user-story schedule state as DPCA bar-columns.
https://help.rallydev.com/apps/2.1/doc/#!/example/simple-tree-grid
Code is as below.
<!DOCTYPE html>
<html>
<head>
<title>Custom Store Grid Example</title>
<script type="text/javascript" src="/apps/2.1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CustomStoreGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
console.log('launch');
Ext.create('Rally.data.wsapi.Store', {
model: 'userstory',
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['FormattedID', 'ScheduleState', 'ScheduleStatePrefix' ]
});
},
_onDataLoaded: function(store, data) {
console.log('_onDataLoaded data', data);
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
data: data
}),
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Prefix',
dataIndex: 'ScheduleStatePrefix',
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate', { field: 'ScheduleStatePrefix'}),
},
{
text: 'State',
dataIndex: 'ScheduleState',
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate', { field: 'ScheduleState'}),
}
]
});
}
});
Rally.launchApp('Rally.example.CustomStoreGrid', {
name: 'Custom Store Grid Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Does it need to be a custom store?
If not, the following _onDataLoaded works:
_onDataLoaded: function(store, data) {
console.log('_onDataLoaded data', data);
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: true,
store: store,
columnCfgs: [
{
text: 'ID',
dataIndex: 'FormattedID',
width: 100
},
{
text: 'Prefix',
dataIndex: 'ScheduleStatePrefix'
},
{
text: 'State',
dataIndex: 'ScheduleState'
}
]
});
}
});
![
this is the project structure I am using. On adding a local URL like this below code is not working. url:'data/showStudentInfo.html']3I am using Ext Js version 4.1.1
In my application , I am having a grid, which uses a store.
On clicking "click me" button I want to redirect to the server, for test purpose I am using a basic google url,
But the class Ext.Ajax.Request is not working I think
Please help , as I am new to Ext js, I am not aware of the mistake I am making.
I am trying this in notepad++, as well as in eclipse ide (indigo version).
both with same output, Ext.Ajax.Request part not working.
It will of great help if anyone have suggestion as if I want to send
Thanking in advance
Below is my html and js file
practiseCellEditEx.js
Ext.require([
'Ext.data.*',
'Ext.Ajax.',
'Ext.grid.*'
]);
function getRandomDate() {
var from = new Date(1900, 0, 1).getTime();
var to = new Date().getTime();
var date = new Date(from + Math.random() * (to - from));
return Ext.Date.clearTime(date);
}
function createFakeData(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe'];
var lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias'];
var data = [];
for (var i = 0; i < count ; i++) {
var dob = getRandomDate();
var firstNameId = Math.floor(Math.random() * firstNames.length);
var lastNameId = Math.floor(Math.random() * lastNames.length);
var name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push([name, dob]);
}
return data;
}
Ext.onReady(function(){
Ext.define('Person',{
extend: 'Ext.data.Model',
fields: ['Name', 'dob']
});
var store = Ext.create('Ext.data.Store', {
model: 'Person',
autoLoad: true,
proxy: {
type: 'memory',
data: createFakeData(10),
reader: {type: 'array'}
},
sorters: [{
direction:'ASC'
}]
});
Ext.create('Ext.grid.Panel', {
store: store,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
})
],
columns: [
{
text: "Name",
width:120,
dataIndex: 'Name',
editor : {
xtype: 'textfield',
allowBlank:false
}
},
{
text: "DOB",
width: 120,
dataIndex: 'dob',
renderer: Ext.util.Format.dateRenderer('M d, Y'),
editor: {
xtype: 'datefield',
format: 'M d, Y',
minValue: '01/01/1900',
maxValue: new Date()
}
},
{
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'http://etf-prod-projects-1415177589.us-east-1.elb.amazonaws.com/trac/docasu/export/2/trunk/client/extjs/shared/icons/fam/delete.gif',
handler: function(grid, rowIndex, colIndex) {
store.removeAt(rowIndex);
}
}]
}
],
renderTo:'example-grid',
width: 280,
height: 280
});
Ext.create('Ext.Button', {
text: 'Click me',
// renderTo: Ext.getBody(),
renderTo:'myBtn',
handler: getName
});
function getName (btn)
{
alert("hello");
var records = store.getAt(1);
alert('the name at index 1 is:'+records.get('Name'));
Ext.Ajax.request({
url : 'https://www.google.co.in/'
});
};
/*
function buttonClicked() {
Ext.MessageBox.confirm( 'Delete this part ? :' );
}*/
});
practiseCellEditEx.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ExtJS Samples</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="practiseCellEditEx.js"></script>
</head>
<body>
<h2> <b>Helllo , today's Date is 02.12.2015 </b></h2>
<div id="example-grid"></div>
<!--<button id="myBtn"></button>-->
<div id="myBtn"></div>
</body>
</html>
The problems seems to be simply the request going to google.com. In my browser it is blocked because it is a cross-origin request (an ajax request to another domain), see also here for further information: https://en.wikipedia.org/wiki/Same-origin_policy.
The same code with a request to a local URL works fine.
I have a grid in my application where the user wants the following functionality.
Scenerio
There are 4 columns in the grid, let's call them A, B, C and D.
Multiple columns are sortable and can be reordered.
The default sort is column A, B, C, D
If the user drags column C to be the first column, then the sort should be C, A, B, D.
I know there's a columnOrder event on the grid. Is this functionality possible? Is there an example anywhere or could someone give me direction on how to accomplish this functionality?
Thanks
Jim
In the event handler you can get the new column order from: this.columns. Then you should compose the sorting criteria and apply it.
Something like:
columnReorder: function() {
var sort = [];
$.each(this.columns, function(idx, elem) {
// In my case order by those columns that start with "Ship"
if (elem.field.lastIndexOf("Ship", 0) === 0) {
sort.push({field: elem.field, dir: "asc"});
}
});
this.dataSource.sort(sort);
},
Following a runnable example.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShippedDate: {type: "date" }
}
}
},
pageSize: 15
},
height: 550,
sortable: true,
reorderable: true,
resizable: true,
pageable: true,
columnReorder: function() {
var sort = [];
$.each(this.columns, function(idx, elem) {
if (elem.field.lastIndexOf("Ship", 0) === 0) {
sort.push({field: elem.field, dir: "asc"});
}
});
this.dataSource.sort(sort);
},
columns: [
{
field: "OrderID",
title: "ID",
width: 80
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}",
width: 200
}
]
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-office365.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.office365.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<div id="grid"></div>
I'm still finding my way with Backbone and I've always use Prototype instead of jQuery in the past so please forgive me if I'm doing something stupid.
I'm trying to develop a UI containing several connected unordered lists where each sortable list is represented by a separate Backbone collection. I'm using ICanHaz and Mustache templates but that's not of importance for my question.
When dragging items between the lists, how would I best achieve the automatic updating of the collections (remove a model from one and insert it into another)? I'm currently trying to use the receive and remove methods in the jQueryUI Sortable interaction — am I at least on the right lines?
var WS = {};
(function(ns) {
ns.Item = Backbone.Model.extend();
ns.Content = Backbone.Collection.extend({
model: ns.Item,
url: location.href,
initialize: function(el) {
this.el = $(el);
this.deferred = this.fetch();
},
recalculate: function() {
var count = this.length;
this.el.next(".subtotal").html(count);
},
setOrder: function() {
$.ajax({
url: this.url + "/reorder",
type: "POST",
data: "tasks=" + $(this.el).attr("id") + "&" + this.el.sortable("serialize")
});
}
});
ns.ContentRow = Backbone.View.extend({
tagName: "li",
className: "item",
events: {
"click .delete": "destroy"
},
initialize: function(options) {
_.bindAll(this, "render", "destroy");
this.model.bind("change", this.render);
this.model.view = this;
},
render: function() {
var row = ich.item(this.model.toJSON());
$(this.el).html(row);
return this;
},
destroy: function() {
if (confirm("Really delete?")) {
this.model.destroy({
success: function(model, response) {
$(model.view.el).remove();
},
error: function(model, response) {
console.log(response);
}
});
}
}
});
ns.ListView = Backbone.View.extend({
initialize: function(collection) {
this.el = collection.el;
this.collection = collection;
this.collection.bind("add", this.addOne, this);
_.bindAll(this, "addOne");
this.el.sortable({
axis: "y",
connectWith: ".tasks",
receive: _.bind(function(event, ui) {
// do something here?
}, this),
remove: _.bind(function(event, ui) {
// do something here?
}, this),
update: _.bind(function(event, ui) {
var list = ui.item.context.parentNode;
this.collection.setOrder();
}, this)
});
},
insert: function(item) {
var prefix = this.el.parentsUntil('ul').parent().attr("id"),
view = new ns.ContentRow({
model: item,
id: prefix + "_" + item.id
});
this.el.append(view.render().el);
},
addOne: function(item) {
if (item.isNew()) {
item.save({}, {
success: _.bind(function(model, response) {
// I should set id from JSON response when live
model.set({ id: this.collection.length });
this.insert(model);
}, this)
});
} else {
this.insert(item);
}
},
addAll: function() {
this.collection.each(this.addOne);
},
render: function() {
this.collection.deferred.done(_.bind(function() {
this.addAll();
}, this));
}
});
ns.AppView = Backbone.View.extend({
lists: [],
initialize: function(holder) {
holder.find("ul").each(_.bind(function(index, list) {
var Items = new WS.Content(list),
App = new WS.ListView(Items);
App.render();
this.lists.push(Items);
}, this));
}
});
})(WS);
$(document).ready(function() {
var App = new WS.AppView($("#tasks"));
});
You are on the right track. You will probably want to add the id of each sortable element into the template somewhere. Then when you receive the event, you know which model to add or remove from the collection. For example add...
<div data-id={{id}}> ... my thing ... </div>
And in the sortable call get the target's id attribute and call Collection.add() or remove()
Just use Backbone.CollectionView.. it has this functionality built in out of the box.
var listView = new Backbone.CollectionView( {
el : $( "#list1" ),
sortable : true,
sortableOptions : {
connectWith : "#list2"
},
collection : new Backbone.Collection
} );
var listView = new Backbone.CollectionView( {
el: $( "#list2" ),
sortable : true,
sortableOptions : {
connectWith : "#list1"
},
collection : new Backbone.Collection
} );