Setting mapping DHTMLX - dhtmlx

Is there a way to have attribute mapping in DHTMLX tree grid as we have in gantt charts? For example if we have set for a column id ="Age", it should look for that attribute in the incoming JSON data and automatically map it to appropriate column.

You can use setColumnIds command
mygrid.setColumnIds("sales,book");
And use column ids for data mapping
mygrid.parse([
{ id:1, sales:"1220", book:"The BestSeller"}
], "js")
and for loading from the external source
mygrid.load("data.php", "js")
The key point here is the usage of "js" as data loading type.

Related

amcharts show a dynamic title when loading data using dataLoader

I am using amcharts (MapArea within DataLoader) to fetch data as json and render the map. However, I also want to send a dynamic title/subtitle in json (e.g. Total Population: X), which I'd want to render in the Map. Is it possible? I couldn't find the correct property to send it in, in https://docs.amcharts.com/3/javascriptmaps/MapArea
Assuming you're referring to the map title, the dataLoader doesn't allow you to set the title directly as it only loads the mapData properties in the dataProvider (areas, lines, map type). You can store extra data in your JSON and use the dataLoader's complete callback to assign what you want to the chart instance itself.
For example, if you set a custom title property in your JSON response like so:
{
"map": "/* your map here */",
"title": "Your title text here",
// other properties omitted
}
You can add that title text in the complete callback like so:
"dataLoader": {
"url": "/* your json endpoint */",
"complete": function(map) {
map.addTitle(map.dataProvider.title);
}
},
Demo

How to make a column non-editable in Kendu UI Grid With Row template?

http://jsfiddle.net/valchev/s7ZCV/15/,
the above link is the simple example of Kendo grid with row template.All I wanted to do is make a specific column non-editable. the usual way is just define a model and further inside fields add editable False to the required field. i just wanted to know is there any other way to make a column editable as false because i dont want to add one more model in kendo as I am using models in entity level and Jay-data Level.
var dataSource = new kendo.data.DataSource({
data: records,
schema: {
model: {
id: "foo",
fields: {
foo: {type: "number"},
CostCategoryAbv: {type: "string",editable:false}, // i dont want this
VendorName: {type: "string"}
}
}
}
});
I've been doing a lot of work with the Kendo Grid using MVC. I've been getting around this by using a custom popup editor. The editor only allows the user to modify the fields that I want them to. Another way of getting around this is by changing the controller so that any user edit does not modify the field when the data source is updated. I know that the code provided is not using C# or MVC, but I hope this helps. I think you may be able to modify the save method so that it only saves select fields.

group filed kendo grid with type object

I have similar example to this grid
http://jsfiddle.net/Sbb5Z/478/
I want to apply grouping on category field. I got an error. because category filed type is object. How can I specify the grouping filter field.
I tried this but it did not work
groupable: {
field:"Category.CategoryName",
}
Any ideas ??

Defining which field was changed in a grid

Is it possible to identify on a kendo UI grid which field was altered on a row edit?
Right now I am sending the entire row to the server that was changed. I would like to send
the request to the server to also include a variable holding the name
of the field that was edited.
Is something like that supported by kendo or
is there a work around for that?
This is not supported out of the box. However the grid API should allow this to be implemented. Check the edit and save events. In there you can listen to changes of the model instance which is currently being edit. Here is a quick example:
$("#grid").kendoGrid({
edit: function(e) {
e.model.unbind("change", model_change).bind("change", model_change);
}
});
function model_change(e) {
var model = this;
var field = e.field;
// store somewhere the field and model
}

Create a jqGrid link with just the id

I can see how to create a jqGrid link using:
colModel: [ {name:'myname',
formatter:'showlink',
formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}
This creates a request like /someurl.php?id=XX&action=edit and the display text will be the value of myname.
But in our case we don't need the myname text - our display text will be hard coded. We don't want to have to pass any additional data down in our JSON request - but it seems you need a JSON attribute for each column. How can we have a link without the add'l JSON column?
The formatter 'showlink' like all other formatter are used to format the data loaded in jqGrid from server or from the local data. So in case of your example you will not have 'myname' text (the column name) in the link but the cell value from the grid.
So if you want to use predefined formatter 'showlink' you have to fill the column data with the text which want to see in the link. You can do this either inside of your JSON data or filling/overwriting the text after the page are loaded for example inside of loadComplete event handle:
loadComplete: function() {
var grid = $("list");
var ids = grid.getDataIDs();
for (var i = 0, idCount = ids.length; i < idCount; i++) {
grid.setCell(id, 'myname', 'My text for link');
}
}
You can use also custom formatter and custom unformatter instead of 'showlink' predefined formatter. Then you can define the text of link like you want without filling any data in the grid.

Resources