How do I disable selection for the default grouping header? My grid has selectable: 'multiple' and grouping is set to false (i don't want to user to group, but i want to specify the grouping myself). This means the grouping header is also selectable. How do i make the grouping header row be not selectable?
You can simply state what the default grouping should be in the dataSource property of the Kendo grid:
dataSource: {
...
group: {
field: 'NameOfFieldYouWantToGroup'
}
}
And ensure the groupable attribute is set on the top level grid intialisation:
$("#grid").kendoGrid({
...
groupable: false
});
Here is a Dojo example of predetermined groupings (with the option to remove the grouping removed)
Related
I am trying to create a multi checkbox filter on a column of the kendo grid with serversidefiltering set to true. In the multiselect-checkbox filter, I want to default the selection to some value. I am trying to achieve these 2 scenarios given below:
1) I would still want the multiSelect filter to show me all the values for that field and only have the default selections checked.
2) Also, have the data on the grid column filtered down to the checkbox checked in the multi-checkbox filter.
I have tried the following and I am mostly getting close to achieving either 1) or 2). But I am trying to get both of them working together.
Here's a link to the demo for 1)
With the above, I could get to only have the default checkbox checked, but the grid data on load does not show the filtered data, it shows everything.
For 2) I tried the following
Filter: [{
field: "ProductName", operator: "eq", value: "Chai"
}],
This above code filters the data on the grid correctly, but For the menu filter, the checkbox list is also narrowed down to contain only the list of filtered items sent by the server. (looking for a solution to narrow down the data in grid, but show all options in the checkbox filter).
Is there a way I could get both these requirements work together on a multi-checkbox filter with ServerSide filtering?
Any idea to resolve this issue is highly appreciated.
Thank you in advance!
When serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets. It means, that you will have to implement method at your server which will return list of items to be displayed in filter.
columns: [
{
field: "FirstName",
filterable: {
multi: true,
//when serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "FirstName"
}
}
}
}
},
},
Here is a working demo.
Here is a link to Telerik's demo.
I'm using the #Mottie branch of tablesorter.js
I have 5-10 small tables on a page and would like to use an external filter to filter all of them at once, but only on one column. The docs mention:
// filters to exclude, per column
filter_excludeFilter : {},
It requires zero-based indexing to select columns for exclusion; however, the column # I am selecting varies from table to table. I was hoping to just target a column by header class, because I can apply a class to it. Relevant code:
HTML: <input type="search" class="search" placeholder="filter..." /></div>
js:
var $table = $(".tablesorter").tablesorter({
widgets: ["filter"],
widgetOptions: {
filter_external: '.search',
filter_defaultFilter: { '.salesinitials': '~{q}', },
filter_functions: { '.salesinitials': true },
filter_columnFilters: false
}
});
$("th > div.tablesorter-header-inner:contains('Sales Initials')")
.parent().addClass("salesinitials");
Is there some other way to target just one column for filtering on?
The filter_excludeFilter option does allow you to use a jQuery selector in place of a column index.
But, I think the solution you need is to bind all the tables to one filter input using the filter bindSearch function:
var $filter = $('.single-filter-input');
$('.all-tables').each(function(table) {
// table - table DOM element (or jQuery object) of table.
// $el - jQuery object of one or more input (search) elements to bind.
// false - boolean flag to force a new search.
$.tablesorter.filter.bindSearch(table, $filter, false);
});
I have a checkbox selection model that I am using on a gridpanel. I have configured the CheckboxModel like so:
Ext.create('Ext.selection.CheckboxModel', {
mode: 'Single',
checkOnly: true,
showHeaderCheckbox: false
});
This configuration allows the user to select only one record from the gridpanel. I have removed the checkbox in the header since I want the user to have to explicitly check the box in the record row. Now I have just a blank header in that column....is there any way to add text to that header column? From what I can tell it seems like my only options are to either leave the checkbox in the header or remove it and have a blank column header...is that correct?
You can override the getHeaderConfig method of the CheckboxModel, like:
Ext.define('Fiddle.override.selection.CheckboxModel', {
override: 'Ext.selection.CheckboxModel',
getHeaderConfig: function() {
return Ext.apply(this.callParent(arguments), {
width: 100,
header: 'Select'
});
},
});
Working example: https://fiddle.sencha.com/#fiddle/1b3g
I am trying to create a grid that allows user to add, edit and delete the record. I have done working for populating grid now I am going to display dialog for add record. But, I don't why it doesn't work. Dialog does not getting displayed.
This is the snapshot of my grid.
and this is my js function
InfoDesk.GridManager.postsGrid = function (gridName, pagerName) {
//Create the grid
$(gridName).jqGrid({
//server url and other ajax stuff
url: '/Admin/Posts',
datatype: 'json',
mtype: 'GET',
height: 'auto',
//Columns
colNames: colNames,
colModel: columns,
//pagination options
toppager: true,
pager: pagerName,
rowNum: 10,
rowList: [10, 20, 30],
//row number columns
rownumbers: true,
rownumWidth: 40,
//default sorting
sortname: 'PostedOn',
sortorder: 'desc',
//display the no. of records message
viewrecords: true,
jsonReader: { repeatitems: false },
afterInsertRow: function (rowid, rowdata, rowelem) {
var tags = rowdata["Tags"];
var tagStr = "";
$.each(tags, function (i, t) {
if (tagStr) tagStr += ", "
tagStr += t.Name;
});
$(gridName).setRowData(rowid, { "Tags": tagStr });
}
});
$(gridName).navGrid(pagerName,
{
cloneToTop: true,
search: false,
add:true
}, editOptions, addOptions, deleteOptions);
};
When I click on add button. Nothing is happening. This is my first project with jqGrid. So, I am completely blank about it.
EDITED:
I have found a fiddle example and modified for navigation bar. It is working fine but, still I could not recognize the issue where i am doing mistake in my code.
fiddle
It seems to me that your main goal to understand how you can correctly use navGrid with top and bottom pagers. So I'll explain exactly how all works.
It's not clear whether you need to add the navigator icons on the top pager or on the both top and bottom pager. It's unclear whether you use the bottom pager at all.
jqGrid have two main option which specify the page: pager and toppager options. To use pager option you need create <div> which have id attribute, place the div on the page somewhere and to use the id selector or the id name as the value of pager option. For example you can place <div id="mypager"></div> and to use pager: "#mypager" as jqGrid option. If you would use the value of pager option in another supported form: pager: "mypager" or pager: $("#mypager") then jqGrid will normalize the option to id selector. If you would use var thePager = $(gridName).jqGrid("getGridParam", "pager"); to get the value of "pager" option directly after the grid is created you will get thePager === "#mypager" independent from the way in which you used input pager parameter.
The option toppager works a little in another way. You should use toppager: true to create the top pager. In the case jqGrid create the corresponding <div> itself. The id of the div will be constructed from the id of the grid and the string _toppager. So in case of having gridName equal to #mygrid you would have the top pager with id="mygrid_toppager". If you would get the value of toppager option after the grid is created
var theTopPager = $(gridName).jqGrid("getGridParam", "pager");
you will get back the id selector of the top pager instead of true: theTopPager will be equal to "#mygrid_toppager" (gridName + "_toppager").
The value of the first parameter of navGrid should be the id selector of the pager on which you want to place the navigator buttons. So it should be $(gridName).navGrid(gridName + "_toppager", ...); to add the buttons on the top pager and $(gridName).navGrid(pagerName, ...); if you want to add buttons on the bottom pager. The usage $("#grid").navGrid('setGridParam', ... like you do in jsfiddle demo is wrong because 'setGridParam' is not the id selector of any pager.
In case if you have two pagers (at the bottom and at the top of the grid) you can use pager selector as the first parameter of navGrid and to use additional option cloneToTop: true. By the way the method navButtonAdd which can be used to add custom button don't have any cloneToTop: true option and you would have to specify the id selector of the pager directly.
So if you need create the grid with one top pager only you can remove unneeded jqGrid option pager: pagerName and to use the following code to create the navigator bar with Add, Edit, Delete and Refresh buttons:
$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });
If you would like to create grid on both top and bottom pager then you have to use both options of jqGrid toppager: true and pager: pagerName and can use either
$(gridName).navGrid($(gridName).getGridParam("pager"), { search: false });
$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });
or the short form
$(gridName).navGrid($(gridName).getGridParam("pager"),
{ search: false, cloneToTop: true });
By the way I use $(gridName).getGridParam("pager") instead of pagerName as the parameter of navGrid because I'm not sure whether you use id name (like "mypager") or id selector (like "#mypager") as the parameter of InfoDesk.GridManager.postsGrid. The method navGrid accept only the id selector.
If you would need to specify additional parameters of form editing methods used during Add, Edit or Delete operation you should specify additional optional parameters editOptions, addOptions, deleteOptions, searchOptions, viewOptions (see the documentation). You should of cause define the objects editOptions, addOptions, deleteOptions, searchOptions, viewOptions before the usage. The current code which you posted don't contains the definition of the option.
UPDATED: By the way I implemented some new features in the fork of jqGrid which I publish on GitHub here. 1) One can now use pager: true option like toppager: true. 2) one can use navGrid without the pager (like $(gridName).navGrid({search: false});). In the case jqGrid will add the buttons on all pagers which jqGrid have. 3) I added new option navGrid: iconsOverText:true which allows another look of navigator buttons with texts (see the demo). 4) the navigator buttons will be wrapped on the next row of pager automatically if too many icons is added and the grid have not so large width. You can see more demos of the features at the bottom of readme on the page.
I am trying to add some column header groups with sub columns in ExtJs, however I am having some difficulty...
I know that when we specify the config for a gridpanel, we can use a tree like structure to specify columns with sub groups i.e.
columns[{
text: 'column1',
columns[{
text: 'subcolumn'
}]
}}
This is fine, however, I am trying to do this dynamically when my gridpanel store loads
I have some code which creates a grid column on the fly
retCol = new Ext.grid.column.Column({
fixed: false,
hideable: false,
menuDisabled: true,
draggable: false,
sortable: false,
align: 'center',
text: monthName,
columns: []
});
The problem is, the newly created doesn't seem to have the value for columns that I supplied, it is hidden away in the initialConfig but it is of no use there :-/
Seen as this code creates the column header, if we don't have an array of columns, there is no way of adding sub columns. I tried adding to the 'items' config, but that doesn't work either :-/
Thanks for any help in Advance
Baz
If you want to add columns after the grid has been rendered you can use the grid reconfigure method.
I just read your question again, the reconfigure will also expect you the give your column config in the structure you posted. Not with the dynamically created headers.
You can build your column config dynamically though, after your store has loaded and pass the new config through reconfigure to your grid.