The Table has two columns "button" and "department".
var table = $('#ticketdata').DataTable({
{
data: "button",
name: "button",
className: "button",
},
{
data: "department",
name: "department",
className: "department"
},
The Buttons need to be disabled depending on the "department" Value.
For Example: where the department value is "2000001" the button needs to be disabled.
| Buttons | Departments |
| enabled | 200000 |
|disabled| 200001 |
|enabled | 100055 |
I also prefer it to disable it with Jquery!
My Try was that:
if($('#ticketdata').find('.department').val() == "200001") {
$("#ticketdata").find('button[id=assigned_to]').addClass("disabled");
}
Actually it makes no sense because it needs to know the same row or something like that.
Any Help?
Thanks in advance!
http://live.datatables.net/vosahugu/1/edit
Found a Solution!
Inside the Table where the data is displayed you can see data from other cells with "full."
Related
I have a resource where I list all my projects from server /projects. You can visit specific project going to /projects/:slug.
When I visit projects resource I see this data in Ember Inspector:
/projects
id | Slug | Title |
-------------------------------------------------
1 | first-project | First project |
-------------------------------------------------
2 | second-project | Second project |
-------------------------------------------------
3 | third-project | Third project |
When I visit a project from list of projects I get the same data without new ajax request and everything is working fine. /projects/first-project
The problem comes when I refresh /projects/first-project page. Ember makes an ajax request to fetch data from server but It also inserts an empty row with slug as id to data.
id | Slug | Title |
-------------------------------------------------------------
first-project | | |
-------------------------------------------------------------
1 | first-project | First project |
Now visiting project list It is showing a list of projects but at the top of the list is this empty row. Why it is inserting this slug row to my data? Maybe my logic is wrong.
<li>
<a id="ember451" class="ember-view" href="/projects/undefined">
<script id="metamorph-13-start" type="text/x-placeholder"></script>
<script id="metamorph-13-end" type="text/x-placeholder"></script>
</a>
</li>
My code for projects:
App.Router.map(function() {
this.resource('project', { path: '/projects' }, function() {
this.resource('project.show', { path: ":post_slug"});
});
});
App.Project = DS.Model.extend({
slug: DS.attr("string"),
title: DS.attr("string")
});
App.ProjectIndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('project').then(function(data) {
return data;
});
}
});
App.ProjectShowRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('project', params.post_slug).then(function(data) {
return data;
});
},
serialize: function(model) {
return { post_slug: model.get("slug") };
}
});
I'm using:
DEBUG: -------------------------------
DEBUG: Ember : 1.1.2
DEBUG: Ember Data : 1.0.0-beta.3
DEBUG: Handlebars : 1.0.0
DEBUG: jQuery : 1.9.1
DEBUG: -------------------------------
Adding this helps. now primary key is slug for Project model and it doesn't duplicate rows.
App.ProjectSerializer = DS.RESTSerializer.extend({
normalize: function(type, hash, property) {
hash.id = hash.slug;
return this._super(type, hash, property);
}
});
By calling
store.find('project', 'first-project')
you're treating the slug as the primary key. I guess that's the reason that a new record is initialized (you have one with the actual primary key of the first project which is probably a number, and one with 'first-project' as the primary key.
Try changing the model hook by calling the store's find() method with a hash of search options, in your case:
store.find('project', { slug: 'first-project' })
There are two other ways to solve this problem without extending the RESTSerializer.
First method: If you can make sure that the slug str is unique across the whole app, and you don't really care about id numbers. Then you can set the ids for each project using the slug str because ids don't have to be numbers.
{ id: 'first-project', content: 'xxx' }
{ id: 'second-project', content: 'yyy' }
Second method. use the modelFor method. example code below:
App.ProjectShowRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('its_parent_route').findBy('slug', params.post_slug);
},
serialize: function(model) {
return { post_slug: model.get("slug") };
}
});
By calling modelFor here, it won't make duplicate calls to the server since you're using ember data.
Hope it helps.
Very easy case displayed here: http://jsbin.com/ahoYoPi/3/edit
I need to specify that the child's inner field to filter (eq) against the parent's value field is "category_id"... Of course, Kendo's documentation doesn't say anything about how to do that... Or is it something so super obvious it doesn't deserve to be explained ?
var categoriesList = new Array (
{"id":"1","categoryName":"Fruits"},
{"id":"2","categoryName":"Vegetables"} );
var productsList = new Array(
{"id":"1","categorie_id":"1","productName":"Apples"},
{"id":"2","categorie_id":"1","productName":"Oranges"},
{"id":"3","categorie_id":"2","productName":"Carottes"},
{"id":"4","categorie_id":"2","productName":"Patatoes"});
$("#categories").kendoDropDownList({
dataTextField: "categoryName",
dataValueField: "id",
dataSource: categoriesList,
optionLabel: "----------------" ,
change: function() {
$("#products").data("kendoDropDownList").value(0);
}
});
$("#products").kendoDropDownList({
cascadeFrom: "categories",
dataTextField: "productName",
dataValueField: "id",
dataSource: productsList,
optionLabel: "----------------" ,
});
The documentation about cascading is available here: http://docs.kendoui.com/getting-started/web/combobox/cascading
Here is how filtering works:
If the parent has a value, then the child will be enabled and will
filter its data depending on it. Here how the filter options will look
like:
field: "parentID", //the dataValueField of the parent
operator: "eq",
value: "" //parent's value
This means that the child dropdownlist (combobox) will use the field configured via dataValueField of the parent to do the filtering (cascading). In your case this doesn't work because dataValueField of the parent is set to "id". This field however serves a different purpose in the productsList array.
Currently there is no feature which allows one to specify the field used for cascading.
You have two options:
Do what #OnaBai suggested. Rename the "id" field of the categoriesList to "categorie_id" and set dataValueField accordingly.
Implement cascading manually. First remove the cascadeFrom option and then do this in the change event of the parent:
change: function() {
var products = $("#products").data("kendoDropDownList");
products.dataSource.filter( {
field: "categorie_id",
value: this.value(),
operator: "eq"
});
products.value(0);
}
Here is a live demo: http://jsbin.com/ogEj/1/edit
I have a column with Actions which contains icons. One of the icon ( second icon) is tied to qtip. So when I hover over it shows the empty div which looks bad. It is jqGrid's hover over element value. But as in actions i do not have any value it shows blank.
What i can do to disable it for that particular column ?
In your colModel options, you can specify title:false like this:
colModel: [
{ name: "Actions", title: false },
{ name: "Type", index: "Type" },
{ name: "ReceiptLoc", index: "ReceiptLoc" }
],
That empty little box you are seeing is the tooltip copy of text in the cell. Your Action column has no bound values in the cell, that is why it is empty.
When loading a dgrid from a dojo store, is there a way to specify a column to be sorted by default.
Say I have 2 columns, Name and Email, I want the name column sorted by default when the grid is first loaded. What I want is the equivalent of the user clicking on the 'Name' header (complete with the sort arrow indicating the sort direction).
Thanks,
John
You can do something like this :
var mygrid = new OnDemandGrid({
store : someStore,
queryOptions: {
sort: [{ attribute: "name" }]
}
// rest of your grid properties
}, "someNode");
dgrid 1.1.0 - set initial/default sort order
var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest({target: apiUrl, useRangeHeaders: true, idProperty: 'id'});
var grid = new (declare([OnDemandGrid, Selection, Editor]))({
collection: store,
sort: [{"property":"name", "descending": false}],
className: "dgrid-autoheight",
columns: {
id: {
label: core.id
},
category_text: {
label: asset.category
},
name: {
label: asset.model,
},
Modifying an element using set of a KendoUI grid removes the selection.
If a have a KendoUI DataSource defined as:
var dataSource = new kendo.data.DataSource({
data : [
{ "id": 1, "item": "item1", "value": "foo" },
{ "id": 2, "item": "item2", "value": "foo" },
{ "id": 3, "item": "item3", "value": "foo" },
{ "id": 4, "item": "item4", "value": "foo" }
],
pageSize: 5
});
and the grid as:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
columns : [
{ field: "item", title: "Item" },
{ field: "value", title: "Value" }
],
selectable: "row"
}).data("kendoGrid");
If I click in a row (select it) and then update the model using the following code:
dataSource.data()[0].set("value", "bar");
The selection gets lost.
Sample code in JSFiddle here
Instructions:
Select any row.
Click the button for changing the value of the first row.
Is there any way of preserving selection when updating a local DataSource?
This is expected behavior when a change event of the dataSource occurs the Grid reacts and it is redrawn. You can silently update the field like this:
dataSource.data()[0].value = "bar";
However this will not trigger the change event and the Grid wont be updated either.
To preserve the selection of the Grid between 'refreshes' you can use the approach covered in this code library article. You can store them in a cookie or in the memory, it is up to you.
Regards
I was able to find solution for a very similar problem. I tried to select next row after modifying selected row, but updating data item cleared selection.
The trick was to save data-uid of the element to be selected. After update, I simply select element by uid.
var selected = grid.select();
var next = selected.next();
var nextUid = next.data("uid");
var dataItem = grid.dataItem(selected);
if (dataItem) {
dataItem.set("value", dataItem.get("value") - 1);
if (next.length)
grid.select($("#grid").find("*[data-uid='" + nextUid + "']"));
}
You can try it here.