Related
I have 5 columns that display different Levels from Level0 to Level4. I hav a requirement to show all these level columns into 1 main columns named Levels, i.e. 1 column name level having 5 sub columns named lv0, lv1... lv4?
I tried solution provided in How to display multiple values in same column in jqgrid
but it is merging the values and hence mismatch of values with the header.
Is there a way to merge columns into 1 columns and not just the values?
below is the colModel and ColNames for the jqgrid:
'detailViewcolNames': [
"Sub Project(s)",
"LV0",
"LV1",
"LV2",
"LV3",
"LV4",
"Status",
"%Comp",
"%Weight",
"Wins",
"Attention",
"Escalation",
"Comments",
"Next Steps"
],
'detailGridcolModel': [{
name: 'name',
width: '15%',
index: 'name',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = "<span class='gridTitle'>" + cellvalue + "</span>";
return cellHtml;
},
unformat: function(cellvalue, options, rowObject) {
return cellvalue;
},
}, {
name: "Status",
index: 'Status',
width: '5%',
title: false,
resizable: false,
sortable: false,
jsonmap: "from[Subtask].to.Status",
formatter: function(cellvalue, options, rowObject) {
return pathProjectModel.getStatusMapImage(cellvalue, options, rowObject);
}
}, {
name: 'LV0',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV1',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV2',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV3',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV4',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'attribute[Percent Complete]',
index: 'attribute[Percent Complete]',
width: '10%',
title: false,
resizable: false,
sortable: false,
jsonmap: "attribute[Percent Complete]",
}, {
name: 'Weight',
index: 'Weight',
width: '10%',
title: false,
resizable: false,
hidden: true,
sortable: false,
jsonmap: "Weight",
}, {
name: "Win",
index: "Win",
width: '15%',
title: false,
resizable: false,
sortable: false,
jsonmap: "Win",
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
}
}, {
name: "Attention",
index: "Attention",
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Attention"
}, {
name: 'Escalation',
index: 'Escalation',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Escalation"
}, {
name: 'Comments',
index: 'Comments',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Comments"
}, {
name: 'Next Steps',
index: 'Next Steps',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Next Steps"
}, ]
below is the Sample data. Here id property contains rowid
responseObj = {
id: "2432.XXXXXXXXXXXXXX",
"name": "project Name",
"Status": "On Track",
"LV0": "100",
"LV1": "90.0",
"LV2": "0.0",
"LV3": "12.0",
"LV4": "",
"attribute[Percent Complete]": "0.0",
"Weight": "30.0",
"Win": [
["fasdfgasdf"]
],
"Attention": [
["sdfasdga"]
],
"Escalation": [
["fedgsdshsdfh"]
],
"Comments": [
["dgdfhdfhdfuiopjnjkn"]
],
"Next Steps": [
["vbmcbvndfgec"]
]
}
If you really need to use old jqGrid 4.6.0 and to use datatype: "local" then you should change the format of input data. It's the way, which I would recommend you. Alternatively you could try to use datatype: "jsonstring" and provide the input data via datastr parameter instead of data. You will have to change jsonmap defined as function to read the input data. In any way you have to fix the values of name properties, which you use.
The name property of jqGrid will be used to generate id attributes of some internal elements. HTML5 don't allow to use spaces in id (see here the statement: "The value must not contain any space characters"). Additionally the name will be used in different CSS selectors and you can have problems in case of usage names, which contains [ or ] (see [Percent Complete]).
You should not use formatter to build the value of "virtual" property from other existing properties. Instead of that you should use jsonmap or "pre-process" the input data to set new property. If you do use custom formatter, then it's strictly recommended to specify unformat callback too.
The practical example is following. Let us you have input data with numeric the properties price and tax any you want to display the corresponding columns and total_price additionally, which build as the sum of price and tax. The recommended way: you should fill total_price once or to use jsonmap defined as function to calculate the sum of price and tax. After that you can use predefined formatter: "currency" to display the value. I think that you should generate one additional column from lv0, lv1... lv4 in exact the same way.
Additionally, I want to remark that the usage of old jqGrid 4.6 now is dangerous, because it's not supported since 2014. To be exact, there are not exist "jqGrid" product at all. There are exist two main forks of the old jqGrid: "free jqGrid", which I develop, and which current version is 4.14.0 and commercial "Guriddo jqGrid JS", which current version is 5.2.1. I strictly recommend you to migrate to one from the currently developed and supported products. I remind you about the problem described in the answer. The version of jqGrid, existing at the time, displayed wrong grid in the new version of Chrome. Google publish new version every 1.5-2 months. It could be that jqGrid 4.6 (and your existing web application) will display wrong grids in the next version of Chrome/Firefox or any other web browser. The only solution of the problem will be migration to another version of jqGrid, with the fixed code. If you continue to use jqGrid 4.6 then you will have to implement the fix yourself. If you would use the current version of "free jqGrid" or "Guriddo jqGrid JS" then the fix will implement developers of the corresponding product and you will need just to download the new version from GitHub.
I am trying to use Kendo UI Grid with angular js. I need to expand the grid to further level when user clicks a link given in one of the columns of the grid.
I used following code to expand the grid on click of an tag inside a kendo grid column.
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
schema: {
model: {
fields: {
fieldA: { type: "string" },
fieldB: { type: "string" },
fieldC: { type: "string" },
fieldT: { type: "numeric" }
}
}
},
pageSize: 10
},
filterable: true,
sortable: true,
resizable: true,
pageable: true,
scrollable: true,
columns: [
{ field: "fieldA", title: "FieldA", width: 90},
{ field: "fieldB", title: "FieldB", width: 90},
{ field: "fieldC", title: "FieldC", width: 90},
{ field: "fieldT", title: "FieldT", width: 90, template: "<a onclick='expand(this)'href='\\#'>#=mydata#</a>"}
]
};
But on running the code it just gives me an error in the browser console window.
Uncaught ReferenceError: expand is not defined at
HTMLAnchorElement.onclick
I researched and found that Kendo doesn't supports onclick event inside an tag. Therfore tried to use tag instead of tag. But it still does not work.
{ field: "fieldT", title: "FieldT", width: 90, template: "<span ng-click='showFileLevel(this)>{{mydata}}</span>"}
Can anyone please guide me in the right direction or let me know how can I expand a Kendo grid to further levels on clicking text inside a certain column of the grid using Angular JS.
you write expand(this) method out of the controller in your js.
I am using the Kendo UI grid and am display a role of models. Each model has a navigation property, and I am trying to display a field that exists in this navigation property.
//schema for my kendo data source
schema: {
data: function (data) {
return data || [];
}
}
......................................................
$("#FAAFreqGrid").kendoGrid({
dataSource: FAADS,
columns: [
{ field: "Id", title: "Freq ID", format: "{0:c}", width: "120px" },
{ field: "Frequency", title: "Frequency Test" format: "{0:c}", width: "120px" },
{ field: "FREQ_POOL", title: "FAATEST", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
If I go to my Web API Url, I get a json response of:
[{"$id":"1","Frequency":"164.1375","FREQ_POOL":{"$id":"2","IsAM":true,......etc}
FREQ_POOL is my navigation property, and it has the data I want. Frequency exists and displays in my grid properly. But my FREQ_POOL field says [object Object], and if I try to say "FREQ_POOL.IsAM", it says IsAM is not defined. I cannot get it to bind to any property I can bind to any other non-navigation field. How do I make this work? The data exists in the JSON object that is returned, but the binding just isn't working correctly. Thanks.
You could set a template for the column in question, like this:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name.first#, #: name.last# </strong>"
}],
dataSource: [ { name: { first: 'Jane', last: 'Doe' } }, { name: { first: "John", last: 'Doe' } } ]
});
the template can then be used to show object in the dataset
more info, you could find here
For the editing, you could then also define the cell editor, with an extra template or function, more info about that, you could find here.
Here's a jsfiddle with a sample kendo grid:
http://jsfiddle.net/owlstack/Sbb5Z/1619/
Here's where I set the kendo columns:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
data: createRandomData(10),
schema: {
model: {
fields: {
FirstName: {
type: "string"
},
LastName: {
type: "string"
},
City: {
type: "string"
},
Title: {
type: "string"
},
BirthDate: {
type: "date"
},
Age: {
type: "number"
}
}
}
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
change: onChangeSelection,
filterable: true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: "100px",
}, {
field: "LastName",
title: "Last Name",
width: "100px",
}, {
field: "City",
width: "100px",
}, {
field: "Title",
width: "105px"
}, {
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #',
width: "90px"
}, {
field: "Age",
width: "50px"
}]
}).data("kendoGrid");
applyTooltip();
});
I added individual widths to each of the columns. However, I would also like to set a max-width to each kendo grid column. Is it possible to set a max-width (not a set one for all columns but max-width for individual columns?)?
There is no property like max-width exposed for kendo grid. One of the round about solution will be to set Width of Column as autosize and then use template where you use css properties to maintain max width.
Following is the example. Not sure if you are looking for the same answer.
<style>.intro { max-width: 100px ;width: 20px ;background-color: yellow;</style>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
template : '<span class=intro>#:ContactName#</span>'
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
I have JavaScript code that will help achieve this functionality. It provides a way for a (command) column to retain a fixed size.
On the one hand, it acts as a minimum size for a column, but if the grid were to increase in size, the original size is enforced. This allows for other grid cells to increase in size by a larger amount.
Check out this dojo that shows this code in action.
Note that all columns need to have a specified width (this effectively becomes a minimum width).
The browser resize event is used to trigger the size recalculation of the grids.
This function supports master/detail and grouping.
I have not considered column resizing at this point.
If you have any ideas for improvements then go for it!
.k-grid td
white-space: nowrap;
text-overflow: ellipsis;
max-width:150px;
}
YES....
You can set a textbox-style MAX WIDTH for column values in a Kendo Grid...and you can do a lot more too. However, you must do so by-hand using the grids Before Edit event.
FOR EXAMPLE:
// ELEMENTS
var $gridDiscipline = $('#gridDiscipline')
var grid = $gridDiscipline.kendoGrid();
// EVENTS
grid.bind('beforeEdit', beforeEdit);
// IMPLEMENTATION
function beforeEdit(e)
{
// Edit Master Row
// This event raises when ADD_NEW or EDIT is pressed
// Optionally, I add a slight timeout to ensure the MASTER ROW is "open"
// Obviously, the elements in your row will be different from mine
// As you will see...you can do all kinds of late-bound configuration practices here (whatever makes sense for you)
setTimeout(function () {
var $container = $('.k-master-row', e.sender.tbody);
// Elements
var $cmbContactEmployee = $container.find("#EmployeeId");
var $txtDisciplineName = $container.find("#DisciplineName");
var $txtTags = $container.find("#Tags");
// Instances
var cmbContactEmployee = $cmbContactEmployee.data('kendoComboBox');
// Configuration
cmbContactEmployee.dataSource.transport.options.read.data = function (e) {
var text = e.filter.filters[0].value;
return { searchText: text };
};
// If a DataAnnotation value exists...you can enforce it
var maxlength = $txtDisciplineName.attr('data-val-length-max');
if (maxlength) {
$txtDisciplineName.attr('maxlength', maxlength);
}
// Or you can set something outright
$txtTags.attr('maxlength', 100);
}, 500);
}
I have a KENDO Grid and the fields and columns in that are populated from a datasource which is intern populated from an action.
Now i want to bind a particular cell content in that grid to another controller action and pass that ID of the cell also. How do I accomplish this. Below is the code for my grid. I could find answers in kendo UI docs but they use HTML Helpers to achieve this. I want it in the same style as below. Let us take the readername as the cell content for which this binding is required. Anybody tried this before?
$("#eventsgrid").kendoGrid(
{
dataSource: eventsDataSource,
navigatable: true,
pageable:
{
input: true,
numeric: false
},
columns:[
{
field:"",width:"30px", template:'<input type="checkbox" id="selectevent"/>'
},
{
field:"CardNumber",width:"80px"
},
{
field: "Image", width: "45px", title: "Type", template: "<img src='/Content/Themes/Default/images/AlarmType.png' id='AlarmType'/>"
},
{
field: "Priority", width: "60px", title: "Priroty"
},
{
field: "Origin", title:"Event Time"
},
{
field:"Description", title:"Alarm Title"
},
{
field: "ReaderName", title: "Location"
},
{
field: "", title: "Actions and Interactions", width: "160px", template: '<input type="button" value="Acknowledge" onclick="CheckAck" id="Acknowledge" /><br/><a href="javascript:performActions()" >3 Actions</a>'
},
{
field: "Image", title: "More", width: "60px", template: "<img src='/Content/Themes/Default/images/Door.png' onclick='showDetails()' id='door' width='20' height='20'/><div id='cardholderdetails'></div>"
}
],
}).data("kendoGrid");
Now i have a function which calls a $.POST call with the parameters. This function is hooked to the click event of the button. Is there a different way to do this?