// insert item
$("#grid").jsGrid("insertItem", { Name: "John", Age: 25, Country: 2 }).done(function() { console.log("insertion completed"); });
I did the same as specified above. but row is inserting at the bottom not at the top. Row should be inserted at the top when I write the above snippet of code for inserting json data... Please help me out.
Please go through documentation before asking question.
In your grid config add the below.
insertRowLocation: "top"
Taken from [https://github.com/tabalinas/jsgrid/issues/796][1]
Related
I'm trying to get the row data from a table which is connected to a dataset. So as per the this article, since, I need the whole data of the selected row, I'm using OnCurrentIndexChange event handler to get the selected row's data from the dataset. But for some strange reason, the first row item will always be triggered on the load of the table/page.
Basically, the first row data will be selected on the load of the page/table. Is this a bug or am I doing something wrong?
Any help will be greatly appreciated.
Thanks,
Jilu
Though I couldn't get to work with OnCurrentIndexChange handler. But I found a work around by which I could fix this bug/issue for my application.
Solution:
Instead of using OnCurrentIndexChange handler of the dataset, I used OnSelectRow event handler to get the row index of the table and used that index to get the whole row data from the dataset. More on this get method, you can find here.
Below is the code for your reference:
export function tblCustomerList_rowSelect(event) {
$w("#dsCustomer").getItems(event.rowIndex, 1)
.then(result => {
let selectedRow = result.items[0];
console.log(selectedRow);
if (selectedRow !== null) {
let returnObj = {
"name": selectedRow.name,
"id": selectedRow._id
}
wixWindow.lightbox.close(returnObj);
}
})
}
Hope this will be helpful for people who are stuck with such kind of issue in wix.
Thanks,
Jilu
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.
THE PROBLEM:
Can I save a new jqGrid Row successfully added with 'addRowData' on jqGrid client side to the server side collection with one line 'saveRow' method call?
This is sort of a different version of a similar thread:
How to perform action in jqGrid after adding new row
Although In my case it seems little different:
EXISTING:
I have a grid that talks to .ashx handler for insert update delete and reading.
(this works fine with inline editing etc.)
NEW FUNCTIONALITY:
I have just added Paste Button that pastes an array of text and converts it to rows:
long story short in the end two following lines of code finally add my split Data, row by row to my jqGrid:
var gridRow = { Id: rowId, Surname: rowSurname, DateOfBirth: rowDateOfBirth, Salary: rowSalary, Postcode: rowPostcode };
jQuery("#list").addRowData(rowId, gridRow); //(**)
(as you see I KNOW my rowId, which I calculate searching through the existing data)
THE CATCH:
Above code adds new row on UI only and I wanted it to get it added to Server collection as well.
FAULTY:
After the line (**) I wanted to add it to server collection - simply using brand new call with saveRow passing URL. YET NOTHING HAPPENS
This is one variation of what I have already tried:
$("#list").jqGrid('saveRow', rowId, { //same rowId value used in 'addRowData' method above
succesfunc: function (response) {
return true;
},
url: "jqHandler.ashx",
mtype: "POST",
extraparam: gridRow // gridRow used in 'addRowData' method above
});
BOTTOM LINE:
Can I save a new jqGrid Row successfully added with 'addRowData' on jqGrid client side to the server side collection with one line 'saveRow' method call?
I would really appreciate some guidance.
Best Regards,
Chris
Sorted it out, may help someone, as it's simplistic:
All you need is to "Edit the row" so we just needed to add a Edit function call in the most simplistic way.
So the whole thing looks like this:
var gridRow = { Id: rowId, Surname: rowSurname, DateOfBirth: rowDateOfBirth, Salary: rowSalary, Postcode: rowPostcode };
jQuery("#list").addRowData(rowId, gridRow);
jQuery("#list").addRowData(rowId, gridRow);
jQuery("#list").jqGrid('editRow', rowId, { keys: true });
$("#list").jqGrid('saveRow', rowId, { //same rowId value used in 'addRowData' method above
succesfunc: function (response) {
return true;
},
url: "jqHandler.ashx",
mtype: "POST",
extraparam: gridRow // gridRow used in 'addRowData' method above
});
You may adjust so it uses same way of calling jQuery or jqGrid API. but it works...
Cheers
I'm using inline editing in my grid , I have some cases which i want to change the value of a cell inside a column. I'm changing it with setCell ,and it works good. my problem is that after the change the cell losts it's edit mode while all other cells of the row are in edit mode. I want to keep the cell in edit mode after i changed it.
for now what i did is saved the row and then selected it again and made in in edit mode - but i don't think it is a good solution - Is there a way to keep in edit mode while changin it?
Thank's In Advance.
If you need to implement the behavior of dependency cells which are all in the editing mode you have to modify the cell contain manually with respect of jQuery.html function for example. If the name of the column which you want to modify has the name "description", and you use 'blur' event on another "code" column then you can do about the following
editoptions: {
dataEvents: [
{
type: 'blur',
fn: function(e) {
var newCodeValue = $(e.target).val();
// get the information from any source about the
// description of based on the new code value
// and construct full new HTML contain of the "description"
// cell. It should include "<input>", "<select>" or
// some another input elements. Let us you save the result
// in the variable descriptionEditHtml then you can use
// populate descriptionEditHtml in the "description" edit cell
if ($(e.target).is('.FormElement')) {
// form editing
var form = $(e.target).closest('form.FormGrid');
$("#description.FormElement",form[0]).html(descriptionEditHtml);
} else {
// inline editing
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("#"+rowId+"_description",row[0]).html(descriptionEditHtml);
}
}
}
]
}
The code will work for both inline and form editing.
The working example of dependent <select> elements you can find here.
blur does not fire if value is changed and enter is pressed immediately without moving to other cell. So better is to use
editrules = new
{
custom = true,
custom_func = function( val, col ) { ... }
},
and move this code from blur to custom_func as described in
jqgrid: how send and receive row data keeping edit mode
I have a JQGrid with loadonce:true(so it's all client side) and paging enabled(with, say 20 pages).
I would like to specify a row(programmatically, without user input) and have my grid navigate to the corresponding page to select the specified row.
Is this possible with the current JQGrid?
I've looked into search and filter, but that just reloads the grid with new rows - I need my grid to navigate to the correct page - Keeping its data and structure.
I'm in the process of optimizing my grid structure, so any changes needed(say client side to server side) would be possible.
Because you use loadonce:true, then you prepare the data on the server. On the server side you can decide which row must be selected. On the server side you can also easy calculate on which page will be the selected row. The id of selected row and the selected page you can for example include as a part of the userdata. So the data sent from the server could looks like following:
{
"total": 5,
"page": 1,
"records": 107,
"rows": [
...
],
"userdata": {
"page": 3,
"selId": 24
}
}
Inside of loadComplete you can do about following
loadComplete: function(data) {
if (jQuery("#list").getGridParam('datatype') === "json") {
// data.userdata is the same as jQuery("#list").getGridParam('userData');
var userdata = jQuery("#list").getGridParam('userData');
var curPage = jQuery("#list").getGridParam('page'); // is always 1
if (curPage !== userdata.page) {
setTimeout(function(){
jQuery("#list").setGridParam(
{ page: userdata.page }).trigger("reloadGrid");
jQuery("#list").setSelection (userdata.selId, true);
},100);
}
else {
jQuery("#list").setSelection (userdata.selId, true);
}
}
}
A working examples you can see on http://www.ok-soft-gmbh.com/jqGrid/DataToSelect.htm and http://www.ok-soft-gmbh.com/jqGrid/DataToMultiSelect.htm.
UPDATE: Free jqGrid supports multiPageSelection:true option strarting with the version 4.10.0. The option allows to set selection of multiple rows in the grid very easy (and it works very quickly, because it set selection state directly during creating the body of the grid). See the answer and the demo and the readme to 4.10.0.