Is it possible to add a new row to a grid grouping? I have a custom button that needs to do this?
I have checked the documentation here: http://docs.kendoui.com/api/web/grid#addrow, but I am unsure how to set a parameter there; let's say; grid.addRow(TASK_ID=1), or something like that. How is this possible?
Also, how do you define an array in the model schema?
Json array object within another, for something like this:
{
feature_ID: 1,
TASKS:{
TASK_ID:
TASK_NAME
}
}
grid.one("edit", function (e) {
e.model.set("ID", 20);
});
grid.addRow();
Related
I have a TreeView that displays a list of database records. When a user selects a record, I populate a grid with the related record details. The foreign key is sourceid.
I pass the selected record's id like this:
.Read(read => read.Action("AquisitionNotes_Read", "AquisitionNotes").Data("GetCurrentSourceID"))
The GetCurrentSourceID function is simply:
function GetCurrentSourceID() {
return {sourceid: currentSourceID };
}
That works.
But when I want to add a new record, how do I get the currentSourceID value into the Post? If I try the obvious:
.Create(update => update.Action("AquisitionNotes_Create", AquisitionNotes").Data("GetCurrentSourceID"))
The value from the editor (0 of course) gets precedence and gets passed.
How do I force my actual sourceid to overwrite the editor's value? Or am I solving the problem in the wrong way?
Brad
To pass the default value to the create you should use DataSource
for example
#(Html.Kendo().Grid()
.DataSource(data=>data.Ajax()
.Model(m=>{
m.Field(field=>field.Whatever).DefaultValue(TheValue);
})))
Got it figured out thanks to the lead that #user5135401 gave me.
user5135401's solution works if you want to set a static default value. I do not know of a way to do a dynamic default value form Razor. This is how you do it per this forum post:
Call a JS function from the grid's .Edit event like:
.Events(events => events.Edit("SetDefaultSourceID"))
Then that function returns the value, in my case the foreign key value of the selected TreeView item:
function SetDefaultSourceID(e) {
if (e.model.isNew()) {
//set the required field value
e.model.set("sourceid", currentSourceID);
}
}
I'm writing a generic error handler for all of the Kendo Grids. I need to get that source Grid to prevent its default behavior in saving data. In the handler, you can access the source's DataSouce by args.sender. How can I access the Kendo Grid from that DataSouce?
The only approach I found was this suggestion, searching through all grids, and the handler looks like below, can you suggest anything better and more efficient?
function genericErrorHandler(args) {
if (args.errors) {
$('.k-grid').each(function () {
var grid = $(this).data('kendoGrid');
if (grid.dataSource == args.sender) {
alert('found!');
}
})
}
}
There is no API to get Grid object from data source, but there is many approach beside that.
You can create generic grid's edit event and storing in global scope variable which grid's ID was triggered that event. I prefer to do this rather than compare mutable data source.
var window.currentGrid = "";
function onGenericGridEdit(e) {
window.currentGrid = e.sender;
}
If in some cases you need to make custom edit function, just call your generic edit function in the end of the code.
function onCustomGridEdit(e) {
// call generic function to store
onGenericGridEdit(e);
}
I am using x-editable for in-line editing inside my web app. I would like to pass additional parameters to server, which I would like to read from data- attributes on trigger element. Here is my editable element:
Value
I would like to pass data-param attribute, but I don't know how to access trigger element. I tried via $(this).data('param'), but I get null... My full editable code:
$.fn.editable.defaults.mode = 'inline';
$('.editable').editable({
params: { param: $(this).data('param') }
});
Calling $('.editable').data('param') doesn't come into account since I have many .editable elements present.
Thanks
I figured it out. I'm answering in case somebody needs to know:
$('.editable').editable({
params: function(params) {
// add additional params from data-attributes of trigger element
params.param1 = $(this).editable().data('param');
params.param2 = $(this).editable().data('nextparam');
return params;
}
)
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
I want to take advantage of the sortableRows property of the jqGrid. How do I detect when a row has been moved. I have studied the documentation and looked for examples but haven't found much. I do believe it is something like
jQuery("#grid").sortableRows({connectWith:'#gird',
ondrop: function(){ alert("row moved") }});
but that does not work. I can move the rows, but don't seemed to have trapped the event. Is there something wrong with my syntax or my approach in general.
Basically, I need to know that the rows have been rearranged so I can be sure they get saved with their new order.
Thanks
jqGrid uses the ui-sortable plugin to sort rows: http://jqueryui.com/demos/sortable/.
In
jQuery("#grid").sortableRows( options )
"options" is the passed to the sortable plugin.
options = { update : function(e,ui){} }
is what you want.
Attach the sortstop event handler to your grid:
jQuery("#grid").bind('sortstop', function(event, ui) { alert("row moved") });
I did a quick test and that worked for me.
jQuery('#'+grid_id).jqGrid('sortableRows', {
update: function (event, ui) {
var newOrder = $('#'+grid_id).jqGrid("getDataIDs");
//do whatever you want with new roworder
//please keep in mind this will give only page visible rows
}
});