For display tabular data , I am using angular ui-grid
if a column is sorted and then if we edit the cell, the sorting gets kicked in and moves the row. I would like to disable sorting on cell edit, is there any way to do this?
Plnkr http://plnkr.co/edit/17H5K6nOEz9gf4Keeap9?p=preview
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-edit >
</div>
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid','ui.grid.edit',
'ui.grid.selection',
'ui.grid.rowEdit', 'ui.grid.cellNav']);
app.controller('MainCtrl', function($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'A' },
{ field: 'B' },
{ field: 'C', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
$scope.gridOptions.data = [{'A':'a1', 'B':'b1', 'C':'c1'}, {'A':'a3', 'B':'b3', 'C':'c3'}, {'A':'a2', 'B':'b2', 'C':'c2'}];
});
Related
i am using select2 plugin with ASP.NET+MVC with multiple select option. i am able to save values into database of selected item. now I want to show those values (basically text which associate with those saved ids) into dropdown which has select2 plugin in edit mode.
how can i do that. below is my code.
$(document).ready(function () {
/* below values want to set to dropdown list
var selectedValue1 = '43,48,47,57';
$('#ddlCity1').select2({
multiple: true,
placeholder: "Select City",
allowClear: true,
tags: false, //prevent free text entry
width: "100%",
ajax: {
dataType: 'json',
delay: 250,
url: '#Url.Action("GetCityList", "DemoMVC")',
data: function (params) {
return {
searchTerm: params.term
};
},
processResults: function (data) {
var newData = [];
$.each(data, function (index, item) {
newData.push({
//id part present in data
id: item.Id,
//string to be displayed
text: item.City
});
});
return { results: newData };
},
cache: true
},
formatResult: function (element) {
return element.text + ' (' + element.id + ')';
},
formatSelection: function (element) {
return element.text + ' (' + element.id + ')';
},
escapeMarkup: function (m) {
return m;
},
});
$(".city1").on("select2:select", function (e) {
currentSelectedVal = $(e.currentTarget).val();
console.log(currentSelectedVal) // get selected values
});
$('.city1').on('select2:unselect', function (e) {
currentSelectedVal = $(e.currentTarget).val();
console.log(currentSelectedVal) // get selected values
});
});
//Dropdown with select2 control
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>City</label>
<select id="ddlCity1" class="city1" style="width:500px"></select>
</div>
</div>
</div>
filtering does not work in ui-grid when selection is on , but when i remove ui-grid-selection directive from html part the filtering works well !!!
notes: I fill columnDefs of gridOptions later dynamically through a service call .
.js code :
$scope.gridOptions = {
,enableRowSelection: true
, enableRowHeaderSelection: true
, multiSelect: false
, treeRowHeaderAlwaysVisible: false
, useExternalFiltering: true
, onRegisterApi: function (gridApi) {
self.gridApi = gridApi;
gridApi.core.on.filterChanged($scope, function () {
if (!usePagination)
return;
var grid = this.grid;
var gridfilter = [];
angular.forEach(grid.columns, function (col, index) {
if (col.filters[0].term)
gridfilter.push(
{
FieldName: col.name,
MatchType: 6,
Value1: col.filters[0].term
}
);
});
self.searchOption.filters = [{ filter: gridfilter }];
self.reload();
});
}
.html code:
<div ui-grid="gridOptions" dir="rtl" style="height: 600px; width: 100%"
ui-grid-selection></div>
i initiated columnDefs in gridOption and it solved the problem:
$scope.gridOptions = {
columnDefs:[{}]
,enableRowSelection: true
....
}
I am trying to insert a dropdownlist on the title of a kendo ui grid. Essentially I am following this sample: http://dojo.telerik.com/#rkonstantinov/afOxa
The following is my code.
<div id="grid"></div>
<script type="text/x-kendo-template" id="myFileCount">
<input type="search" id="fileCountValue" style="width: 150px"/>
</script>
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{
hidden: true,
field: "ID",
},
{
field: "FileCount",
title: "FileCount",
headerTemplate: kendo.template($("#myFileCount").html()),
width: 50,
sortable: false
},
],
editable: true
});
var gridA = $("#grid").data("kendoGrid");
gridA.find("#fileCountValue").kendoDropDownList({ //this line throws error
autoBind: false,
optionLabel: "All",
dataSource: [
{ Name: "1", Id: 1 },
{ Name: "2", Id: 2 }
],
dataTextField: "Name",
dataValueField: "Id",
change:function() {
var val = this.value();
for (var i = 0; i < dataSource.data().length; i++) {
dataSource.data()[i].Originals = val;
}
dataSource.data()[i].Originals = val;
grid.setDataSource(dataSource);
}
});
However, I am getting this error: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'find'. I have also indicated the line which throws this error in my code.
Thanks
I'm using Angular ui-grid and get an error trying to save the grid state.
The gridApi seems to be undefined.
I've created a Plunker to demonstrate the error. You can find the statement in View2Controller.js under the vm.saveState function.
angular.module('app').controller('View2Controller').$inject = ['$scope', '$http', 'uigridconstants'];
and
angular.module('app').controller('View2Controller', function ($scope, $http, uiGridConstants) {
var vm = this;
vm.customers = [];
vm.selectedText = '';
vm.selectedItems = [];
vm.gridOptions = {
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
data: 'vm.customers',
columnDefs: [
{
field: 'status', name: '', width: 50, sort: {
direction: uiGridConstants.DESC,
priority: 0
}
},
{
field: 'member', name: 'M', width: 50, type: 'boolean',
cellTemplate: '<input type="checkbox" ng-model="row.entity.lid" >'
},
{
field: 'company', name: 'Company', width: 200, minWidth: 200, maxWidth: 600
}
]
};
$http.get('customers.json')
.success(function (data) {
vm.customers = data;
});
vm.saveState = function(){
//debugger;
var stateToSave = $scope.gridApi.saveState.save();
console.log(stateToSave);
};
});
Many thanks for any assistance.
There are couple of problems with the code. One you have two instances of the controller View2Controller.
Second you need to use the 'ui.grid.saveState' module in your app to get the save state functionality.
<div>
<div ui-grid="vm.gridOptions" ui-grid-save-state class="myGrid"></div>
</div>
var app = angular.module('app', [
'ui.router',
'ui.grid',
'ui.grid.saveState'
]);
Look at the plnkr here
http://plnkr.co/edit/OQp4cmZiu87cjeKQwFi6?p=preview
I am using Jqgrid in my application. I wanted to create a column with 2 buttons. I want to have in column since the buttons may differ based on the data of the row. I googled it and I am able to found only creating a button using custom formatter option, but it appears only on double clicking a row or on edit of a row, but I want it to be displayed on column itself. Any help or link containing information will be appreciated. Below is my grid code.
Need to create an another column with buttons.
Edit:
var grid = $(gridId);
grid.jqGrid({
data: gridData,
datatype: "local",
gridview: true,
colModel: [
{
label: 'Employee Name', name: 'employeeName', width: 195, editable:true,
sortable:true, editrules:{required:true}
},
{
label: 'Address', name: 'address', width: 170, editable:true,
sortable:true,
editrules:{required:true}
},
{
label: 'Department', name: 'department', width: 120, editable:true,
sortable:true,
edittype:'custom',
editoptions: {
'custom_element' : populateReturnTypeAutocomplete,
'custom_value' : autocomplete_value
},
editrules:{required:true}
},
});
Okay add this to your colModal
{label: 'My Custom Column', name: 'custom', index:'custom' width: 120}
Now in gridComplete or loadComplete add this code
var grid = $("#grid"),
iCol = getColumnIndexByName(grid,'custom'); // 'custom' - name of the actions column
grid.children("tbody")
.children("tr.jqgrow")
.children("td:nth-child("+(iCol+1)+")")
.each(function() {
$("<div>",
{
title: "button1",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click:
handle your click function here
}
).css({"margin-left": "5px", float:"left"})
.addClass("ui-pg-div ui-inline-save")
.attr('id',"customId")
.append('<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>')
.appendTo($(this).children("div"));
$("<div>",
{
title: "custombutton 2",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click:
handle click here
}
).css({"margin-left": "5px", float:"left"})
.addClass("ui-pg-div ui-inline-custom")
.attr('id',"customButton2")
.append('<span class="ui-button-icon-primary ui-icon ui-icon-circle-check"></span>')
.appendTo($(this).children("div"));
Now these icons I'm adding here will be available with jquery ui.css and you will have to add one more function to your script which will get 'custom' column index for u in line first of above code.
var getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;
for (; i<l; i+=1) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
I hope this helps.