I've implemented the following within my keno grid:
jsfiddle.net/JBeQn/
What I would like to achieve is this; When the user drags a row, any rows beneath it will change style as the dragged row passes over it.
Does anyone have an example of how this can be achieved?
Thanks,
I hope I'm understanding you right but would this be of help to you?
http://demos.kendoui.com/web/grid/foreignkeycolumn.html
http://demos.kendoui.com/web/grid/column-reordering.html
reorderable: true,
resizable: true,
groupable: true,
Related
I am using kendo ui grid and tree in a cshtml page and want to drag and drop multiple rows from the grid to the tree. I am able to drag and drop a single row from the grid to the tree, but for multiple items, same approach does not work.
Here are my code segments:
$("#grid").kendoGrid({
selectable: "row",
sortable: true,
pageable: true,
columns: .......
$("#treeview").kendoTreeView({
dragAndDrop: true
});
And my kendoDraggable and kendoDropTarget events:
$("#grid").kendoDraggable({
filter: "tr",
hint: function () {
var g = $("#grid").data("kendoGrid")
return g.select().clone()
}
});
$("#treeview").kendoDropTarget({
drop: droptargetOnDrop
});
The above code segment works for dragging a single row from grid to the tree.
But if I change the grid definition for multiple row selection, the kendoDropTarget drop event no longer get triggered.
$("#grid").kendoGrid({
selectable: "multiple",
sortable: true,
pageable: true,
columns: .......
Please let me know if I am doing anything wrong and any possible solution to this.
Multiple selection on the grid does not play nicely with drag and drop due to the fact that selectable events and drag events both fire with selectable events taking precedence.
To work around this, you can cancel the selectable event when dragging.
To do this, change your kendoDraggable config to include the following in your dragstart function:
dragstart: function (e) {
$('#grid').data("kendoGrid").selectable.userEvents.cancel();
}
I have a grid. The first column is a checkbox for each row. The second column has two buttons for each row: edit and delete. Clicking on the edit button invokes inline editing. I simply want to disable inline editing for the all rows in the grid. I want to show a form when the edit button is clicked.
I am unable to find a decent answer to this question. I did find a few related posts at SO but they seem unclear to me.
Thanks and regards.
This is what I did, pretty ugly, but it works. My gut feel is that there must be better
solution.
$(grid_selector).jqGrid({
....
onSelectRow: function(id){
jQuery(grid_selector).restoreRow(id);
$('#jSaveButton_' + id).hide();
$('#jCancelButton_' + id).hide();
$('#jEditButton_' + id).show();
$('#jDeleteButton_' + id).show();
},
....
});
Hope this helps someone. Still wait for better solution. But there is a problem with it, the edit button does not invoke a form anymore, which I will try to find a solution.
Try using some thing like this , here is an sample when you initialize your grid
{
name: 'Question', index: 'Question', width: 80, align: 'top', editable: true,
editoptions: {
dataInit: function (el) {
$(el).attr('readonly', true);
}
}
},
i want to save the width of coumns of jqgrid, when user re-size the column the width should be saved, so next time when user open the page the width should be the same user did. is it possible?
js code
{ name: 'FirstName', index: 'FirstName', width:100, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
i have tried shrinkToFit:false, autowidth:false
any idea, any suggestion will be appreciated...i will mark it as answer if it works for me
thank. if you need any extra information about the code i am here to explain..just comment ;)
jqGrid don't provide any API to change the column width after the grid been created, but I created the plugin which do this. You can download jQuery.jqGrid.setColWidth.js from here, included it after jqGrid JavaScript files and then you can just use new setColWidth method in the form
$("#grid").jqGrid("setColWidth", colNameIrIndex, newWidth);
The method setColWidth will adjust the total grid width after changing the width of the column. If you don't need it you ca add false as an additional last parameter of setColWidth:
$("#grid").jqGrid("setColWidth", colNameIrIndex, newWidth, false);
Additional details about the method you will find in the answer and in this one.
Probably you can write your code so that the width of columns will be set before the grid will be created. In the case you will don't nee the method setColWidth. For example you can try the demo from the answer (see the previous answer too). If you changes the width of some column and then reload the full page you will see that the grid will be created using the widths of column which the used made at the last time. Is it not close to your requirements?
I have been stuck on this problem for past 2 days. Did lot of googling but was not able to find the exact answer.
Following is the JQGrid definition
$("#tblresults").jqGrid({
datastr: data,
datatype: 'jsonstring',
height: 230,
colNames: colNames,
colModel: colModel,
rowNum: -1,
viewrecords: true,
loadComplete: function() {
ChangeSize('#tblresults', 70);
}
});
And this is the filter definition
$("#tblresults").filterToolbar({ searchOnEnter: true, stringResult: true, defaultSearch: "cn", groupOp: "AND" });
I get the data from a simple getJSON call. But when I try to use the filter nothing works.
I debugged a the code and found out that jqgrid internally calls the reloadgrid, which makes the data to disappear.
Can anyone tell me how can we do filtering in jqgrid completely on client.
I am using v3.8 and I learnt that jqgrid v3.7 had this client side filtering logic in place.
Thanks in Advance
Do you have the data First of all you should not use -1 as the value of rowNum. Instead of that use any reliable value like rowNum:1000. More better would be to use local data paging. In the case you should just set for example rowNum:10, rowList:[5,10,20,100].
If you get the input parameters colNames, colModel and data parameters of jqGrid from the server per ajax call you should additionally consider to use data parameter instead of datastr. In the case the datatype should be changed from 'jsonstring' to 'local'.
Some other common parameters like gridview:true and height:'100%' can be also usefull for you. The first one (gridview:true) just improve the performance without any disadvantages and the second (height:'100%') will follow to choosing of the optimal grid height without the vertical scroll bar. It can be good combined with the local data paging (parameters like rowNum:10, rowList:[5,10,20,100]).
add these parameters and your toolbar search should work. i have faced similar problem too when started with jqgrid.
search:true,
loadonce:true,
I've got an interesting issue with creating a subgrid in the excellent jqGrid plugin. The main grid is working fine itself. However, when I add the parameters to create the subgrid, I get the new first column but do not get the plus sign. When I inspect the demo using Firebug I see that an href and several classes are added to the first column. I do not see those classes in the first column of my grid. Here's the code:
$("#quotelist").jqGrid({
datatype:'xml',
url:'getQuotes',
mtype: 'GET',
postData:{"a":$("#AccountNumber").val(),
"op":"y",
"cl":"n",
"cd":"All",
"eq":"All",
"sess":$("#SessionID").val(),
"d":new Date().getTime()
},
colNames:['Origin Zip', 'Destination Zip', 'Equipment', 'Commodity'],
colModel:[
{name:'ozip', index:'ozip', title:false, width:140},
{name:'dzip', index:'dzip', title:false, width:40},
{name:'equipment', index:'equipment', title:false, width:40},
{name:'commodity', index:'commodity', title:false, width:40}
],
loadError:function(xhr, st, err) {
alert('loaderror on quote request grid - ' + st)
},
pager:'#pager',
height: 550,
width: 425,
rowNum: -1,
hidegrid: false,
gridview: true,
gridstate:'hidden',
viewrecords: true,
altRows: true,
sortname: 'ozip',
sortorder: 'asc',
caption: 'Carriers',
subGrid:true,
subGridUrl:"getQuoteResponse&a="+$("#AccountNumber").val() +
"&sess=" + $("#SessionID").val(),
subGridModel: [
{name:['Carrier Name','Status'], width:[200,100]}
]
});
Other information:
I included the 'pager' to make sure the icons appear on the pager - they do. I've tried this on jqGrid versions 3.8.2 and 3.6.5 with the same result. jQuery version is 1.4.2, jquery UI version 1.8.2.
I think that the plus isn't appearing because I'm not getting the new classes in the first column when the grid loads, but I have no idea why not. It's weird that the first column appears when subGrid is set to true but then the plus sign isn't loaded.
Any idea? Many thanks for any suggestions!
edit: nevermind! I was editing this post to fix some formatting and found the problem. Too many parameters about hidegrid, gridview, etc. Those were left over from my initial experimentation with jqGrid.
The main problem is that gridview:true can not be used in your case. In the description of the gridview option in the documentation you will find
If set to true we can not use
treeGrid, subGrid, or afterInsertRow
event.
I gone through the same problem when I was working with jQuery Grid. In my case plus icon is not appearing but when I clicked on first column cell my subgrid appear. After searching for hour I finally got solution. In ui.jqgrid.css file include this code.
.ui-icon-plus {
height: 10px;
width: 10px;
background-image: url('../../Images/plus.gif');
}
.ui-icon-minus {
height: 10px;
width: 10px;
background-image: url('../../Images/minus.gif');
}
Image path will be your Image path. I am not giving height and width of image that's why I am not able to see in UI. Hope this help.