I have a column with text fields in my ui grid. I need the last two cells of the column to contain a dropbox. I am not sure how to do this the best way. I am using bootstrap and angularjs for the grid and data within the grid.
Here is where I declare the grid within the html file:
<div class="modal-body">
<div id="gridTest" ui-grid="gridOptions" class="grid"></div>
</div>
Here is where I setup the data for the columns and the textfields for the column I am talking about:
$scope.gridOptions = {
showGridFooter: true,
enableHorizontalScrollbar: 0,
showColumnFooter: false,
enableFiltering: false,
enableColumnMenus: false,
enableGridMenu: false,
columnDefs: [
{ field: 'empty', width: '34%', displayName: ''},
{ field: 'modified', width: '34%', displayName: 'Modified', cellTemplate: '<input class="text-test" type="text">'},
{ field: 'original', width: '34%', displayName: 'Originals', cellTemplate: '<div style="text-align:center">{{COL_FIELD CUSTOM_FILTERS}}</div>'},
],
data: [
{
"empty":"Number of Employees(Daily)",
"modified": "",
"original":"20",
},
{
"empty":"Customer Restroom Visits(Daily)",
"modified":"",
"original":"5",
},
{
"empty":"Days Open per Week",
"modified":"",
"original":"5",
},
{
"empty":"Number of Restrooms",
"modified":"",
"original":"2",
},
{
"empty":"Number of Stalls",
"modified":"",
"original":"2",
},
{
"empty":"Number of Urinals",
"modified":"",
"original":"2",
},
{
"empty":"Delivery Frequency",
"modified":"",
"original":"Weekly Deliveries",
},
{
"empty":"Billing Frequency",
"modified":"",
"original":"Monthly",
}
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
Is there a way I can set each cell in the columns as its own field? and how would I add in a dropdown menu for the 2 cells within the column?
I am new to this so any additional information please let me know, thanks!
Related
I have a project that use wcf rest angularJS.
I have already create JSON on
localhost:51458/ServiceRequest.svc/GetAllRequest/
The output looked like this
[{"ASSIGNED_TO":"manager","BODY":"asdasd","CATEGORY":"APP","FILE_NAME":"gambar.jpg","ID":18,"REQUESTER":"user","STATUS":"On Progress","SUBCATEGORY":"BUG FIXING","SUBJECT":"asd","TICKET_NUMBER":"APP_20161014_111_18"},{"ASSIGNED_TO":"manager","BODY":"abc","CATEGORY":"IT","FILE_NAME":"App_Form.docx","ID":19,"REQUESTER":"Trainee 02","STATUS":"Assign","SUBCATEGORY":"REQUEST NEW USER","SUBJECT":"test insert lewat browser","TICKET_NUMBER":"IT_20161017_121_19"},{"ASSIGNED_TO":"tes","BODY":"tes","CATEGORY":"tes","FILE_NAME":"tes","ID":20,"REQUESTER":"tes","STATUS":"Assign","SUBCATEGORY":"tes","SUBJECT":"tes","TICKET_NUMBER":"1231"},{"ASSIGNED_TO":"tes","BODY":"tes","CATEGORY":"tes","FILE_NAME":"asd","ID":22,"REQUESTER":"tes","STATUS":"Assign","SUBCATEGORY":"tes","SUBJECT":"tes","TICKET_NUMBER":"123213"},{"ASSIGNED_TO":"dsfbsd","BODY":"sbfd","CATEGORY":"dvsd","FILE_NAME":"sdfbsdf","ID":38,"REQUESTER":"sdfv","STATUS":"Assign","SUBCATEGORY":"dvdv","SUBJECT":"dvdsv","TICKET_NUMBER":"huih"},{"ASSIGNED_TO":"assignto","BODY":"body","CATEGORY":"category","FILE_NAME":"fileName","ID":40,"REQUESTER":"request","STATUS":"Assign","SUBCATEGORY":"subCategory","SUBJECT":"subject","TICKET_NUMBER":"ABC_1234_98"},{"ASSIGNED_TO":"assignto","BODY":"undefined","CATEGORY":"undefined","FILE_NAME":"fileName","ID":45,"REQUESTER":"request","STATUS":"Assign","SUBCATEGORY":"undefined","SUBJECT":"undefined","TICKET_NUMBER":"[object Object]"}]
I want to bind it to Data Grid on DevExtreme. you can see the code on approval.js
$scope.dataGridOptions = {
dataSource: {
store: {
type: "odata",
url: "http://localhost:51458/ServiceRequest.svc/GetAllRequest"
},
select: [
"ID",
"REQUESTER",
"CATEGORY",
"BODY",
"FILE_NAME",
"ASSIGNED_TO"
],
},
columns: [
{
caption: "ID",
dataField: "ID",
}, {
dataField: "REQUESTER",
width: 250
}, {
caption: "Kategori",
dataField: "CATEGORY",
}, {
caption: "Body",
dataField: "BODY",
}, {
caption: "File Name",
dataField: "FILE_NAME",
}, {
caption: "Assigned To",
dataField: "ASSIGNED_TO",
}
]
}
in the html
<div>
<div id="gridContainer" dx-data-grid="dataGridOptions"></div>
</div>
I'm always getting No Data on the Data Grid. Why it cant get data from localhost? can it use JSON? or the data should be ODATA? because when i try to bind the example data from
https://js.devexpress.com/Demos/DevAV/odata/Products
it can work bind odata example
Thanks in advance
You should try it.
$.getJSON("localhost:51458/ServiceRequest.svc/GetAllRequest/", function (data) {
$("#gridContainer").dxDataGrid({
dataSource: data,
// your code....
}).dxDataGrid("instance");
I'm using the Kendo Ext library (https://github.com/jsExtensions/kendoui-extended-api) to render a Treeview inside of a Dropdown List. The problem I'm having is that the control get's hidden underneath the parent div. However when compared to the normal Kendo Dropdown List, that control does not suffer the same problem.
This is the example I have so far:
https://jsfiddle.net/6xxau9d4/1/
HTML
<div class="elm1">
<div id="dropDownTreeView"></div>
<input id="sample1" value="1" style="width: 150;" />
<input id="sample2" value="1" style="width: 150x;" />
</div>
JS
var dropDownTreeView = $("#dropDownTreeView").kendoExtDropDownTreeView({
treeview: {
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
}
}).data("kendoExtDropDownTreeView");
dropDownTreeView.dropDownList().text("Dropdown Treeview")
$(document).ready(function() {
$("#sample1").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Sample1",
value: null
}],
template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
height: 400,
open: function(e) {
var elm = e.sender.list.find("#myfancyid");
var dropDownTreeView = $(elm).kendoTreeView({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
});
}
});
$("#sample2").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{
text: "Sample2",
value: null
}],
template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
height: 400,
open: function(e) {
var elm = e.sender.list.find("#myfancyid");
var dropDownTreeView = $(elm).kendoTreeView({
dataSource: new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
})
});
}
});
});
CSS
.elm1 {
width: 400px;
height: 100px;
background-color: grey;
position: relative;
overflow: scroll;
}
#customers-list .k-item {
line-height: 1em;
min-width: 300px;
background-color: white;
display: inline-block;
Where Sample1 and Sample2 perform how I would like, but Dropdown Treeview does not. I've been pouring over the source trying to understand what makes Sample1 and Sample2 work, but I have yet to come to a realization. Any help in the right direction is much appreciated.
By default, the Kendo UI DropDownLists, ComboBoxes, DatePickers and similar widgets, use a detached popup, which is a child of the <body> element. This ensures that these popups (or dropdowns, if you prefer) will be able to stay on top of the other page content and not be restricted by fixed-height or scrollable containers.
On the other hand, the ExtDropDownTreeView widget renders its dropdown in the same place, where the original widget element is placed. Since the widget element is located inside a fixed height scrollable container in your case, this causes the observed problem.
I have a kendo grid, defined as such:
$("#auditGrid").kendoGrid({
height: 650,
width: 650,
sortable: true,
filterable: true,
resizable: true,
columns: [
{ field: "ChangeTypeDescription", title: "Change Type" },
{ field: "LevelDescription", title: "Level" },
{ field: "Site.ShortName", title: "Site", width: "100px", },
{ field: "TimeStampLocal", title: "Date", type: "date", format: "{0: yyyy-MM-dd HH:mm:ss}" }
]
});
However, the column labelled "Site" does not display anything, even when I know there should be something there. Setting the field as "Site" instead of "Site.ShortName" shows a value of [object Object], but whenever I try to display ShortName off of Site, it shows an empty column. All other columns display properly.
Does anyone have any insight as to why this is happening?
The datasource schema, in case you need to see it:
schema: {
model: {
fields: {
ChangeTypeDescription: { type: "string" },
LevelDescription: { type: "string" },
Site: { type: "string" },
TimeStampLocal: { type: "date" }
}
}
},
You needs to use the template functionality for achieving it, just change the column description of the field Site as follows
{ field: 'Site', title: 'Site', template: '#= Site.ShortName# '}
For Kendo UI Grid, there is the option of setting filterable to row or menu or both. I was wondering if it was possible to set some columns to be row(only as row), while others display as menu(only as menu). Preferably not with css.
Example: I want field name to be a row filter, while age to be a menu filter
<script>
$("#grid").kendoGrid({
dataSource: ...
filterable: {
operators: {
string: {
startswith: "Starts with",
eq: "Exact Client Name",
contains: "contains"
},
number: {
gte: "From",
lte: "Before"
}
},
mode: "row" },
column: [ { field: "ClientName", title: "Client Name", width: 150, type: "string" , attributes: { style: "text-align:left;" }, filterable: { messages: { info: "Show clients that: " }, extra: false} },
{ field: "Month", title: "Month", width: 78, type: "number", attributes: { style: "text-align:center;" }, filterable: { messages: { info: "Show month(s): ", and: "To" }, ui: monthFilter, mode: "menu" } }
]
});
</script>
I figured out a solution. Probably not the best solution, but for anyone that needs it for future reference, I used the follow solution.
set filterable mode to mode: "row, menu"
filterable: {
cell: { enabled: false}
}
to eliminate unwanted rows filters. And using jquery
databinding: function(e){
$("#grid-name .k-grid-filter .k-filter").css('display', 'none');
$("#grid-name ").find("[data-field=Month]>.k-grid-filter .k-filter").css('display', 'block');
}
to eliminate unwanted column menu filters.
I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.
Does it have to do with some kind of Edit Template ? I can't find the documentation for it.
thanks.
Bob
Here's my sample grid :
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [{
field: "PositionId",
},
{
field: "Portfolio",
editor: portfolioDropDownEditor, template: "#=Portfolio#"
},
{
field: "Instrument",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument#",
},
{
field: "NumOfContracts",
},
{
field: "BuySell",
editor: buySellDropDownEditor, template: "#=BuySell#"
},
{
command: [
{
name: "edit",
click: function (e) {
}
},
"destroy"
]
},
],
sortable: true,
editable: "popup",
});
You can wire up edit event to set dropdown options:
name: "edit",
click: function (e) {
if (!e.model.isNew()) {
var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
dropdown.list.width(500);
}
}