Develop Reference

How do I hide certain rows in a ui-grid based on its values?

I have a simple UI grid with these options:
$scope.transactionGrid = {
enableSorting : true,
enableColumnResize : true,
enableScrollbars : true,
enablePaginationControls : false,
minRowsToShow : 6,
onRegisterApi : function(gridApi) {
$scope.gridEventsApi = gridApi;
}
};
I want to hide rows which have a specific value, deleted: "y".
$scope.transactionGrid.data = [
{ Name: "First", deleted: "y" },
{ Name: "Second", deleted: "y" },
{ Name: "Third", deleted: "n" },
{ Name: "Fourth", deleted: "n" }
];
Without actually changing the data, can it be filtered out from rows?

One way is to adjust the row-repeater-template to check for some row-specific value and make the row show/hide that way.
I created a Plunkr showcasing a possible solution.
First you need to create your row-value-checker-function:
appScopeProvider: {
showRow: function(row) {
return row.deleted !== 'y';
}
},
Then you adjust their template by adding that check to their row-repeater
$templateCache.put('ui-grid/uiGridViewport',
...
ng-if=\"grid.appScope.showRow(row.entity)\"
...
}

I know you specifically said "without actually changing the data", but assigning a filtered dataset to the grid would not change the dataset, just the data for the grid. Also it might be a relevant and valid solution for other cases like this.
I forked CMR's Plunk to demonstrate this: http://plnkr.co/edit/NntwWb?p=preview
The key part is just adding a filter when assigning the dataset:
$scope.gridOptions = {
data: $scope.myData.filter(function(row) {
return row.deleted !== "y";
})
};

You can hide it by creating cell templates and hide it based on row value for every field:
$scope.transactionGrid = {
enableSorting : true,
enableColumnResize : true,
enableScrollbars : true,
enablePaginationControls : false,
minRowsToShow : 6,
onRegisterApi : function(gridApi) {
$scope.gridEventsApi = gridApi;
}
// Column template definitions:
columnDefs: [
{
name: 'Name',
displayName: 'Name',
cellTemplate : '<div ng-if="row.entity.deleted">{{row.entity.Name}}</div>'
}
]
};
I made a Plunk to demonstrate a viable technique to solve this: https://plnkr.co/edit/XQRC45vaiZCySZYkEGrz?p=preview

Dojo DataGrid (DGrid) Adding checkbox column

I am using Dojo Dgrid however i am trying to add a checkbox column however i am not sure of the approach.
Most of the tutorials i have been looking at follow a different code structure and i am unable to create the check box column. I would like to create a checkbox column to select rows
Code (Here is also a Fiddle of my code)
require([
.......................
"dojo/domReady!"
], function(parser, declare, Grid, ColumnSet, Selection, selector,Keyboard, DijitRegistry){
parser.parse();
var data = [
{ first: "Tom", last: "Evans" },
{ first: "Sherry", last: "Young"},
{ first: "Bob", last: "William"}
];
var columns = [
[[
{editor({name: "CheckBox", field: "bool"}, "checkbox")},
{ field: "first", label: "First" },
{ field: "last", label: "Last" }]]
];
var CustomGrid = declare([Grid, ColumnSet, Selection, Keyboard, DijitRegistry]);
var grid = new CustomGrid ({
columnSets: columns ,
"class":"grid"
}, "grid");
grid.renderArray(data);
});

If you want to have a column with checkboxes for the purpose of selecting rows, you should set your sights on the selector column plugin rather than editor. selector is specifically designed to render checkboxes (or radio buttons) in each cell that ties in to the Selection mixin when checked.
See the documentation in the wiki, and the selector test page.

you can also test this solution
first you must add this Modules in require([]) section
"dgrid/extensions/ColumnResizer",
"esri/request", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dgrid/selector",
then define this array to hold your columns
var columnsPol = [];
then add check box type column to array and any other type column to array
columnsPol.push(
selector({ label: selector({}), selectorType: "checkbox" })
);
columnsPol.push({
label: "",
field: {any name},
formatter: {a function for formatting value of cell},
width: "auto",
});
.
.
.
then define your Grid and set properties
var gridPol = new (declare([Grid, ColumnResizer, Selection]))({
store: {your data},
columns: columnsPol,
minRowsPerPage: 40,
maxRowsPerPage: 40,
keepScrollPosition: true,
selectionMode: 'none',
allowSelectAll: true,
loadingMessage: "Loading data...",
noDataMessage: "No results found."
}, {Id for grid});
gridPol.refresh();
and then you can get selected and deselected rows
gridPol.on("dgrid-select", function (event) {
var selectedRows = event.rows;
});
and deselect
gridPol.on.on("dgrid-deselect",function (event){
var deselectedRows = event.rows;
});

How can I search jqgrid column by its property?

My row looks like this:
{
...
language: {
id: 1,
name: "English"
}
}
jqGrid colModel contains the following:
{
name: "language",
index: "language",
width: 100,
stype: "select",
searchoptions: {
value: ":All;English:English;Norwegian:Norwegian"
},
formatter: function (value, options, row) {
return value.name;
},
}
I want to make a toolbar filter.
jqGrid prints out rows fine, but I cannot search based on this column. It never matches any language. I suspect that internally jqGrid filters based on original value and not on formatted one. Which ends up being something like comparing "English" with "[object Object]" :)
For some reason searchrules { custom: true, custom_func: somefunction } never gets triggered.
Is there a way to specify a property of a cell object to check against or have my own custom filtering function?

Create another toolbar in kendo grid

I am using Kendo library for grid. I want to have a toolbar in that grid.
I have followed this link -
http://demos.kendoui.com/web/grid/toolbar-template.html
and created a toolbar at the top
I also want to add another toolbar at the bottom of grid. Below or above pagination bar. I could not find any way to create this extra toolbar. Please help.

There are two ways of getting it:
You let Kendo UI generate in the top and then you move it to the bottom
You generate it to the bottom.
The first approach is fast and if you don't need header toolbar is the best. Just add the following code:
$("#grid).data("kendoGrid").wrapper.append($(".k-toolbar"));
See it here : http://jsfiddle.net/OnaBai/WsRqP/1/
The second approach -using as base the example that you mention in your original question- would be something like this:
Step 1: Define a template, you might use the same than in the example:
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
Step 2: Initialize the grid, as you are doing now (in my case I will not include the toolbar as header but only as footer):
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize : 20,
serverPaging : true,
serverSorting : true,
serverFiltering: true
},
height : 430,
sortable : true,
pageable : true,
columns : [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 100 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
}).data("kendoGrid");
Step 3: Add a dataBound handler for creating the footer after the grid has been initialized. We have to do it on dataBound otherwise the Grid is still not correctly formatted and the footer will look wrong. I've implemented creating the footer toolbar in a separate function to do not mess dataBound in case you do more stuff here.
dataBound : function () {
initFooterToolbar(this, kendo.template($("#template").html()));
}
Step 4: Implement this initFooterToolbar:
function initFooterToolbar(grid, template) {
if (!this._footer) {
this._footer = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>")
.append(template);
grid.wrapper.append(this._footer);
// Other code for initializing your template
...
}
}
What initFooterToolbar does is first check that it has not already been initialized otherwise if you do pagination of refresh the data you might end-up with multiple footer toolbars.
Finally append the toolbar to grid.wrapper.
So the important part for creating a footer toolbar is invoking grid.wrapper.append(...) and doing it when the grid is already created.
The original example modified here : http://jsfiddle.net/OnaBai/WsRqP/

I avoid using kendo toolbars and just make an external 1 which you can then tweak with greater control.
For example,
#Html.DropDownList("Year", (SelectList)ViewBag.YearList, "All years")
transport: {
read: {
url: '#Url.Action("_List", "Applications")',
data: refreshGridParams,
type: 'POST'
},
function refreshGridParams() {
return {
Year: $('#Year').val()
};
}
$('#Year').change(function () {
theGrid.dataSource.read({
Year: $('#Year').val()
});
});
Then in my controller,
[HttpPost]
public JsonResult _List(int? Year, int skip, int take)
{
Last
_db.Blargh.Where(w => w.Year== Year).Skip(skip).Take(take).ToList().ForEach(x => { waList.Add(new WAListDTO(x)); });
This should cover all the core code needed but means you can keep adding as many toolbars/dropdowns/datepickers/text searchs or etc and just alter each stage to include the additional data.

Here is another hack which uses column footertemplate. When databound is triggered, footertemplate table is arranged to have one column with colspan equals to the number of grid columns.
http://plnkr.co/edit/1BvMqSC7tTUEiuw4hWZp
$("#grid").kendoGrid({
columns:[{
field:'name',
footerTemplate : "Row Count: #= data.name.count #"
},{
field:'age'
}],
dataSource: new kendo.data.DataSource({
aggregate: [{
field:"name",
aggregate: "count"
}],
data: [{
name: "Jane",
age: 31
}, {
name: "John",
age: 33
}]
}),
dataBound: function() {
var footer = this.wrapper.find('.k-footer-template');
footer.children(":first").attr('colspan', this.columns.length);
footer.children().not(':first').remove();
}
});

How to remotely sort an Ext grid column that renders a nested object?

Simple question here, and I'm really surprised I cannot find an answer to it anywhere.
I have the following product model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'manufacturer', type: 'auto'}, // i.e. nested object literal
],
});
As can be seen, a product has a nested object inside it that contains details about a manufacturer (id, name, description, etc.).
I display products in an Ext.grid.Panel, like so:
Ext.create('Ext.grid.Panel', {
title: 'Products',
...
remoteSort: true,
columns: [
{text: 'Id', dataIndex: 'id', sortable: true},
{text: 'Name', dataIndex: 'name', sortable: true},
{text: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
}
},
],
});
As you can see, all three columns are configured to be sortable, and I am using remote sorting. This works for the first two columns, but the third column (manufacturer) is giving me trouble.
For instance, when a user sorts the grid by product name, Ext sends the following JSON to the server:
{ sort: [{ property: 'name', direction: 'ASC' }] }
This is fine, because the server knows to simply sort by each product's name property.
But when a user sorts the grid by manufacturer, the JSON sent is:
{ sort: [{ property: 'manufacturer', direction: 'ASC' }] }
Since the manufacturer is an object, this does not give the server any idea which property of the manufacturer it should sort by! Is it the manufacturer's id? Or is it the manufacturer's name? Or something else?
For my grid, since I render the manufacturer's name, I'd like to sort it by name. But I see no way to tell the server this. And I certainly don't want to make my server just sort by the manufacturer's name all the time.
If the JSON was sent like this it would be ideal:
{ sort: [{ property: 'manufacturer.name', direction: 'ASC' }] }
Sadly, Ext does not seem to do that (?). So, what's the solution?

Okay, I asked on the Sencha Forums and got a response. It appears you can override getSortParam() in the column config. Example:
columns: [
...
{
header: 'Manufacturer',
dataIndex: 'manufacturer',
sortable: true,
renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
},
getSortParam: function() {
return 'manufacturer.name';
},
}
...
]
This will send the ideal JSON I described in my OP. Now I just need to make my server parse this properly! :)