I have a jqgrid with generated columns like this (in a ASP.NET MVC 3 project). They use inline editing :
#foreach (var template in Model.TemplateList.Where(m => m.Type == 2))
{
<text>
{ name: 'A'+'#template.ID', index: 'A'+'#template.ID', width: 40, align: 'left',
editable: true,
editoptions: { dataEvents: [{ type: 'keyup', fn: function (e) {
var $tr = $(e.target).closest("tr.jqgrow"), rowId = $tr.attr("id");
var nextRow = parseInt(rowId, 10) + 1;
var total = parseInt(e.target.value, 10);
if (isNaN(total)) {
total = 0;
}
ChangeValue('A'+'#template.ID', total, $tr);
}}]}},
</text>
}
The columns are generated and work well, until I try to save them. I'm trying to give the value to the controller, but it doesn't seem to work. I already tried to give the same name to all column to get them in an array :
... name: 'templateColumns', index: 'A'+'#template.ID', width: 40, align: 'left', ...
and in the controller :
public ActionResult SaveRow(string[] templateColumns)
but it didn't work (I only got the value of the last column)
I think you can not have same names for all the columns, check the link i gave u in comments. Now if you give one column name as ''A'+'#template.ID'' and lets suppose it is getting rendered like A1, A2 then in your controller you should accept something like this only.
public ActionResult SaveRow(string A1, string A2)
Your column name and parameters in controller should be same.
Related
Question background:
I'm using noUiSlider to allow users to select prices between a maximum and minimum value (0 - 5000). The selected Maximum and Minimum values then need to be bound to a my views maximum and minimum properties and posted to a relevant controller method.
The Issue:
I'm not sure how I should go about binding this control. I have a form group that used HTML Helpers such as TextBoxFor which allow me to easily bind an input to a property but this is different as there is no user input instead the values are set through the nouislider javascript.
I have two labels - as shown - that display the selected values from the controller.
Note: As I need to post the values to the controller I have included the Html.HiddenFor helpers to bind the models but these are always null.
How can I bind the values within the labels to a model in my view?
The following code will show the situation.
The Code:
nouislider setup:
var snapSlider = document.getElementById('slider-snap');
var snapValues = [
document.getElementById('slider-snap-value-lower'),
document.getElementById('slider-snap-value-upper')
];
var range = {
'min': 0,
'10%': 100,
'20%': 200,
'30%': 400,
'40%': 600,
'50%': 800,
'60%': 1000,
'70%': 2000,
'80%': 3000,
'90%': 4000,
'max': 5000
};
noUiSlider.create(snapSlider, {
start: [ 0, 5000 ],
snap: true,
connect: true,
tooltips: true,
range: range,
format: wNumb({
decimals: 0,
prefix: '$',
})
});
snapSlider.noUiSlider.on('update', function( values, handle ) {
snapValues[handle].innerHTML = values[handle];
});
Form:
<div class="form-group">
<div class="maxPricePad height dropWidth">
<div class="pricePad">
<label for="formGroupExampleInput">Min. Price:</label>
<span id="slider-snap-value-lower"></span>
</div>
<div>
<label for="formGroupExampleInput">Max. Price:</label>
<span id="slider-snap-value-upper"></span>
</div>
#Html.HiddenFor(m => m.maxPrice)
#Html.HiddenFor(m => m.minPrice)
</div>
</div>
Controller:
[HttpGet]
public JsonResult UpdateResults(HomePageVM homePageSearch)
{
//Data logic
//return JsonResult(data);
}
HomePageVM Model:
public class HomePageVM
{
public string maxPrice { set; get; }
public string minPrice { set; get; }
}
As per their documentation, values (the first param on the callback on the update event) will be an array with the range values. Read the first and second values from this array and use that to set the input field values.
snapSlider.noUiSlider.on('update', function( values, handle ) {
var min=values[0];
var max=values[1];
$("#maxPrice").val(max);
$("#minPrice").val(min);
});
Also you need to make sure that your input fields(the #Html.HiddenFor calls) are inside a form tag so that when you submit the form the values will be also submitted and can be available in your action method.
Here is a working js bin sample.
I have a enhanced grid, i want to edit the grid contents and once clicked on Update link, i have to pass newly typed values to the java spring controller where i have logic to save updated values in database. But issue is after i type the value in enhanced grid i need to click somewhere in the grid or make focus on other field so that newly typed value is passed to the spring controller. If i type the new value and the cell is in edit mode and directly click on UPDATE link present in column4 of grid, the old value is passed to the spring controller. Please suggest what changes to be made so that once the mouse is out of the focus of the cell, the newly typed value should save in store and that value should be sent to spring controller when UPDATE link is clicked on column4 of grid.
Please find the fiddle : http://jsfiddle.net/740L0y43/7/
enhanced grid code:
require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/aspect', 'dojo/domReady!'],
function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom, aspect) {
/*set up data store*/
var data = {
identifier: "id",
items: [{
id : 1,
col2 : "aa",
col3 : "bb",
col4 : "cC"
}]
};
var store = new ItemFileWriteStore({
data: data
});
/*set up layout*/
var layout = [
[{
'name': 'Column 1',singleClickEdit:'true', editable:'true',
'field': 'id',
'width': '100px'
}, {
'name': 'Column 2',singleClickEdit:'true', editable:'true',
'field': 'col2',
'width': '100px'
}, {
'name': 'Column 3',singleClickEdit:'true', editable:'true',
'field': 'col3',
'width': '200px'
}, {
'name': 'Column 4',formatter: updateDetails,
'field': 'col4',
'width': '150px'
}]
];
/*create a new grid*/
var grid = new EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
sortInfo: -1,
});
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
aspect.after(grid, 'renderRow', grid.sort);
var id = 2;
var button = new Button({
onClick: function () {
console.log(arguments);
store.newItem({
id: id,
col2: "col2-" + id,
col3: "col3-" + id,
col4: "col4-" + id
});
id++;
}
}, "addRow");
});
var updateDetails = function(value, rowIndex) {
var col2 = this.grid.getItem(rowIndex).col2;
alert("col2 updated value : " + col2);
return "<a href=\"<%=request.getContextPath()%>/updateInfo.htm?col2="+col2 +"\">" + "UPDATE";
};
spring controller code:
#RequestMapping(value = "/updateInfo", method = RequestMethod.GET)
public ModelAndView updateInfo(HttpServletRequest request,
HttpServletResponse response, #ModelAttribute MyDTO myDto,
#RequestParam("col2") String col2, #RequestParam("col2") String col2){
System.out.println("col2 value: " + col2);
System.out.println("col3 value: " + col3);
//when i type some value in COlumn2/Column3 of enhanced grid and column is still in edit mode then on click of UPDATE , new value is not passed to spring controller, its passing the old value.
...
...
//logic to save in DB
}
This line:
return "<a href=\"<%=request.getContextPath()%>/updateInfo.htm?col2="+col2 +"\">" + "UPDATE";
is returning an anchor with the href as "/contextPath/updateInfo.html?col2=aa". That renders it and that's it; that URL is never changing. Then, when you click on UPDATE, it sends what was in there when the page was rendered, not what the current value in your table is.
If you want to have the current value be sent, you should have your href be "#" and have an onclick="updateValue(1)" like this:
UPDATE
where 1 is the row number.
Then, in your update value function, you'd send an ajax request to update the value. Since you're using dojo, check this out: http://dojotoolkit.org/documentation/tutorials/1.8/ajax/
Here's what your function might look like (some pseudo code, some comments to describe behavior):
function updateValue(rowNum){
//var row = data.items.getRow(rowNum); or something like this
//Call ajax here and send the new row values
}
After messing with dojo for about an hour, and struggling with dojo's scoping and how to call a function that has access to the data grid and/or it's data store (sorry..I had 0 experience with dojo before this question)...here's your easy way out, OP:
http://jsfiddle.net/hm8gpz6o/
The important parts:
EnhancedGrid was NOT re-rendering the formatter generated cell when your data store was updated. This seems like a problem with dojo's EnhancedGrid.
I added the following (onApplyCellEdit will fire when a cell is updated):
/*create a new grid*/
var grid = new EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
sortInfo: -1,
onApplyCellEdit: function(inValue, inRowIndex, inFieldIndex){
refreshGrid();
}
});
And finally, refreshGrid() will force a re-render of the whole grid. I hate that I have to do this:
function refreshGrid(){
grid.startup();
}
Please see the fiddle for the full working example.
I want to show serial number as first column in jqgrid.since, database records doesn't has contigous 'ids', I can't use it.
Is there any simple way to accomplish this?
Update:
sample code:
$(document).ready(function()
{
$("#list").jqGrid(
{
url:'<%=Url.class_variable_get(:##baseurl) %>/address_books/show.json',
datatype:'json',
mtype:'get',
colNames:['Id','Name','Email Id','Number'],
colModel:[
{name:'address_book_id',index:'address_book_id',sorttype:'int',sortable:true,width:100},
{name:'name',index:'name',sortable:true,width:300},
{name:'email',index:'email',sortable:true,width:265},
{name:'number',index:'number',sorttype:'int',sortable:true,width:300},
],
pager:$('#pager'),
emptyrecords: "No Records to display",
pginput:true,
pgbuttons:true,
rowNum:10,
rowList:[5,10,20,30],
viewrecords:true,
sortorder: "desc",
//multiselect:true,
loadonce:true,
gridview:false,
sortname:'name',
caption: " Contacts List",
jsonReader: {
repeatitems : false,
cell:"",
id: "0"
},
height: 80
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:true},{multipleSearch:true});
});
This question/answer should contain information on how to redraw the jqgrid based on redefined table data: jqGrid add new column
Regarding the addition of a you might add a time stamp to each of the records, or even the value of a counter; something like:
var recordsSet = [];
$.each(databaseRecords, function(i, record) {
record.idx = Date.now();
record._id = i;
recordSet.push(record);
});
/* code to populate or redraw using update recordSet array jqgrid here */
You shoud then be able to assign either the _id field or the idx field (sample property names only) to the index property of your column models in the call to jqgrid.
I am totally new to jqGrid. I am populating the grid from an array with datatype:local.
var data=[
{date : "01/01/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
{date : "01/02/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
{date : "01/03/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"},
{date : "01/01/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
{date : "01/01/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
{date : "01/02/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"},
{date : "01/02/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
{date : "01/03/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
{date : "01/03/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"}
];
$("#gridTable").jqGrid({
data : data,
editurl:"clientArray",
datatype: "local",
height : 250,
colNames: [' ','Date','Start Time','End Time','Work Function'],
colModel : [
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:true}},
{name: 'date',index:'date',width: 100,sorttype:'date',editable:true,editoptions : {
dataInit : function(element){
formatDatepicker(element,data);
}
}},
{name: 'starttime',index:'starttime',width: 100,sorttype:'date',editable:true},
{name: 'endtime',index:'endtime',width: 100,sorttype:'date',editable:true},
{name: 'workfunction',index:'workfunction',width: 100,sorttype:'date',editable:true,edittype:"select",editoptions:{value:"MA:MA;CA:CA;FC:FC"}},
],
pager: "#gridPager",
caption : "Weekly Details",
grouping : true,
groupingView : {
groupField:['date']
}
}).navGrid("#gridPager",{edit:true,add:true,del:false},
//edit properties
{
zIndex : 950,
}
);
Given above is the grid I am using. I am grouping the grid according to dates, and I am using jsp as the server side technology. My questions are:
Can we add a row to a group without submitting it to the server.
When a new row is created with a new date, will a new group form.
Can we edit multiple rows and submit all at once.
let me be sure if i understood you right...1. you want to add a row to grid but dont want to submit the data to server? it is possible...2. you have to be more clear on this requirement. 3. yes it is possible to take all the edit data of multiple rows and send the data to server.
I'll start with 3.
you can use multiselect: true here, its like the easiest option. Select the rows which you want to edit and Implement onSelectRow with a function which will make your rows editable on selecting them.
and then you can have a button which will take your edited rows data to server.
how to make rows editable on selecting them
onSelectRow: function(id){
jQuery('#grid').editRow(id, true); }
or there's another alternative keep your all rows in editable mode
gridComplete:OnGridComplete, //add this to your Jqgrid parameters
javascript function
function OnGridComplete(){
var $this = $(this), rows = this.rows, l = rows.length, i, row;
for (i = 0; i < l; i++) {
row = rows[i];
if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
$this.jqGrid('editRow', row.id, true);
}
}
}
and how to take edited data to server just on one click, see my answer
https://stackoverflow.com/a/11662959/1374763
and now with you first question
you should change the editUrl to clientarray,
jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray');
check this link and go to saveRow parametrs, for more info
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing
I have added a delete button for each row into my jqGrid. Now I need to add functionality to those buttons. Each button has to delete the row which it is in and remove data from the server. How can I do this? Here is my code so far:
var lastsel;
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Action("Category1List")',
datatype: 'json',
mtype: 'GET',
colNames: ['Navn', 'Slet'],
colModel: [
{ name: 'Navn', index: 'Navn', width: 50,edittype: 'text', align: 'center', editable: true , key: true },
{ name: 'act', index: 'act', width: 75, sortable: false}],
gridComplete: function () {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<input style='height:22px;width:90px;' type='button' value='Slet' onclick=\"jQuery('#list').deleteRow('" + cl + "');\" />";
jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
}
},
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '#Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "500px"
});
});
You can use delGridRow method fore example. To do this you can just replace in your code jQuery('#list').deleteRow( to jQuery('#list').jqGrid('delGridRow',
You can consider to use formatter:'actions': see here, here and here. One more way to implement custom buttons you will find here.
UPDATED: To send additional information during Delete operation you can use delData parameter of delGridRow method:
be = "... onclick=\"jQuery('#list').deleteRow('" + cl +
",{delData:{Navn:'"+ jQuery("#list").jqGrid('getCell',cl,'Navn')+ "'});\" />";
The expression jQuery("#list").jqGrid('getCell',cl,'Navn') will get the value from the 'Navn' column and {delData:{Navn:'NavnValue'} will add Navn=NavnValue parameter to the data send to the server.
UPDATED 2: Your main problem was that you used in the demo project another version of the code as you posted in your question. Your demo has
... onclick=\"jQuery('#list').jqGrid('delGridRow','" + rows + "',
instead of
... onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',
which is the first important error. The rows variable you set as var rows = jQuery("#list").jqGrid('getGridParam','selrow'); inside of gridComplete. At the time no row is selected, rows = null and you place onclick=\"jQuery('#list').jqGrid('delGridRow','null' in for all your buttons.
The next important problem: you should rename
public ActionResult deleteRow(String ProductId)
to
public ActionResult deleteRow(String id)
or use prmNames: {id: 'ProductId'} as additional jqGrid parameter.
Other common problems:
You should modify _Layout.cshtml file. You should remove <script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> because you include another version of the jQuery (jquery-1.5.2.min.js) in the Index.cshtml
You should close <table id="list"> (add ) in the Index.cshtml.
If you want to have pager in the grid (you used jQuery("#list").jqGrid('navGrid', "#page", ...) you should 1) add <div id="page"></div> in the Index.cshtml and add parameter pager: '#page' to the jqGrid.
You have to clean the HTML markup which you use. For example you should remove </div> from the end of Index.cshtml. One more </div> at the end of #RenderSection("Main", required: false)</div> (in the _Layout.cshtml file) should be also removed.
To see the pager in the correct width you should include in the _Layout.cshtml file the following fix
<style type="text/css">input.ui-pg-input { width: auto; }</style>
You should include at least jQuery UI CSS and ui.jqgrid.css for example in the _Layout.cshtml file:
I would recommend you to replace jquery-1.5.2.min.js to jquery-1.6.2.min.js. The last version of vsdoc files you can always load from here. In the same way the last version (currently 1.8.16) of jQuery UI is also recommended.
I would recommend you to download the VS2010 demo project which I created for the answer and use it as the template for your project. You can easy change the code to use Razor.
try
$("#classOfYourButton").click(function(e){
e.stopPropagation();
$(this).closest("tr").remove();
});