Disabling a row in a DOJO / Gridx grid - grid

I have a grid I created in Gridx which lists a bunch of users. Upon clicking a ROW in the grid (any part of that row), a dialog pops up and shows additional information about that user and actions that can be done for that user (disable user, ignore user, etc.) - when one of these options is selected from the pop up, I want to DISABLE that row. The logic for getting the row, etc. I can take care of, but I can't figure out how to make a grid row actually "appear" disabled and how to make that row no longer clickable.
Is there a simple way to do this? If you aren't familiar with gridx, solutions that apply to EnhancedGrids or other Dojo grids are also appreciated.

Alright now that I have a little more information here is a solution:
Keep a list of all the rows you have disabled so far either inside the Grid widget or in its parent code. Then on the onRowClick listener I would write code like this:
on(grid, "onRowClick", function(e) {
if(disabledRows[rowIndex]) {
return;
}
// Do whatever pop up stuff you want and after
// a user selects the value, you can "disable"
// your row afterwards by adding it to the disabled
// list so that it can no longer be clicked on.
var rowIndex = e.rowIndex;
disabledRows[rowIndex] = true;
// This is just some random class I made up but
// you can use css to stylize the row however you want
var rowNode = e.rowNode;
domClass.add(rowNode, "disabled");
});
Note that domClass is what I named "dojo/dom-class". Hope this helps!

This is perhaps not exactly what you are seaching for:
If you want to hide one or more rows by your own filterfunction you could just add to these rows in the DOM your own class for nodisplay. Here I show you a function for display only those rows which have in a choiceable field/column a value inside your filterlist.
function hideRowFilter(gridId, fieldName, filterList)
{
var store = gridId.store;
var rowId;
store.query(function(object){
rowId = gridId.row(object.id,true).node();
if (filterList.indexOf(object[fieldName]) == -1)
domClass.add(rowId, "noDisplay"); // anzeigen
else
domClass.remove(rowId, "noDisplay"); // verstecken
});
}
CSS:
.noDisplay { display: none; }
So I can for example display only the entries with a myState of 3 or 4 with this call:
hideRowFilter(gridId, 'myState', [3, 4]);
Note that domClass is what I named "dojo/dom-class"

Related

Persist checkbox in gridview while custom paging

I have a created a gridview and added a checkbox in item template. This grid has few columns along with DataKey (primary key). Due to performance gain, this grid will fetch the next set of recrods on each page change based on the page number click. So that is done.
Now when user selects a checkbox in page one and then go to page 2 and coming back to page one, then user will not see the checkbox checked as the user did earlier.
So is there a good way to persist the checkbox when user move page to page?
This checkbox be used as a flag to select the rows that can be deleted later by a button outside the grid.
Since you receive a new set each time a paging is selected, I suggest the following approach:
Create an array[] object via javascript that will add to list the datakey whenever a checkbox is selected and in turn remove it if the checkbox is deselected. Something like this:
var selectedDataKeys = [];
$('.checkboxclass').on('change', function() {
// Considering you assign the data key as id for the checkbox otherwise implement a way to retrieve the id.
var dataKey = $(this).prop('id');
// Determine if the dataKey is in the selected data keys array
var isContained = (selectedDataKeys.indexOf(dataKey) > -1 );
if($(this).is(':checked')) {
// If is contained is false - add to the array
if (!isContained)
selectedDataKeys.push(dataKey);
} else {
// If is contained is true - remove to the array
if (isContained){
selectedDataKeys = $.grep(selectedDataKeys, function(value) {
return value != dataKey;
});
}
}
});
From this point on the client user will have an active list of selected items, now its up to you to use that list to manipulate your grid display page. Either modify the display on document ready by comparing all the item on the grid display with the selectedDataKeys array or sending those keys and do the comparison server side.
Hope this helps.

Extjs4 how to disable itemClick event of grid's certain column

I am working in extjs4. I have grid panel view as=
i want to show image in floating window whenever user clicks on grid row.So i have written function namely showImage() and calling it as=
me.mon(me, {'itemclick' : me.showImageViewer
}, me);
But i dont want to call this function when user clicks on FileName column of grid. So how to restrict calling showImage function when user clicks on grid column 'FileName'
You can listen to the column click function. Define common listener for columns you need. In arguments you should recieve grid, cell element, row index, column index, event data and record(in such order). So if you'll move, rename headers or do whatever you want with column with such listener it wouldn't change click listener.
i want to show image in floating window whenever user clicks on grid row.
Do you mean you'll show a popup containing the bigger image if image on row is clicked? if yes, on your showImageViewer function, you have to check the attributes of the cell if it's an image or you can check its dataIndex.
You can also listen to cellClick instead of itemClick. With that, you can check the cellIndex of the cell being clicked. In your case, if cellIndex is equal to 2 (index of your FileName column, don't call showImageViewer.
cellClick : function(view, cell, cellIndex, record, row, rowIndex, e) {
}
You can use a css selector to differentiate between elements inside the row, using a code like the following
listeners: {
itemclick: {
fn: function (view, record, item, index, e, eOpts) {
var photo = e.getTarget('.photo');
if(photo) {
alert(record.get('photo'));
}
}
}
You can try a working sample here. Hope it helps to solve your problem

Add new row when previous "new row" is saved in Kendo Grid

I have created a kendo.data.dataSource without transport (only data with model and fields) with success, and I am able to bind it to the KendoUI Grid on my page.
After loading, the grid is empty. I do calling the net line to add a empty data item in the grid so the user can enter data directly in the grid (inline mode).
$("#divid").data("kendoGrid").addRow();
This all works.
But after the user finished the input and hit the OK/Save button, I like to add a new empty row immediatly, below the previous added row. I try this during the grid function Save:
save: function(e) {
$("#divid").data("kendoGrid").addRow();
}
But the previous row with inserted data disappear and a new empty dataitem isn't added.
Also trying this same way during the datasource event 'change', but with the same behaviour.
My question is, what I doing wrong or what is the best way to add a new empty row to the Kendo Grid when user hits the OK/save button of a current inine editing row.
If you want to save multiple record at a time, you can go for batch editing. You can bind a keypress event to create new row as well. Try this:
$(document.body).keypress(function (e) {
if (e.keyCode == 13) {
var grid = $("#grid").data("kendoGrid");
grid.addRow();
}
});
13 is the value for enter key.

JQuery updating label

I have 2 textboxes and a label on my page. The 2 textboxes will contain numeric values. The label text will be the product of the 2 textbox values. Is there a way to do this using JQuery so that the value can get updated when I edit the textboxes without having to do a postback?
Also the textboxes may contain values with commas in it: e.g. 10,000. Is there a way I can extract the number from this so that it can be used to calculate the label value.
Thanks in advance,
Zaps
I can't add comments to other answers yet, so I'll just post an update here.
The original question involved product, which means multiplication, so here's a version that allows for unlimited textboxes and completes the multiplication.
function makeInt(text) {
return parseInt(text.replace(',', ''));
}
$(function(){
//hook all textboxes (could also filter by css class, if desired)
//this function will be called whenever one of the textboxes changes
//you could change this to listen for a button click, etc.
$("input[type=text]").change(function(){
var product = 1;
//loop across all the textboxes, multiplying along the way
$("input[type=text]").each(function() {
product *= makeInt($(this).val());
});
$("#display-control-id").html(product);
});
});
$('#SecondTextbox').keyup(function() {
var t1 = $('#FirstTexbox').val();
var t2 = $(this).val();
var result = t1+t2;
$('#resultLabel').html(result);
});
This could do the trick, or you could have it on a click event with some link element. This would also not have any page refresh.
$('#checkButton').click(function() {
var t1 = $('#FirstTexbox').val();
var t2 = $('#SecondTextbox').val();
var result = t1+t2;
$('#resultLabel').html(result);
});
Link could be something like,
<a id="checkButton" title="Check your result">Check</a>
And with that you would have the css settings of 'cursor:pointer;' to make it seem a proper link.

How can I get value from radio-button inserted into innerHtml

I have sort of a table with a radio-button column. I managed to make radio-button column work dynamically inserting into a cell (div if matter). But, on postback innerHtml hasn't been updated with "checked" attribute.
Could you give me an idea how can I find out (on the server) if radio-button has been checked?
More info: This is on user control inside update panel.
This would be good post on my topic, still doesn't help
Any reason you cannot use a standard asp:RadioButton and use javascript to ensure it is mutually exclusive. I have done this before by adding a custom attribute to the radiobutton and then using a js function to uncheck all items with that attribute and then check the selected one. This works around the IE issue which prevents the groupname attribute from working on radioboxes that are in different containers.
radioButton.InputAttributes.Add("ClientGroupName", "grpRadioList");
radioButton.InputAttributes.Add("onclick",
string.Format(
"javascript:radiobuttonToggle('{0}','ClientGroupName','grpRadioList');"
,radioButton.ClientID));
and use the following JS to uncheck all radios and then check the one you want.
Note i used InputAttributes instead of Attributes as the radiobutton is wrapped inside a span tag so InputAttributes is for items added to the actual input control rather than the span.
function radiobuttonToggle(selectedRB, attribName, attribValue)
{
var objRadio = document.getElementById(selectedRB);
for(i = 0; i < document.forms[0].elements.length; i++)
{
elm = document.forms[0].elements[i];
if (elm.type == 'radio')
{
if(elm.getAttribute(attribName) == attribValue)
elm.checked = false;
}
}
objRadio.checked = true;
}
You can then expose radioButton.Checked as a property in your CS file and reuse this as a control.
Check Form.Request("radio-name") != null
You only get a non-null value when it's been checked.
Make sure your page elements are being rebuilt correctly on postback. Any binding process that inserted the radio buttons the first time around will have to be re-run before you can access them the second time.
Here is a working example, first I add radios to my webform by the method you linked :
function addRadio()
{
try{
rdo = document.createElement('<input type="radio" name="fldID" />');
}catch(err){
rdo = document.createElement('input');
}
rdo.setAttribute('type','radio');
rdo.setAttribute('name','fldID');
document.getElementById('container').appendChild(rdo);
}
Then at code behind I used only the code below to get the radio's value :
string value = Request["fldID"];
So, be sure you're trying to get the name of the radio buttons at server side. You should use name attribute at server side, not id.

Resources