Kendo UI v2015.2.805
kendoScheduler
I implemented a event calendar using kendoScheduler and it is working fine except I cannot initialize the data model when a new event is being created.
I am using a custom template for the scheduler editor. Here is a simplified snippet:
<script type="text/x-kendo-template" id="schedulerTemplate">
<div >Created by #= xCreatedBy #</div>
</script>
When editing an existing event the field xCreatedBy is populated from the database with the name of the person that created it.
Created By John Smith
To add a new task I double click a date on the calendar and the editor opens, but xCreatedBy is null so it displays:
Created By null
In the data source I define the data model and provide default values, like in this simplified example:
$("#task_calendar").kendoScheduler({
dataSource: {
...CRUD operations....
schema: {
model: {
id: "taskId",
fields: {
xCreatedBy: { from: "xCreatedBy", defaultValue: "Your_Name" } }
}
}
});
I expected xCreatedBy to equal "Your_Name" but it is null.
How can I initialize the model when a new event is created (that is, not queried from the database)?
I have tested the described behavior and it worked correctly at my side. Here is my test dojo.
Related
I am using Odoo 10e. I want to integrate a jquery plugin into my module.
I want to integrate the jQuery plugin jquery-resizable-columns. It simple helps user to resize columns of table on the fly and I want to apply this on a specific model's list view
Which method should I extend in order to add the plugin?
I think you should extend (maybe include) some widget in the web module. If you go to the file /addons/web/static/src/js/view_list.js, you can see the widget that renders the table:
instance.web.ListView = instance.web.View.extend( /** #lends instance.web.ListView# */ {
_template: 'ListView',
display_name: _lt('List'),
defaults: {
// records can be selected one by one
'selectable': true,
// list rows can be deleted
'deletable': false,
// whether the column headers should be displayed
'header': true,
// display addition button, with that label
'addable': _lt("Create"),
// whether the list view can be sorted, note that once a view has been
// sorted it can not be reordered anymore
'sortable': true,
// whether the view rows can be reordered (via vertical drag & drop)
'reorderable': true,
'action_buttons': true,
//whether the editable property of the view has to be disabled
'disable_editable_mode': false,
},
view_type: 'tree',
events: {
'click thead th.oe_sortable[data-id]': 'sort_by_column'
},
// [...]
sort_by_column: function (e) {
e.stopPropagation();
var $column = $(e.currentTarget);
var col_name = $column.data('id');
var field = this.fields_view.fields[col_name];
// test whether the field is sortable
if (field && !field.sortable) {
return false;
}
this.dataset.sort(col_name);
if($column.hasClass("sortdown") || $column.hasClass("sortup")) {
$column.toggleClass("sortup sortdown");
} else {
$column.addClass("sortdown");
}
$column.siblings('.oe_sortable').removeClass("sortup sortdown");
this.reload_content();
},
As you can see there is an event declared as sort_by_column, so you would have to add the plugin you want in a similar way.
And if you have any doubts inheriting and modifying widgets you can go to the Odoo Documentation
And if you are using the version 10 you can check how it is built here
/addons/web/static/src/js/views/list_view.js
In .js file you have to first extend particular list view's js. After that give your custom model name in that .js file and run that.
In your case, You need.
Created a new module or modify already custom module
Create file.js and file.xml.
In the file xml you must write this
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/module_name/static/src/css/css_file.css"/>
<script type="text/javascript" src="/module_name/static/src/js/js_file.js"></script>
</xpath>
</template>
</odoo>
And after you needing extent the list_view.js of Odoo to integrate your plugin.
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.
I am trying to a simple kendo ui form with 'Save' and 'Cancel' buttons. I am using the Kendo.Observable to bind the data to the form.
The functionality I am trying to achieve is, if the 'Save' button is clicked, the form data will be saved. Else, if 'Cancel' is clicked the form will come back to read-only mode with the previous data that was present. To do this, I am first saving the model data in a 'originalvalue' property on click of Update button. If 'Cancel' is clicked, the 'fields' model data is restored to the 'originalvalue'. But the issue is that the , 'originalvalue' does not contain the original value. It gets updated when the user is editing during 'Save'.
The question is - how do I retain the original model data so that it can be refreshed on cancel?
Please find below the code. Appreciate your help, thanks.
<script type="text/javascript">
var viewModel = kendo.observable ({
updated: false,
originalvalue: {},
update: function(e) {
var original = this.get("fields");
this.set("originalvalue", original);
this.set("updated", true);
},
save: function(e) {
e.preventDefault();
if (validator.validate()) {
// make an ajax call to save this data
this.set("updated", false);
}
},
cancel: function(e) {
var original = this.get("originalvalue");
validator.destroy();
this.set("fields", original);
this.set("updated", false);
},
fields: {}
});
viewModel.set("fields", formArray);
kendo.bind($("#outerForm"), viewModel);
// prepare the validator
var validator = $("#outerForm").kendoValidator().data("kendoValidator");
I had to make the exact thing on a form I am currently developing. I am using a DataSource object for the data so I had to use cancelChange().
The thing I did there:
1. I made a Datasource with a schema:
... schema: {
model: {id: "id"}}
...
2. I got the object I was editing with the mapped id:
clientDataSource.cancelChanges(clientDataSource.get(this.get("contactID")));
where the ContactID is created in a setData function where I have passed the ID:
this.set("contactID", contactID);
As I may have notices and understood, you have another problem here where you arent using a DataSource but rather data for fields?
The problem here is that your originalValue is inside the Observable object and it is referenced to the variable original and thus it has observable properties. You should have the variable originalValue defined outside the observable object:
var originalValue;
var viewModel = kendo.observable ({ ...
And you should send the formArray also to that variable so you will have the defaults load before even the observable object is loaded such as:
originalValue = formArray;
viewModel.set("fields", formArray);
So when you need to cancel it you should have:
cancel: function(e) {
var original = originalValue;
validator.destroy();
this.set("fields", original);
this.set("updated", false);
},
I havent tested it but it should provide you some guidance on how to solve that problem.
I'm implementing a simple (at least ,that was the goal) Kendo UI grid that displays two columns: one holding a checkbox, bound to a boolean, and one holding a display name for the item. The checkbox column has a simple template, and the change() event of the checkbox is handled so that the model in the datasource gets updated. I have verified this, and it works.
The data source has been configured for batch, and defines a transport for read and update. Both call a function that perform the ajax call. As I said before, the read function is handled as expected. However, the update function defined on the transport is not. The sync() on the datasource is triggered with a simple button whose click event is hooked to a function that calls datasource.sync() (or grid.saveChanges()).
transport: {
read: function(options) {
return loadStuff(options);
},
update: function (options) {
return updateStuff(options);
}
}
When debugging in the Kendo UI code, it looks like the models attribute on the ModelSet is always empty, and therefore the sync() decides that there's nothing to sync. Anyone got a clue what is happening here?
UPDATE:
Looks like something may be wrong when handling the checkbox check / uncheck. Apparently I should use something like
$('#divGrid').on('click', '.chkbx', function() {
var checked = $(this).is(':checked');
var grid = $('#divGrid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set("Selected", checked);
});
Unfortunately, it looks like the set() method is not defined on the data item. When debugging, it only contains the data, and no Model object having the set() method.
UPDATE 2:
Tried wrapping the data returned from the ajax call in a model defined with Model.define(). That seems to solve the issue of the model not being dirty, as the _modified property on the model returns true. However, the models array in the ModelSet remains empty. Is this a bug in Kendo UI, or am I going the wrong way?
You don't actually need to bind to click event on the checkboxes.
I´ve posted an example on using it in JSFiddle where you can see it running. This example displays in a grid two columns: first text (tick) and second boolean rendered as a checkbox (selected); the update is batch (so, it's pretty close to what you have).
Questions to keep in mind are:
For displaying the checkbox while not in edit mode, you should define a template, something like this. You might realize that the checkbox is in disabled state by default since you want to edit it as other fields (selecting the cell first). This also guarantees that the model is correctly updated:
{
field : "selected",
title : "Selected",
template: "<input type='checkbox' name='selected' #= selected ? 'checked' : '' # disabled/>"
}
Define in the model that this field is boolean:
schema : {
id : "id",
model: {
fields: {
symbol : { type: "string" },
selected: { type: "boolean" }
}
}
},
Define the transport.update function, something like:
transport: {
read : function (operation) {
// Your function for reading
},
update: function (operation) {
// Display modified data in an alert
alert("update" + JSON.stringify(operation.data.models, null, 4));
// Invoke updating function
// that should ends with an operation.success(the_new_data)
// In this example just say ok
operation.success(operation.data.models)
}
}
EDIT: If you want to be able to modify the checkbox state without having to enter in edit mode first, you should:
Remove the disabled from the template:
{
field : "selected",
title : "Selected",
template : "<input type='checkbox' name='selected' #= selected ? 'checked' : '' #/>"
},
Then bind the click event on checkboxes to the following handler function:
$("#stocks_tbl").on("click", "input:checkbox", function(ev) {
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set("selected", this.checked);
});
Where #stocks_tbl is the id of the div that contains the grid. You might see it running here.
NOTE: It's important the on with the three parameters for making it live
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
}