set cell value when cell is editable in jqgrid form edit - javascript

hi i am using JQGrid and want to set value of a cell to zero when i edit the row and whatever the value of the cell is like if cell value is 103.50 i want to to set to 0
i try
editoptions:{dataInit : function (elem){$(elem).val("0");}}
and it works for only new but i want to reset value of cell to "0" even when i use form edit.
i also try
editoptions:{defaultValue:"0"}
and
editoptions:{value:"0"}
but all is working when use form edit for new row and when try to edit it show first time the default "0" value but when i cancel and again edit form then cell value is set in the text input field
i know its not logical but want to do for customer requirement and also search a lot for it
but unable to find any related proper answer

I think you need to set the value of the cell, when selecting the row, if it an inline edit.
onSelectRow: function (id) {
if (id) {
selectedRowId = id; // save current row ID
var myCellData = grid.jqGrid('getCell', selectedRowId , 'MyColName');
}
},
where id the row id, then you can find the cell value
Hope this helps you. Enjoy jqGrid.

beforeShowForm: function($form) {
setTimeout(function() {
$form.find('input#credit.FormElement').val(0);
},50);
}
works for me as when load the form i reset the value of Credit;

Related

check if the row selected is newly added

I have a jgrid with inline editing, when i click on "+" in the pager button it adds a row in editable mode. When the row is in editable mode i click on "+" again at tht time i want to show a message saying "the grid is in edit mode please save it".
document.getElementById('partnerGrid_iladd').onclick = function() {
var rowid = jQuery("#partnerGrid").jqGrid('getGridParam', 'selrow');
var edited = "";
var ind = jQuery("#partnerGrid").getInd(rowid, true);
if (ind != false) {
edited = $(ind).attr("editable");
}
if (edited === "1") {
alert("There is an row in editable mode ,Please save the row before adding another row");
return;
}
}
But this gets fired after a row is added in the grid and the row is in added mode.. So i want to check if the row is a new one if the row is new one i don't want to throw error on click of +.
There are many ways to implement your requirement. You don't posted enough details about what you do, but because you test editable attribute I can guess that you write about the "+" button added by inlineNav. In the case jqGrid calls addRow on the click on the Add button. The method addRow have beforeAddRow callback and jqGridInlineBeforeAddRow event which you can use. The callback/event should return false to prevent adding new row and starting the editing. Moreover you can use savedRow parameter of jqGrid to test whether some other row is in editing mode. You can use getGridParam to get "savedRow" parameter. The returned value is array of saved rows with the values before starting editing. Thus if the length of the array grater as 0 then some other row is still editing.

Breeze/Knockout dropdown value is not updated in database if caption is selected instead of value

I am using Breezejs with Durandal in my .net application.
When i try to edit a section which contains
1) Text box
2) Dropdownlist with caption and options
3) TextArea
4) Button
Onclick of edit button, i am binding these controls with their respective values(till then it works fine).
After i change textbox value to "test123" and dropdown values to it's "caption" and clicking on save button. In save function I am creating Breeze entity in modified state and updating them as shown below,
var personEntity = breeze.manager.createEntity('TableName', { Id: id }, breeze.EntityState.Unchanged);
personEntity.entityAspect.entityState.setModified();
personEntity.name(name); //"test123"
personEntity.dropdownValue(status) //I have selected the caption, means value is undefined
personEntity.textArea(address); //No change
then making savechanges() to DB.
In table text box value is updated properly but the value of dropdownlist is not updated(from some value
to Null);
Kindly suggest me some solution so that i can save null value in DB if caption is selected.
Thanks in Advance......
The problem is that the ContextProvider on the server is not detecting that the dropdownValue has changed. It determines the changed properties by looking at the entityAspect.originalValues. Since you create a new entity with dropdownValue = undefined, and you set it to undefined, no change is detected.
Change your code to initialize the dropdownValue to something else:
var personEntity = breeze.manager.createEntity('TableName',
{ Id: id, dropdownValue: 'something' });
personEntity.name(name);
personEntity.dropdownValue(status);
personEntity.textArea(address);

How to detect select onChange in a row cell

I am creating a dynamic table using java script and jquery, one of my project requirement is a select box in a row cell,
From the this SO link i am able to place a on click listener on a table row which gives me id of table row and cell(tr and td) but i am not able to detect select onchange i have also tried "jQuery get value of select onChange" but it is also not working in my case!!
My problem is
How to detect select on Change in a row cell as i have to update that
changed data in database?
thanks in advance!!!!!
I believe this will get everything you'll need for your database (value selected, cell and row it was selected in)... something like:
JSFiddle
$("td select").on("change", function() {
var value = this.value;
var $cell = $(this).parent();
var $row = $cell.parent();
alert("Selected ["+value+"] in cell ["+$cell.index()+"] of row ["+$row.index()+"]");
});
$(document).on('change','td',function(){
//Do your abacadabra!
});

Put previos data in table rows

I've table with with 3 column with the following name
name <----input field - first column
user <----CheckBox -second column
address<----CheckBoxv-third column
I've in the table in-line create and if user click on edit for specific row and
change the name /user/address and instead of save do cancel I want to restore the previos data,I was able to do this for the input property but not sure how to do it for the checkBoxes,any idea how?
This is how I restore the data for the name property
var $firstCell = $row.find("td:first"),
checkBox = $row.find("input[type=checkbox]"),
....
$firstCell.text(previousData.name);
In the previosData I store all the data when the user just click on edit
I think what you might be looking for is something like this:
var $checkboxUser = $row.find('input[name=user]'),
$checkboxAddress = $row.find('input[name=address]');
previousData.statusUserCheckbox = $checkboxUser.prop('checked');
previousData.statusAddressCheckbox = $checkboxAddress.prop('checked');
// ...
$checkboxUser.prop('checked', previousData.statusUserCheckbox);
$checkboxAddress.prop('checked', previousData.statusAddressCheckbox);
http://api.jquery.com/prop/

HTML: Get value from input with no ID

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.

Categories