OK, I am having an issue with the filter toolbar retaining the filter values after clicking on the Refresh button at the bottom of the grid.
I have looked at numerous examples that do exactly that, clear the top filter toolbar fields to the default state (in the case of select list, to the first item in the list "Select..."), but I do not see any obvious difference between that code and mine
Values are being loaded into the filter toolbar drop down boxes via JSON request, and on selecting an item in the list the grid filters to the appropriate data.
The only thing that is not working is that the filter drop-down(s) do not clear the selected item upon clicking refresh grid.
Any ideas?
Not sure what code would help to post at this point, so I will post upon request
Justin
Well, I have answered my own question :)
The issue turned out to be related to naming convention for column names and indexes.
Example:
Before fix:
{ name: ClientId', index: 'ClientOrganization.Client.ClientId', width: '125', stype: 'select', searchoptions: { sopt: ['eq'], dataUrl: '#Url.Action("GetClientListForFilter")'} },
After fix:
{ name: 'ClientOrganization.Client.ClientId', index: 'ClientOrganization.Client.ClientId', width: '125', stype: 'select', searchoptions: { sopt: ['eq'], dataUrl: '#Url.Action("GetClientListForFilter")'} },
Basically the name needed to be the same as the index to properly refresh. Not sure if this is expected behavior or not, but the fix works. ;)
Justin
Related
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 can't find a way to set search options for a column? It seem they are set by default and there's no way I can change it.
We have this option in Jqgrid:
{ name: "outputid", index: "outputid", width: 30, searchoptions: { sopt: ['eq']} }
When doing this in MvcJqGrid:
.AddColumn(new Column("promoDate").SetAlign(MvcJqGrid.Enums.Align.Center).SetLabel("Fecha Ingreso").SetSearchType(Searchtype.Datepicker).SetSearchDateFormat("yy-mm-dd"))
I receive a 'bw' as rule op, not 'eq' as I would like to set.
Thanks!
I've updated MvcJqGrid (nuget package is also updated). As of now you can set a searchoption per column with 'SetSearchOption'. Your example would look something like this:
.AddColumn(new Column("promoDate")
.SetAlign(MvcJqGrid.Enums.Align.Center)
.SetLabel("Fecha Ingreso")
.SetSearchType(Searchtype.Datepicker)
.SetSearchDateFormat("yy-mm-dd")
.SetSearchOption(SearchOptions.Equal))
Let me know if this works for you.
First of all I should mention that I don't use MvcJqGrid myself. It's really important to set different sopt option for different columns especially if one uses toolbar searching. It seems that MvcJqGrid don't provide you enough possibilities to do this. Nevertheless it looks so that MvcJqGrid generate some JavaScript code for you. So if you can't generate exactly the code which you need then you can still change some properties of grid later. For example
$("#grid").jqGrid("setColProp", "outputid", { searchoptions: { sopt: ['eq']} });
change the properties of "outputid" column. It is important to make the changes before searching toolbar are created (before method filterToolbar) will be called. If you can't inject your JavaScript code before creating searching toolbar you can recreate it later with modified properties using destroyFilterToolbar method (see the answer and the pull request):
$("#grid").jqGrid("destroyFilterToolbar");
$("#grid").jqGrid("filterToolbar", { stringResult: true, defaultSearch: "cn" });
I have a Jqgrid, and I am trying to show some fields on the grid, but when I Form Editing it, and show all Fields, which is having more columns than showing on the Grid.
For Example: I have a Document table, which have ID, Name,Size, Description, Date
on the Grid I only show ID, Name, and Size
when user click on the Edit, which is Form Editing, then let the users Edit all the Columns.
How can I do it?
well first you gotta put some code here, from what i can understand here, you have a grid with lets say 5 columns and when you want to go with form editing then you want to edit and show only 3 columns, right? so what you need to do, put editable:false with your colModal
for example
{ name: 'Id', index: 'Id', align: 'right', editable: false, hidden: true}
this will hide the Id column in grid and if you try to go for form editing Id will not be editable and it will not be there in edit form dialogue..
I.e. I want the field name "Firstname" to have an asterisk in it to denote a compulsory e.g. "*Firstname", but I don't want the main grid column name to have asterisk in it too.
Clicking the Edit button pops up a form with the asterisk it in, but this also appears on the Grid when viewing the resultset.
Can someone advise on a way around this?
Thanks.
This is what I've currently got that doesn't solve my problem.
colNames: ['*Firstname']
colModel:[{ name: 'Firstname', index: 'Firstname', label: 'Firstname', width: 150, editable: true, editrules: { required: true} }]
If you set some prefix or suffix for the column name in the Edit form you should use corresponding formoptions instead of the colNames or label property in the colModel.