When adding a new item to a Kendo Grid using inline editing, the ContractID datasource is filtered by the selected OrgID. Once a row has been added, the OrgID column is no longer editable (set using isOrgEditable()) but the ContractID is. Unfortunately the cascade doesn't then work for editing and the datasource for ContractID is unfiltered.
To resolve that issue I subscribe to the edit event (data-edit="setContractsDataSource") and filter the data source manually. That works but then the Update button doesn't do anything and the edit is lost.
<div id="grid">
<div class="k-content wide">
<div>
<div data-role="grid"
data-editable="inline"
data-edit="setContractsDataSource"
data-toolbar="[{ name: 'create', text: 'Add Item' }]"
data-columns='[
{ field: "OrgID", title: "Company", editable: isOrgEditable, editor: orgDropDownEditor, template: "#: lookupForOrg(organisationID) #" },
{ field: "ContractID", title: "Contract", editor: contractsDropDownEditor, template: "#: lookupForContract(ContractID) #" },
{ command: ["edit", "destroy"], width: "220px" }
]'
data-sortable="true"
data-pageable="true"
data-filterable="true"
data-bind="source: items"></div>
</div>
</div>
</div>
As is often the case, I resolved the issue while writing the question. For future reference, the reason it wasn't being updated was due to not returning true from the event handler:
function setContractsDataSource(e) {
let orgID = e.model ? e.model.OrgID : this.dataItem().OrgID;
if (orgID) {
$("#contracts").data("kendoDropDownList").setDataSource(contractsData.filter(elt => elt.ContractorID == orgID));
}
return true; // fixed it
}
Subsequently established that the column would only update if it already contained a value, i.e. the new value wouldn't save if previously it had been empty. This telerik forum post helped to resolve it. The editor for the Contracts column needed valuePrimitive: true.
function contractsDropDownEditor(container, options) {
$('<input id="contracts" name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "ContractNo",
dataValueField: "ContractID",
dataSource: contractsData,
optionLabel: "Select contract...",
valuePrimitive: true
});
}
When I use celltemplate for ahref link, once the link is clicked the row highlights because i have RowSelection enabled...but i dont want the row to highlight when the link is clicked..only if the row is clicked anywhere but the link.
Also in my below example picture, how do I remove the little arrow so no Menuitems can be displayed for that column?
Code:
$scope.gridOptions = {
showFooter: true,
enableFiltering: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableSelectAll: true,
multiSelect: true,
enableColumnResizing: true,
columnDefs: [
{ field:'date', displayName: 'Date', width: 200, aggregationType: uiGridConstants.aggregationTypes.count },
{ field:'notes', displayName: 'Notes', width: 65, enableFiltering: false, enableSorting: false, enableHiding: false, cellTemplate:'View' }
],
data: data
}
Pic:
Here is a possible answer to ui-grid (which is not ng-grid anymore!).
The cell template for a button that does not select the row is:
cellTemplate: '<button class="btn primary" ng-click="$event.stopPropagation();getExternalScopes().showMe(row)">Click Me</button>'
Note the $event.stopPropagation() in the ng-click directive. This will hinder the click to reach the underlying functions of the rowTemplate.
(Note also that I didn't found another way to pass a click event to the controller than by using externalScopes. I'm sure there is a better way but ui-grid is still beta and I'm also pretty new to it)
Second part of your question: Use this headCellTemplate
var headCelltpl = '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-vertical-bar"> </div>' +
'<div class="ui-grid-cell-contents" col-index="renderIndex">' +
'{{ col.displayName CUSTOM_FILTERS }}' +
'</div>' +
'</div>';
and add it to the respective columns in your columnDefs.
headerCellTemplate: headCelltpl
Here is a Plunker with everything included.
Please don't tell me you meant ng-grid:-)
The simple solution is change the row.setSelected to false
cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deSelectRow(row)">Click Me</button>'
$scope.deSelectRow = function(row) {
row.setSelected(false);
};
I am trying to show products from database into tileview item in devexpress phonejs. Successfully I can load items from datasource into tileview but I would like to group items by the category name and really dont have any idea howto do it. Any help will be appreciated.
JS Code
return {
sale: sale,
departmansSource: {
store: PosApplication.db.Departmans,
select: ["DepartmanID", "DepartmanName"]
},
categoriesSource: {
store: PosApplication.db.Categories,
select: ["CategoryID", "CategoryName"]
},
productsSource: {
store: PosApplication.db.Products,
filter: ["DepartmanID","=", 2],
select: ["ProductID", "ProductName", "DepartmanID", "DepartmanName", "CategoryID", "CategoryName"]
},
approversSource: {
store: PosApplication.db.Approvers,
select: ["ApproverId", "ApproverName"]
},
handleSave: handleSave,
handleCancel: handleCancel,
viewShown: handleViewShown,
notifiy: notifiy
};
Html Code
<div id="urunlertile" data-bind="dxTileView: { height: '550', dataSource: productsSource, itemClickAction: notifiy, baseItemHeight: 70, baseItemWidth: 150, itemMargin: 3, }">
<div data-options="dxTemplate:{name:'item'}">
<p><span data-bind="text: $data.CategoryName"></span></p>
<p><span data-bind="text: $data.ProductName"></span></p>
</div>
</div>
</div>
You can use postProcess callback to group/sort data in your dataSource.
See doc with example:
http://js.devexpress.com/Documentation/Howto/Data_Layer/Data_Layer?version=14_1#Data_Layer_Data_Layer_Reading_Data_Data_Transformation_Post_Processing
Note that dxTileView doesn't support displaying grouped data out of box. Having grouped data like
[{ key: "Category1", items: [{ name: "Product1" }, ...], ...]
you could put nested dxTileView in item template to display products for each category.
I have a checkbox for each row within a kendo grid. If the user sorts or filters the grid, the checkmarks are cleared from the checkboxes. How can I prevent the checkboxes from unchecking or re-check them after the sort or filter occurs? Please refer to the following js fiddle to observe the behavior during sorting:
http://jsfiddle.net/e6shF/33/
Here's the code on the jsfiddle for reference (...needed to ask this question):
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
columns:[
{
field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
basically the selection is cleared each time because the Grid is redrawn. You can store the check items in an array or object and when the Grid is redrawn (dataBound event) you can mark them again as checked.
To simplify things here is an updated version of you code. Also use the headerTemplate option to set header template - do not name your field like template instead.
var array = {};
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
dataBound:function(){
for(f in array){
if(array[f]){
$('#'+f).attr('checked','checked');
}
}
},
columns:[
{
headerTemplate:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
var grid = $('#grid').data().kendoGrid;
$('#grid tbody').on('click',':checkbox',function(){
var id = grid.dataItem($(this).closest('tr')).id;
if($(this).is(':checked')){
array[id] = true;
}else{
array[id] = false;
}
})
Link to the fiddle
If you are not too concerned about old browsers HTML5 storage might work for you
http://www.w3schools.com/html/html5_webstorage.asp
And of course jQuery comes with its own data storage capability.
I have a JQGrid column with edittype:'Select' using dataUrl to return a list of Accounts with groups for the different Account groups.
My issue: when saving the row no value is passed to the editurl for my Select column. If i remove the 's a value is passed to editurl for my Select column.
Description: For my column data I return the Account Name, not the value, so when the grid loads the name is displayed.
When a line is edited (in-line editing), the dataUrl is called and the select list is displayed and my Account is selected for the rows data.
I then select a new Account from the Select list and press enter to save. The selected Account value is not passed to the editurl function for the column. if i remove the 's from the the Account value is passed to the editurl function.
I'm not sure if I'm doing something wrong, ie not setting a grid parameter,
Hoping you can help me out.
Thanks in advance,
Chris
My Grid code:
$(document).ready(
function () {
var lastSelection;
var grid = jQuery("#BankTransactions");
grid.jqGrid({
url: '/DropDown/GridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['TransactionLineId', 'TransactionId', 'BankTransactionId', 'Number', 'Amount', 'Category'],
colModel: [
{ name: 'transactionLineId', index: 'transactionLineId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'transactionId', index: 'transactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'bankTransactionId', index: 'bankTransactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'Number', index: 'Number', width: 100, align: 'left', sortable: false },
{ name: 'Amount', index: 'SubAmount', editable: true, width: 100, align: 'right', sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'class="BankTranEdit"' }, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: ' '} },
{ name: 'CategoryIdURL', index: 'CategoryIdURL',
editable: true,
edittype: 'select',
//formatter: 'select',
editoptions: { dataUrl: "/DropDown/CategorySelectList" },
width: 220,
align: 'left'
},
],
pager: jQuery('#pager'),
rowNum: 100,
rowList: [25, 50, 100],
editurl: "/Dropdown/GridSave",
sortname: 'Number',
sortorder: "desc",
viewrecords: true,
width: 1250,
height: 450,
onCellSelect: function (rowid, iCol, cellContent, e) {
grid.restoreRow(lastSelection);
grid.editRow(rowid, true, null, null, null, null, null);
lastSelection = rowid;
}
});
});
Output of /Dropdown/GridData:
{"total":1,
"page":1,
"records":6,
"rows":[
{"id":165,"cell":["165","249","125","DM000249","1500.00","Sales"]},
{"id":145,"cell":["145","229","105","SM000229","100.00","Rent"]},
{"id":153,"cell":["153","237","113","SM000237","38.07","Bank Fees"]},
{"id":185,"cell":["185","269","145","SM000269","750.00","Cash Discounts"]},
{"id":194,"cell":["194","278","154","SM000278","13.29","Rent"]},
{"id":211,"cell":["211","295","171","SM000295","100.00","Rent"]}]
}
Output of /Dropdown/CategorySelectList
<select>
<optgroup label='Expenses'>
<option value='42'>Accounting Fees</option>
<option value='60'>Bank Fees</option>
<option value='23'>Bank Service Charges</option>
<option value='24'>Books and Publications</option>
<option value='25'>Cash Discounts</option>
<option value='43'>Rent</option>
</optgroup>
<optgroup label='Income'>
<option value='19'>Sales</option>
<option value='20'>Services</option>
<option value='21'>Interest Income</option>
<option value='22'>Other Income</option>
</optgroup>
</select>
The current version of jqGrid don't works with <optgroup> inside of <select>.
I find that the usage of <optgroup> could be helpful in some cases. So I debugged the jqGrid code a little and found out that one need to change only two lines of code of jqGrid (the lines 143-144 of the grid.inlinedit.js or the lines 8262-8263 of the jquery.jqGrid.src.js from jqGrid 4.1.1) from
tmp[nm] = $("select>option:selected",this).val();
tmp2[nm] = $("select>option:selected", this).text();
to
tmp[nm] = $("select>option:selected,select>optgroup>option:selected",this).val();
tmp2[nm] = $("select>option:selected,select>optgroup>option:selected",this).text();
or just to
tmp[nm] = $("select option:selected",this).val();
tmp2[nm] = $("select option:selected",this).text();
to fix the problem.
If one need have support of selects having multiple: true attribute:
one should modify in the same way as above one more line (line 149) of the grid.inlinedit.js having the "select>option:selected". To make jqGrid with multiple: true attribute working with dataUrl property one have to fix one more line (the line 67) of the grid.inlinedit.js. One need change
if(cm[i].edittype == "select" && cm[i].editoptions.multiple===true && $.browser.msie){
$(elc).width($(elc).width());
}
to for example the following
if(cm[i].edittype === "select" && typeof(cm[i].editoptions)!=="undefined" &&
cm[i].editoptions.multiple===true &&
typeof(cm[i].editoptions.dataUrl)==="undefined" && $.browser.msie) {
$(elc).width($(elc).width());
}
This change will prevent setting of the very small width of the select before it is loaded by the $.ajax request from dataUrl. Probably one should place the same fix of the width inside of success event handler of the corresponding $.ajax call from grid.common.js where the data for dataUrl will be loaded. I tested my demos in IE9 and it is not needed to make the fix for IE9.
You can see the demos with the fixed jqGrid code here: the single select demo, the multiselect demo. You should take in the consideration, that there are no code for the "/Dropdown/GridSave" on the server which will be used in the editurl. Nevertheless you will see in Fiddeler of Firebug that the posted data, which will be send to the server, do contain the information about the selected item. If you want make the demo working locally you should modify the editurl to 'clientArray' and probably set additionally loadonce:true.