I am trying to create a hidden column which will contain the unique "id" of the row as an attribute in say a "data-id" one. Because i can't seem to work out how to retrieve the data model behind the row. I'm using server-side datasource.
columns: [{
property: 'hiddencolumn',
label: '',
hidden: true <-- ?????
} .. .. ],
In the formatter i use some placeholder tag, could be a span
$.each(items, function(index, item) {
item.hiddencolumn = '<span data-id="' + item.id + '"</span>';
});
then i add a click handler to the row and then get the data-id column:
$('#MyGrid').on('loaded', function() {
$('#MyGrid > tbody > tr').click(function() {
console.log($(this).find('> td > span').attr('data-id'));
});
});
Is this correct? Or should I attempt to add data-id to the tr tag/row itself? The above concept works, but i just need to know how to hide the column :)
thanks
EDIT 14th Apr - here's what I did to solve this. Use data-id and hide the span in an existing column. For me, I had a "date" and "id" field in my model. I choise to tag id onto the date field.
formatter: function(items) {
$.each(items, function(index, item) {
item.date = item.date + '<span style="visibility: hidden;" data-id="' + item.id + '"/>';
});
}
Then retrieve the id like so (using jquery)
$('#MyGrid').on('loaded', function() {
$('#MyGrid > tbody > tr').click(function() {
console.log($(this).find('> td > span').attr('data-id')); // value is here
});
});
ok?
The columns property is just for visible columns. So, it sounds like you'll want to remove that and in your formatter create a span with a data-id attribute for one of your other (visible) columns. I usually do this in the final column if there are any buttons or other controls for acting on the item in the row.
Related
I'm using an Angular UI Grid in my app. I set enableFiltering to true in the options which made some filter boxes show up above my columns. This is great, but the filters don't work exactly as desired.
If a cell contains the text "I like pizza" and I type "I like", that cell's row is shown as a match. I would also think that if I type "pizza", the "I like pizza" cell/row should show up, but that's not the case.
How can I get the filters to allow searching anywhere in the text, not just from the beginning?
You can use filter: {condition: uiGridConstants.filter.CONTAINS} in the column definition to allow that column to search anywhere in the text.
Here's a sample column definition with this in place:
columnDefs: [
// default
{ field: 'name',
filter: {condition: uiGridConstants.filter.CONTAINS} },
...
You can pass a custom filter object that takes a condition property, which can be a function that takes searchTerm and cellValue. Will display if the function returns true.
Plunkr
{ field: 'name', filter: {
condition: function(searchTerm, cellValue) {
return cellValue.indexOf(searchTerm) > -1
}
}}
I have a KendoUI Grid bound using Angular and I'd like to implement a custom action dropdown command or template column on each row. I need to track the dropdown change event for any of the rows when the grid is in display mode, not edit mode. The dropdown is effectively just a list of all of the name properties of the grid rows that I want to user to be able to select to move the row after another existing row.
For instance, say I have this data:
Id Name Position
A Red 1
B Blue 2
C White 3
I'd like each row to display a dropdown column while in display mode (so it acts like a row command). The dropdown would contain the names Red,Blue,White with corresponding values. When a user picks one of those colors, I will change the position of that row to the row position after the color selected. It's basically a row reorder dropdown instead of using drag and drop.
My other option is to show a couple of template columns with a move up/move down metaphor to do the switch but that gets a little cumbersome when you want to move a row more than a couple of positions.
Any ideas?
Ok, I did some more searching and found out a way to do this although it's not 100% of the way there yet. I also found a way to bind the dropdown to the data that populates the grid
The other thing I found when doing it this way is it is painfully slow in rendering the grid now.
<div id="mainGrid" kendo-grid="mainGrid" k-options="mainGridOptions"></div>
//grid columns
$scope.mainGridOptions = {
dataSource: {
transport: {
read: function (e) {
gridcolumnService.getGridColumns().success(function (data) {
e.success(data);
});
},
},
},
columns: [
{ field: "Name" },
{ field: "ColumnSettings.Type", title: "Type" },
{ field: "ColumnSettings.PrimaryKey", title: "Primary Key", template: '<input type="checkbox" #= ColumnSettings.PrimaryKey ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "ColumnSettings.Title", title: "Title" },
{ field: "ColumnSettings.Editable", title: "Editable", template: '<input type="checkbox" #= ColumnSettings.Editable ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "ColumnSettings.Visible", title: "Visible", template: '<input type="checkbox" #= ColumnSettings.Visible ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "LookupDataCommandId", title: "Lookup", template: '#= LookupDataCommandId ? "Yes" : "" #' },
{ template: '<select id="reorder-dropdown" kendo-drop-down-list k-on-change="exchangeRows(dataItem, kendoEvent)" k-data-source="reorderData()" k-data-text-field="\'Name\'" k-data-value-field="\'GridColumnId\'"></select>' },
{ template: '<a kendo-button k-icon="\'pencil\'" ng-click="editGridColumn(dataItem.GridColumnId)">Edit</a>', width: 100 }
]
};
$scope.reorderData = function() {
return $scope.mainGrid.dataSource.data();
};
$scope.exchangeRows = function (fromRow, e) {
$log.log(fromRow.GridColumnId, e.sender.dataItem().GridColumnId);
};
I have a dynamic form where I am starting with a drop-down field with two values: bar chart and trend chart. If bar chart is selected I want to show a multi-select drop-down box for the dimension values while if trend chart is selected I want to show a single-select drop-down box.
With the template and model shown below, the multi-select box is only shown after the module is saved the first time. How can I get the isBarChart variable to be set so I can use it to determine if the select box shown should be multi-select or single-select before the module has been saved.
Thanks.
From the template:
%div.select_module_type
Module type:
%select{ :class => "module_type" }
{{#select module_type}}
%option{ :value => '' }
%option{ :value => 'bar_chart' } Bar chart
%option{ :value => 'trend_chart' } Trend chart
{{/select}}
%div.select_dimension_value
Dimension value:
{{#if isBarChart}}
%select.dimension_value{ 'multiple' => true }
{{#select dimension_value}}
{{/select}}
{{else}}
%select.dimension_value
{{#select dimension_value}}
{{/select}}
{{/if}}
From the model:
isBarChart: ->
return #get('module_type') == 'bar_chart'
From the view:
showDimensionValuesSelector: (e) ->
$(#el).find('div.select_dimension_value').hide()
$(#el).find('div.date').hide()
this_selector = $(#el).find('select.module_type')
table = $(#el).find('select.table').val()
return true if table == ''
dimension_selector = $(#el).find('select.dimension[data-table="'+table+'"]')
dimension = dimension_selector.val()
return true if dimension == ''
$(#el).find('div.select_dimension_value .preloader').css('display', 'inline')
$(#el).find('select.dimension_value').hide()
$(#el).find('select.dimension_value').html('')
$(#el).find('div.select_dimension_value').show()
$(#el).find('div.date[data-table="'+table+'"]').show()
self = #
$.get(
'/dashboards/'+#model.get('dashboard_id')+'/dashboard_modules/dimension_values',
{ table: table, dimension: dimension },
(data, status, xhr) ->
_.each(data, (item) ->
if item.value != null and self.model.has('dimension_value') and item.value.toString() == self.model.get('dimension_value').toString()
selected = 'selected="selected" '
else
selected = ''
$(self.el).find('select.dimension_value').append('<option '+selected+'value="'+item.value+'">'+item.name+'</option>')
)
$(self.el).find('select.dimension_value').prepend('<option value=""></option>')
$(self.el).find('select.dimension_value').show()
$(self.el).find('div.select_dimension_value .preloader').hide()
,
'json'
)
since you have a model already, you can just set the value on the model without saving it to the server:
in your view:
events: {
'change .module_type': handleModuleTypeChange
},
handleModuleTypeChange: function() {
this.model.set({
module_type: this.$el.find('.module_type').val()
});
}
then listen to your model changes, rerender the template:
//view initialize
initialize: function () {
this.listenTo(this.model, 'change', this.render);
}
I'm not sure why the select has to be rendered after the model is saved...if that's the case, you may wanna move the Dimensions part into new views.
==============================================================
EDIT: (Dec/01/2013)
A simple jsfiddle: http://jsfiddle.net/8x7rU/
this is a simple example of DOM events changing the model, and then the model changes trigger view rendering.
in this case the whole view is rerendered when the model attribute 'module_type' is changed. And, by changing the Module Type dropdown, the view is setting new 'module_type' values on the model.
lots of the DOM related logic is actually in the template, when the view rerenders, the template knows the current state of the model then render accordingly.
I have an ext js grid like below:
var grid = new Ext.grid.GridPanel({
columns: [
{header: 'Account Id',dataIndex:'accountId' },
{header: 'Account NUmber',dataIndex:'accountNumber' }
]
})
Now I need to show Account Id column as a column of radio buttons. So from the grid user can select one Account Id and submit. When the user reloads the page, that account id should be preselected.
I need some help on how to proceed on this. Do I need to write a renderer on Account Id column? Or is there an easier way.
EDIT: I did like this:
{header: 'Account Id',dataIndex:'accountId',renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
}},
What is the syntax to add an onclick event or onchange event to the radio group?
Building off the previous answer, yes, I think using a renderer for your column is the correct solution. I think you should go about the click event differently than J. Bruni suggested though. I'd recommend a click listener on your grid panel that checks if you clicked a radio button, and delegates to a method in your GridPanel.
Something like this:
MyRadioGrid = Ext.extend(Ext.grid.GridPanel, {
columns: [
{header: 'Account Id',dataIndex:'accountId', renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
}},
{header: 'Account NUmber',dataIndex:'accountNumber' }
],
afterRender: function() {
MyRadioGrid.superclass.afterRender.apply(this, arguments);
this.el.on('click', this.checkRadioClick, this);
},
checkRadioClick: function(event) {
if (event.getTarget('input[type="radio"]')) {
//radio clicked... do something
}
}
});
You did well on showing Account Id column as a column of radio buttons, by using a renderer function.
Regarding the onclick event for these, you may simply add the onclick attribute in the HTML tag:
return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
I have a grid panel i need to show / hide columns in a grid panel depending on the value of a checkbox. If the checkbox is checked i need to display column in the grid and if it is unchecked i need to hide the column in the grid.
Here is my code
var chkEnableDisplayResponsibilityForAction = '<%=Session["chkEnableDisplayResponsibilityForAction"]%>';
var flags = Boolean.parse(chkEnableDisplayResponsibilityForAction);
var flags1 = !Boolean.parse(chkEnableDisplayResponsibilityForAction)
var colModel = new Ext.grid.ColumnModel([
{ header: "PricePlanID", width: 100, sortable: true, dataIndex: 'PricePlanID', hidden: flags, hideable: flags1 },
]);
when i refresh the page i am not able to toggle the columns depending on the value of the checkbox. But when i login and log out i am able to see the changes in the grid panel. Can anyone help me in refreshing the column values in the grid panel?
if take a look at the ExtJS API, particulary the ColumModel there is a setHidden method, it would hide/show a column in a GridPanel.
myGrid.getColumnModel().setHidden(0, true);
you should also hook the onchange event of your check box so you can show or hide the column
In Ext JS 4.1, to hide a column, you use:
grid.columns[0].setVisible(false);
Looks like getColumnModel() with its setHidden() method is no longer part of the grid:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel
You can show/hide columns using column header menu - you can choose which column you want to have shown. Anyway, if you want to show/hide a column, try this
myGrid.getColumnModel().setHidden(0, true);
In ExtJS 4 gain access to your grid panel, and then access the columns attribute which is an array of Column objects.
From there you can use the array iterator methods ( http://www.diveintojavascript.com/core-javascript-reference/the-array-object ) to perform an action.
In the below example I hide and show a few of the columns based on their header names, but you can obviously perform action based on any Column attribute.
var grid = Ext.getCmp( 'my_grid_panel' );
grid.columns.forEach( function( col ) {
if( ( col.text == "Foo" ) || ( col.text == "Bar" ) ) {
col.setVisible( true );
} else if( col.text == "Baz" ) {
col.setVisible( false );
}
});
The answers above I think are pretty good.
But let me give you a advice.
1) In ExtJS 4.x it is recommended to use Ext.ComponentQuery`s methods instead of Ext.getCmp()
2) To hide/show columns of the grid you can use following code
Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].hide()
or to show
Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].show()
It should resolve hiding/showing any column in a grid.
Here grid is your grid , it maybe id or xtype etc.
setVisibleColumn : function(name, flag) {
name = Ext.Array.from(name);
var column;
for (var i = 0; i < name.length; i++) {
column = this.getColumn(name[i]);
if (column) {
flag ? column.show() : column.hide();
}
}
}