After doing some research I seem to be unable to solve a problem with a Shield UI Grid control. I want to be able to allow users to place columns in a order of their choice. I have similar orders like the code below:
$(function () {
$("#grid").shieldGrid({
dataSource: {
data: products
},
columns: [
"ProductName",
{ field: "['Category']['CategoryName']", title: "CategoryName", format: "{0:c}", width: "330px" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
});
And after I didn’t find the solution I placed some additional controls on the page to display the columns sequence, but this doesn’t liik quite the way I want.
Is there a way to dynamically change places of the grid columns?
As a matter of fact the solution is quite simple. The Shield UI Grid control supports dynamical column reordering.
All you need is to include the columnReorder property set to true in your code:
columnReorder: true,
In addition to that there is no need to use additional controls. Using drag and drop users can just drag the column and place it in the desired position.
Related
I'm using AgGrid table in my application. Here is the demo. According to the documentation i want to stop movement of the columns. For this i used:
suppressMovable: true
The above code I used here:
columnDefs: [
{
headerName: 'Athlete', //the generic name of header
children: [
{
field: 'athlete', //children header from generic header
width: 150,
suppressMovable:true
},
{
field: 'age',
lockVisible: true,
cellClass: 'locked-visible',
suppressMovable:true
},
{
field: 'country',
width: 150,
},
{ field: 'year' },
{ field: 'date' },
{ field: 'sport' },
],
...
suppressMovable:true, it works, and the athlete and age columns aren't possible to be moved like others, but this code also disable the movement of the main column: Athlete. So when i try to switch the place of Athlete and Medals columns, i can't, but i don't want this, i want to set this 2 main columns as movable.Question: How to disable movement of columns inside the Athlete and Column, but to keep the movement functionality of these 2 main columns?
Out of the box answer is you can't.
If any child is fixed, then AG Grid doesn't allow moving the group.
you can write custom event listener(if possible) to change the suppressMovable property of child columns while the parent column is being dragged and then again set them to not movable/suppressMovable to true. else you can programatically move all columns in a group using moveColumnByIndex(from,to)
I've got a Kendo grid which is being created in JS. This code is not mine, but someone else's, and I really don't think we should be changing many of the fundamentals of it. However, there is one column in it which we would ideally like to display as a dropdown box all the time, or at least look like one. Code is below:
self.caGridOptions = {
widget: self.caKendoGrid,
data: undefined,
dataSource: {
schema: {
model: {
fields: {
id: { type: "number" },
description: { type: "string", editable: false },
value: { type: "number", editable: false },
caTypeDescription: { type: "string", editable: false }
}
}
},
autoSync: true
},
sortable: true,
scrollable: false,
editable: true,
columns: [
{ field: "id", title: "Code", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'code') : id #", editor: self.caDropDownEditor },
{ field: "description", title: "Description", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'description') : id #" },
{ field: "value", title: "Value", width: 90, format: "{0:n2}", template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'value') : id #" },
{ field: "caTypeDescription", title: "Type", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'caTypeDescription') : id #" },
{ width: 90, filterable: false, template: kendo.template('<a class="btn btn-danger btn-sm" title="delete"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a>') }
],
dataBound: self.gridButtons,
noRecords: true,
messages: {
noRecords: "There is no data available"
}
};
//
// functions
self.getca = function (id, type) {
if (id == null) return null;
return self.caOptions().filter(function (item) { return item.id == id; })[0][type];
};
The ID field (first column) goes into a dropdown box when it is edited, as you can see. However, what we would like is for this to appear as a dropdown box all the time. Not necessarily by always having the editor on (which I believe would be impossible, as Kendo can only turn the editor on on one row at a time), but perhaps by simply formatting it like a dropdown.
Any help would be gratefully appreciated. It's annoying as this is a tiny, minor thing and we've got examples of it working elsewhere, but they're grids which have been written primarily in cshtml (using Kendo MVC, I think) and I really don't want to rewrite the entire grid for something so trivial, as well as possibly any other functions that rely on its data.
The primary issue you are facing is that the cell is just a table cell until you actually start editing. At that time, it dynamically creates the input.
I had a similar requirement in the past and it ended up being easier to decorate the cell to look like a drop-down as opposed to trying to render a drop-down in every row of the grid. This allows you to keep the default grid behavior intact and allows the user to see that there will be a list of values when they edit that cell. We ended up just putting a down-arrow icon to the right of the value in the display template - from your code, it looks like you are using some font-awesome icons, but there are some delivered by Kendo UI as well - so, the template could be something like this:
template: '#=id# <span class="k-icon k-icon-s"></span>'
UPDATE:
The kendo icons do depend on your version and I had a typo in the name above. In any case, here is an example you can look at:
This Kendo demo shows adding a custom editor (dropdown) on the Category column:
http://demos.telerik.com/kendo-ui/grid/editing-custom
If you scroll down, there is a button to "Edit this Example" - here, you'll see that the Category column uses a template:
template: "#=Category.CategoryName#"
You can change the template to the following to create a drop-down looking effect:
template: "<span style='border-style:solid; border-width: 1px; padding: 4px; width: 150px; display: block'>#=Category.CategoryName# <span class='k-icon k-i-arrow-60-down' style='float:right'></span></span>"
You can tune the css to get it closer to exactly what you want, but this give you the idea. Other possibilities include actually defining css classes that can be applied so you don't need to include so much in-line styling.
I have reproduced the issue I am facing in a plunk.
I have a kendo-grid with editable rows.
Click edit & click on the value for the column 'Units In Stock', causes the alert pop-up to fire twice.
Click on cancel & then click on the same column again, the pop-up opens only once.
Why does this happen & how do I get around this issue, so the pop-up opens only once, even when the row is on edit mode.
$scope.grid.options = {
dataSource: $scope.dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px", template: '{{dataItem.UnitsInStock}}'},
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
};
The observer behavior is caused by the fact that even though the field is non-editable, the whole edit row is still built when the Grid is in inline editing mode, so the click event handler gets attached twice.
The most straightforward workaround is to call stopImmediatePropagation() on the event data object. Here is a jQuery doc for the same.
Check out this plunk.
I am trying to get a Kendo grid with a static height and width.
It absolutely must not change height and width when I page (which it currently does, due to variably-sized data).
If data increases ,I should provide the Scrolling.
The problem is that when the page is first loading with Data the kendo grid is not setting to that fixed height and width.
but if I resize the window it is getting that fixed height and Providing the Scroll option inside Kendo Grid
So I can I set the height Of kendo Grid at a fixed value when it loads for first time
Kendo Version : v2014.1.318
Code:
$("#ViewUnitContainerTracking").kendoGrid({
sortable: true,
height:"280px",
columns: [
{
field: "UnitCode",
title: "Unit",
width: "15%"
},
{
field: "UnitName",
title: "Unit Name",
width: "35%"
},
{
field: "Status",
title: "St",
width: "5%",
template: $("#TemplateViewUnitTrackingStatus").text()
},
{
field: "StartDate",
title: "Start Date",
//template: $("#TemplateViewUnitTrackingStartDate").text(),
width: "15%",
//type: "date"
},
{
field: "EndDate",
title: "End Date",
//template: $("#TemplateViewUnitTrackingEndDate").text(),
width: "15%",
//type: "date"
},
{
field: "AssessPrgress",
title: "%OAP",
width: "10%"
},
{
field: "Status",
title: "Status",
hidden: true
}
],
editable: false,
resizable: false,
mobile: true,
dataSource: data.UnitList
});
Html Page:
<div id="ViewUnitContainerTracking" style="padding-top:10px;">
</div>
Answer of the problem is:-
dataBound: function() {
$('#ViewUnitContainerTracking .k-grid-content').height(280);
}
Adding this to the Kendo grid will Solve the issue.
As After Data Bound event we can set the custom Css property of the Grid as the Grid dynamic height is set previous to this event.
I m doing this dynamically, to set the Grid to 100%, means, minus bootstrap header and footer:
<script type="text/javascript">
var gridElement = $("#serviceGrid");
function resizeGrid() {
$("#serviceGrid").css("height", $(window).height() - $("#itheader").height() - $("#itfooter").height() - 2);
gridElement.data("kendoGrid").resize();
}
$(window).resize(function() {
resizeGrid();
});
</script>
The "- 2" is because of two 1px borders a top and bottom..
I find this more reliable option which works with locked/frozen columns as well. You can call below lines of code in window's resize event handler
var availableHeight = 500; // Calculate this value based on space available in grid's parent container
$('#YOUR_GRID_ID').data('kendoGrid').setOptions({ height: availableHeight})
I am currently working with using SlickGrid and allowing the user to select which columns to display using the ColumnPicker.
Following the example at http://mleibman.github.com/SlickGrid/examples/example4-model.html I have been able to get this to work quite nicely.
The next step that I am unsure about is whether it is possible to choose a default list of columns to show at first time render.
For example, say I have an array of 5 columns declared something like below:
{
name: "Name"
field: "Name"
id: "Name"
sortable: true
minWidth: 120
editor: Slick.Editors.Text
},
{
name: "Address"
field: "Address"
id: "Address"
sortable: true
minWidth: 175
editor: Slick.Editors.Text
},
{
name: "Town"
field: "Town"
id: "Town"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
},
{
name: "Country"
field: "Country"
id: "Country"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
},
{
name: "Network"
field: "Network"
id: "Network"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
}
At the moment all of these columns will be shown and can be selected to be hidden in the ColumnPicker. The functionality I am looking for is to, for example, say I only want the columns Name, Address and Network to be shown, but still have the others remain as options in the ColumnPicker.
Is this in place or is there an available method of achieving this?
To anyone who might come across this, I found a solution which works but may not be the best.
It is essentially using 2 separate arrays, 1 which holds the default columns to render, and the other holding the names of all the columns you can choose from, including the default column array.
When rendering, I instantiate my grid with the array of default columns:
#Grid = new Slick.Grid(#ElementId, #Data, #DefaultColumns, #GridOptions)
and then when setting the column picker, use the array of all the columns:
columnpicker = new Slick.Controls.ColumnPicker(#Columns, #Grid, #GridOptions)