I had this kendo grid demo, and on outletID column, i want to use kendoTreeView with checkbox, so multiple selected outletID possible. But when edit it display undefined result, and the template that display outletName also not working. Appreciate your help
DEMO IN DOJO
Your tree needs dataTextField and dataValueField set.
Your column template doesn't know where to look for the outletName. Kendo supports 1-N relationships, but I'm not aware of N-N.
The data in your template is the current row of the grid. For the first row, that would be {"id":"1","outletID":"LA2,LA3","accountName":"Data1"}. You need to process that data yourself. For instance:
template: "#= (data.outletID) ? data.outletID.split(',')
.map(x => TreeData.find(y => y.outletID == x)['outletName']) : '' #"
For the editor, the value of a dropDownTree is an array. Your row has a string. You need to do two things:
1 . Init the editor's value in the function outletTree:
if (options.model) {
ddt.value((options.model[options.field] || '').split(','))
}
2 . When the dropDownTree's value changes, update your grid row:
change: e => {
const value = e.sender.value();
console.log(value)
options.model.set(options.field, value.join(','))
}
Here's an updated dojo: https://dojo.telerik.com/#GaloisGirl/oYEGerAK . The "Update" button doesn't work yet, probably because the dataSource must support edition. Here is how to do it on local data.
Related
Greeting, I would like to ask a question about the bootgrid jquery.
After I tried to understand the documentation of the bootgrid, I know that hiding a column are able to do in the column setting, <th data-visible="false">sampleID<th>, but I want to do this function inside jquery because I have a condition for displaying some column.
For example, I have three columns which is 'A','B','C'. So when the Listing value is 'A', the column B and column C will be set to data-visible = "false":
$('#Listing'.val()) == "a"
{
$('#B').attr("data-visible","false");
$('#C').attr("data-visible", "false");
}
So I have tried the code above but it not work. Please suggest me a solution or method.
Is it possible if I set the data-visible using the jquery?
I have created a jqGrid - Pivot table JSFiddle example: here.
In this It should not print the line if Component Type value is blank, I Used this empty column, to show all periods(months) in the year, which is mandatory.
Need help in removing that blank line. and also is it possible to remove the last sum column 2015 from grid, if so how?
You includes dummy data with ComponentType:"" group which you don't want to display. So the best solution which I see would be to include the data in the input pivot data only, but don't use the dummy data in the grid data. jqPivot uses datatype: "jsonstring" to prevent additional sorting of previously sorted data. The input data will be placed as the value of datastr option. So one can use the following onInitGrid to remove the dummy data before the data will be processed by jqGrid:
onInitGrid: function () {
var p = $(this).jqGrid("getGridParam"),
userdata = p.datastr.userdata;
p.datastr = $.grep(p.datastr, function (item) {
return item.ComponentType !== "";
});
p.datastr.userdata = userdata;
}
see the modified demo http://jsfiddle.net/OlegKi/b47ocLd7/11/.
grid.dataItem(selectedRow)
this is return the selected row which is a kendo.data.ObservableObject.
this object has all the columns for that grid's selected row. Is there a way to iterate thru all the columns and update.
or do i have to do it like this:
dataitem.set("Id", 1);
dataitem.set("name", Eric);
dataitem.set("age", 12);
As far as I understand what you are trying is to copy one JavaScript object into a Grid item, correct?
Let's assume that you have the new value in val:
var val = {
Id : 1,
name: "Eric",
age: 12
};
And you want to copy it in the selected row.
There are several ways of doing it:
What you just did.
Iterate through the different keys of val and copy the value.
Use jQuery extend.
Option 2.
for (var key in val) {
if (val.hasOwnProperty(key)) {
dataitem.set(key, val[key]);
}
}
Option 3.
$.extend(item, val);
item.set("uid", kendo.guid());
The first instruction performs a deep copy of val into item.
The second instruction makes the item dirty by just changing the UID.
NOTE: You don't need to update every single field using set, is enough changing one and all will get updated.
I am new to jqGrid and have created a simple grid with local data with editurl set to clientArray. I am using inline navigation. I can edit a row and when I press the save button, the rows gets update. So far so good.
When I press on add row button, a new empty is row is inserted. When I type in there some data and click on the save button, I get the error message:
Uncaught TypeError: Cannot read property 'extraparam' of undefined jquery.jqGrid.min.js:398
The documentation only tells how the saveRow method should be called. But, apparently the inline navigator is calling it automatically. Which is perfect. But I guess I still need to set some parameters correctly so that it does not throw the error and saves the newly added row.
Hope some jqGrid guru has a good tip. Thanks.
function createTable(data,colNames,colModel,caption ){
...
$(table).jqGrid({ data:data,
datatype: "local",
height: 'auto',
colNames:colNames,
pager:'#'+pagerid,
colModel:colModel,
viewrecords: true,
caption:caption,
editurl:'clientArray',
});
var nav = $(table).jqGrid('navGrid','#'+pagerid,{edit:false,add:false,del:false});
$(table).jqGrid('inlineNav','#'+pagerid);
$(table).jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});
$('#gbox_'+tableid).draggable();
}
You are right, It's a bug in inlineNav method. The lines
if(!o.addParams.addRowParams.extraparam) {
o.addParams.addRowParams.extraparam = {};
}
uses o.addParams.addRowParams.extraparam, but default value of parameter of addParams (see here) defined as addParams : {} and not as addParams : {addRowParams: {}}. So the expression o.addParams.addRowParams is equal undefined and o.addParams.addRowParams.extraparam is the same as undefined.extraparam which produce null reference exception.
I posted the corresponding bug report to trirand and the problem will be fixed in the next version of jqGrid.
As a workaround you can replace the line
$(table).jqGrid('inlineNav','#'+pagerid);
with the line
$(table).jqGrid('inlineNav','#'+pagerid, {addParams: {addRowParams: {}}});
Some common additional remarks to your code:
I strictly recommend that you always use gridview: true option which will improve performance of your code without any disadvantages
I recommend you to use autoencode: true option per default. Per default jqGrid interpret input data of the grid as HTML fragments which must be well formatted. So if you would try to display the data like a < b you can have problems because < is special character in HTML. If you would use autoencode: true option the input data will be interpreted as text instead of HTML fragments.
I recommend you remove index property from your model if you assign always the same value for index and name properties.
I recommend you to provide id property with unique values for every item of the input data. You should understand that jqGrid always assign id attribute for every row of grid. The value must be unique over all HTML elements on the page. If you get the data from the server and the data have native unique id from the database it's recommended to use the value as the value of id property. If you don't specify any id property jqGrid assign values 1, 2, 3, ... as the id values of rows (rowids). If you use more as one jqGrids on the page and don't provide unique id values you will have id duplicates which is HTML error.
I recommend you to use idPrefix option of jqGrid. If you have two grids on the page and you don't fill (and don't need) any id for data items then you have have id duplicates (id="1", id="2" etc in both grids). If you would define idPrefix: "g1_" for one grid and idPrefix: "g2_" option for another grid then the rowids of the first grid will be id="g1_1", id="g1_2" etc in the first grid and id="g2_1", id="g2_2" in the second grid. Even if you fill the id from the server then you provide unique id inside one table, but the ids from two tables of database can have the same id. So the usage of different idPrefix option for every grid will solve the problem of id duplicates in very simple way.
I'm having this same issue but my jqgrid markup is completely different (maybe newer version?)
I can use inline to edit and save a row, but adding a row will not save. I am not sure what the issue is.
<?php
ini_set("display_errors","1");
require_once 'jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqAutocomplete.php";
require_once ABSPATH."php/jqCalendar.php";
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT Serial, Type, Customer, Date, Notes FROM rmas';
$resize = <<<RESIZE
jQuery(window).resize(function(){
gridId = "grid";
gridParentWidth = $('#gbox_' + gridId).parent().width();
$('#' + gridId).jqGrid('setGridWidth',gridParentWidth);
})
RESIZE;
$grid->setJSCode( $resize);
// set the ouput format to json
$grid->dataType = 'json';
$grid->table ="rmas";
$grid->setPrimaryKeyId("Serial");
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('rmaform.php');
$grid->cacheCount = true;
//$grid->toolbarfilter = true;
$grid->setGridOptions(array(
"caption"=>"RMAs",
"rowNum"=>50,
"sortname"=>"Serial",
"hoverrows"=>true,
"rowList"=>array(50,100,200),
"height"=>600,
"autowidth"=>true,
"shrinkToFit"=>false
));
$grid->callGridMethod('#grid', 'bindKeys');
// Change some property of the field(s)
$grid->setColProperty("Serial", array("align"=>"center","width"=>40));
$grid->setColProperty("Type", array("align"=>"center","width"=>40));
$grid->setColProperty("Customer", array("align"=>"center","width"=>65));
$grid->setColProperty("Date", array("align"=>"center","width"=>40));
$grid->setColProperty("Notes", array("align"=>"left","width"=>500));
// navigator first should be enabled
$grid->navigator = true;
$grid->setNavOptions('navigator', array("add"=>false,"edit"=>false,"excel"=>true));
// and just enable the inline
$grid->inlineNav = true;
$buttonoptions = array("#pager", array(
"caption"=>"Enable Cells",
"onClickButton"=>"js:function(){ jQuery('#grid').jqGrid('setGridParam',{cellEdit: true});}", "title"=> "Enable Excel like editing"
)
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
$buttonoptions = array("#pager", array(
"caption"=>"Disable Cells",
"onClickButton"=>"js:function(){ jQuery('#grid').jqGrid('setGridParam',{cellEdit: false});}" , "title"=> "Disable Excel like editing"
)
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>
Given a jqGrid populated with local data and created with the option of idPrefix:"custTable" , all the generated rows get the prefix in the html id i.e. custTableRow_1 custTableRow_2 etc. Does this idPrefix'ed version of the id need to be passed in to the jqGrid methods, if so which ones?
for example to delete a row with deleteRowData does it need the prefixed id? how about setRowData or addRowData? when adding after row x it seems to need the prefixed for the srcrowid parameter. How about multiselect rows?
If I delete a row using the prefixed id of the row it disappears from the display but when I reload the grid the delete item shows up again in the grid, like it wasn't removed. This doesn't happen when idPrefix is not used.
thanks for any help.
The option idPrefix was introduced to hold ids on the HTML page unique even you have on the page the ids like the rowids loaded from the server. Typical example is two grids with the data loaded from the server. Let us you have two tables in the database where you use IDENTITY or AUTOINCREMENT in the definition of the PRIMARY KEY. In the case the primary key will be generated automatically in the table and will be unique inside the table, but there are not unique over the tables. So if you would use the primary keys as ids of the grids and place on one page two grids you can have id duplicates.
To solve the problem you can use idPrefix: "a" as additional option in the first grid and use idPrefix: "b" in the second grid. In the case locally jqGrid will uses everywhere ids with the prefix, but the prefix will be cut if the ids will be sent to the server.
So you will see locally in all callbacks (events) and in all methods (like setRowData, addRowData etc) the ids with the prefix, but on the server side the ids the prefixes will be removed immediately before sending to the server.
I recommend you additionally to read another answer about the restrictions in the ids which I posted today.
UPDATED: I looked through the code which you posed on jsfiddle and found some clear bugs in your code. You current code
1) use wrong algorithm to generate id of the new row. For example the following code
// generic way to create an animal
function newAnimal(collection, defaults) {
var next = collection.length + 1;
var newpet = {
id : next,
name: defaults.name + next,
breed: defaults.breed
};
return newpet;
}
use collection.length + 1 for the new id. It's wrong if you allows to delete the items. By adding of two items, deleting one from there and adding new item one more time follows to id duplicates. Instead of that it's more safe to use some variable which will be only incremented. You can use $.jgrid.randId() for example which code is very simple.
2) you call addRowData with adding a prefix manually (see dogsPrefix+newdog.id below). It's wrong because jqGrid adds the prefix one more time to the rows.
// add dog button actions
$('#dogAddAtEnd').click(function() {
var newdog = newAnimal(dogs, dogDefaults);
dogs.push(newdog);
dogAdded();
dogsTable.jqGrid('addRowData', dogsPrefix+newdog.id, newdog);
});
Probably there are more problems, but at least these problems can explain the problems which you described.
UPDATED 2: I examined new demo which you posted. It has still the lines
grid.jqGrid('addRowData', newanimal.id, newanimal,
"after", prefix+ followingId);
and
dogsTable.jqGrid('addRowData', dogsPrefix+newdog.id, newdog);
which must be fixed to
grid.jqGrid('addRowData', newanimal.id, newanimal,
"after", followingId);
and
dogsTable.jqGrid('addRowData', newdog.id, newdog);
Nevertheless I tested the demo after the changes and found bugs in code of addRowData, delRowData and setRowData. The problem are in the line of the delRowData and the same line of setRowData
var pos = $t.p._index[rowid];
can be fixed to the following
var id = $.jgrid.stripPref($t.p.idPrefix, rowid), pos = $t.p._index[id];
Inside of addRowData I suggest to include the line
var id = rowid; // pure id without prefix
before the line
rowid = t.p.idPrefix + rowid;
of addRowData. Another tow lines of addRowData
lcdata[t.p.localReader.id] = rowid;
t.p._index[rowid] = t.p.data.length;
should be changed to
lcdata[t.p.localReader.id] = id;
t.p._index[id] = t.p.data.length;
where unprefixed id will be used.
The modified code of you demo which uses the fixed version of jquery.jqGrid.src.js you can test here.
I will post my bug report to trirand later to inform the developer of the jqGrid. I hope that soon the bug fix will be included in the main code of jqGrid.
Additionally I recommend you to use $.jgrid.stripPref method to strip prefixes from the rowids. For example the function
//general delete selected
function deleteSelectedAnimal(list, grid, prefix)
{
var sel = grid.jqGrid('getGridParam', 'selrow');
if (sel.length)
{
var gridrow = sel;
//get the unprefixed model id
var modelid = gridrow;
if (prefix.length !== 0)
{
modelid = modelid.split(prefix)[1];
}
// make it a numeric
modelid = Number(modelid);
//delete the row in the collection
list = RemoveAnimal(list, modelid);
//delete the row in the grid
grid.jqGrid('delRowData', gridrow);
}
}
from your demo can be rewritten to the following
//general delete selected
function deleteSelectedAnimal(list, grid)
{
var sel = grid.jqGrid('getGridParam', 'selrow'),
gridPrefix = grid.jqGrid('getGridParam', 'idPrefix');
if (sel !== null)
{
//delete the row in the collection
// ??? the gogs list will be not modified in the way !!!
list = RemoveAnimal(list, $.jgrid.stripPref(gridPrefix, sel));
//delete the row in the grid
grid.jqGrid('delRowData', sel);
}
}
I am not sure that the line list = RemoveAnimal(list, $.jgrid.stripPref(gridPrefix, sel)); or the function RemoveAnimal do what you want, but it's not a problem which connected with jqGrid.
One more small remark about your code. You use already in the objects which you add to the grid the id property. It's the same name as defined in the localReader.id. In the case the data from the id property will be used as id attribute of the grid rows (<tr>). The local data parameter will save the id additionally to other properties which are build from the name property of the items of colModel. So I see no sense to define hidden column
{ key: true, name: 'id', align: 'left', hidden: true }
How you can see on the demo all stay works exactly as before if you remove id column from the grids which you use.
UPDATED 3: As promised before I posted the corresponding bug report here.