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..
Related
I use a small grid in a grid to store a relation table.
Example:grid in grid example
This works fine so far.
If I now click on the second column in the inner grid table, the whole field with the integrated grid goes out of edit mode. The first field in the inner grid can be edited without problems.
I have tried different types of preventDefault(). But unfortunately no workaround.
What do I have to do so that I can edit the two columns in the inner grid?
Just changein your editable function
editable: true
To
editable: {
mode: "inline"
},
here is the documentation
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.mode
note that you have editable:true twice at your editor: function
runs also with:
editable: {
mode: "popup"
},
Similar to the inline mode, edit can be controlled via button.
have fun...
There is a textbox control in one column in my jqgrid. When value is entered in this textbox in a row , it should compare that value from another column (which is non editable) and show error when the values are not equal.
From the wiki in Here
You can see the solution I created in JsFiddle
To see it working try to edit lastname cell and it will throw an error if it does not match firstname in the row (unrealistic but just for illustration purposes)
Use beforeSaveCell
afterSaveCell: function(rowid,name,val,iRow,iCol) {
alert("alert1!");
},
beforeSaveCell: function(rowid,name,val,iRow,iCol) {
// Just to get the current row b/se it is not available in custom_func
currentRow= rowid;
},
AND add editrules to your cell to be edited and validated
{name:'lastname', index:'lastname', width:90, editable: true , "editrules":{"custom":true,"custom_func":validateText}},
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?
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
I am using jqGrid v 4.0 in my application to display tabuler data with Inline edit feature. One of the column in the Grid is a type of "Select". I have populated this select with following server side code:
//get all Departments
HRDept = $.ajax({
url: '../../PerformanceReview/GetHRDepartments/',
async: false,
success: function(data, result) {
if (!result)
alert('Failure to retrieve the HR Departments.');
}
}).responseText;
I have populated the Grid column with following sysntax:
name: 'HRDepartment', index: 'Department', align: 'left', editable: true, edittype: 'select', editoptions: {value: HRDept}
But on click of edit button (inline), it shows dropdown on on top of cell but the value is not equal to current cell value. it is always first value of drop down. I had compared the text which i am populating while loading Grid with the text of Dropdown and they are matching.
Could some one help me to set dropdown value similar as cell value.
Your edit options look wrong, it should be "value:text;" and the value should match your data results.
{ ... editoptions: {value: "HRDept:HR Department;" }}
You can checkout the demo of Row Edition -> Input Types at the jqGrid Demo site., which includes a dropdown list edit cell.
If you get the select values from the server you should use dataUrl option of the editoptions instead of value. Then the jqGrid will make the Ajax request at the beginning of the editing and fill the select element with the server response. It is important to understand that the server response should be in another form:
<select>
<option value='101 - Equity Partners'>101 - Equity Partners</option>
…
</select>
If you have already the code on the server which provide the information in another format and you can't change the server code you can define additional buildSelect function which get as the parameter the server response and should return the data in the above format ('...'). See UPDATED part of the answer for the code example.