I have been using slick grid, which is excellent, but have a really minor niggling issue which I can't seem to halt.
I display two grids, one is editable and as items are 'Approved' they are then moved to the second grid, which is read-only.
All good so far... But whilst Testing it has become apparent that when clicking on cells within the second grid which have checkboxes in them the focus gets reset to the first grid if the checkbox is clicked within the cell. If they click anywhere else it doesn't do anything, but if the checkbox is clicked it shifts focus. It doesn't change the value, but it does shift focus away. If I remove the formatter it doesn't shift focus...
Any ideas?
Should I be looking at some sort of custom formatter?
I can supply screenshots or code if needed. Both grids are independently defined. They work really well apart from this minor issue which seems to be because the checkbox (read only, no editor) is clicked on. Clicking anywhere else in that cell or on other cells does nothing.
I've tried processing a beforeEdit event and ignoring that. Just wondering if there's something I'm missing. There probably is!
Thanks
(Posted on behalf of the OP).
I solved it using a custom formatter :
function customFormatter(row,cell,value,columnDef, dataContext) {
console.log('value '+ value);
if(value == true)
{
return "<input type='checkbox' onclick='return false;' id='coding' name='interest' value='coding' checked>"
}
else
{
return "<input type='checkbox' onclick='return false;' id='coding' name='interest' value='coding'>"
}
}
Checkboxes are still displayed but they don't make the second grid lose focus to the first grid :)
Related
I need the text that is available in the dxDataGrid should be in selected mode on clicking that cell in edit mode..??
I have even tried onCellClick event too..But no where I found the solution..
onCellClick:function(e){
e.cellElement.select();
},
Please help me out...
Ran into this problem too, this did the trick for me.
onRowClick: function (e) {
$("input.dx-texteditor-input[type=text]").select();
},
The problem I noticed, was the timing of the call. The contents to be selected cell aren't ready when the onCellClick fires. By using the OnRowClick(which fires right after the onCellClick), the select is called after the cell is done rendering. Probably several ways to do the actual select, the timing is the real issue.
I have a gridpanel and want to show a errortooltip on mouse hover as we see for textfields and combobox. Is there any inbuilt component to show this error styled tooltip for grid panel.
i am doing this to find validate based on the number of records in the grid panel.Please Help
There's nothing built-in to accomplish this, but you can still do it. Lucky for you, I had to do something like this not too long ago.
You'll need to use a column renderer. You'll also need to store the error message on the record itself, or have a way to access error messages by record. Your renderer should look something like this:
renderer: function(value, metaData, record){
if(/* record has error */){
metaData.tdCls += " x-form-invalid-field"; // Squiggly red lines
metaData.tdAttr = "data-errorqtip='This is my error message!'";
}
return value;
}
You may need to play around with styling and whatnot, but that is the gist of it. Also, you'll have to refresh your grid if the validity of your records changes, to make sure your tooltips say updated.
One interesting phenomenon I've noted today is that if a checkbox input is not checked, it is not included in the postback variables; no "_xyzcheckbox : off" corresponds with the "_xyzcheckbox: on" alternative (when 'checked').
This leads to an issue of storing check state if the checkbox is hidden on the server and then revealed later; the Checkbox does not know whether or not it is simply hidden (not in the DOM) or if it is being unchecked based on the postback that the browser sends back to the server, as the postback includes no reference to the checkbox if it is unchecked.
I am having an issue where I need to hide a checkbox (using .Visible = false on a parent of the checkbox) and show it depending on the users input, but the state cannot be persisted because of the aforementioned issue.
Has anyone else come across this issue? How have you solved it or gotten around it?
Note: The most obvious answer his hiding the checkbox on the client (setting display: none), this isn't an option though as we're trying to reduce the markup on the page so that postbacks are smaller.
Thanks for the feedback thus far.
Thanks :)
Rather than use .Visible (which removes the checkbox from the emitted markup, and therefore no chance of it being in a POST back), why not apply a CSS class to it?
The CSS could be as follows:
input.hidden {
display: none;
}
In your ASP.NET page simply set the CssClass property:
MyCheckbox.CssClass = "hidden";
And you should be fine.
In the mark-up, you can default selected = "false".
In the code-behind, you can determine the state by mycheckbox.checked, which will either return true or false.
I have a read-only form filled out automatically from a database. I have several fields with true/false values, and would like them displayed as checkboxes that are either empty or checked. I can databind the checkbox control and disable it, but then it appears grayed out. Is there a simple way to change this so it will show up at a normal, easy-to-read boldness but still be disabled? If not, what's the best way to do this? Should I use an image?
You can go like this as well.
<asp:CheckBox id="checkbox1" Text="Custom" onclick="javascript: return false;" />
Which will render it as
<input type="checkbox"
checked onclick="javascript: return false;">Custom</input>
Interesting question!
There's only one issue I can see with using images instead of normal checkboxes, and that's how the active checkboxes will differ from the disabled (image-based) checkboxes. So, if you go the image route, you will probably want to style all checkboxes. :)
You can effectively disable any checkbox with the following jQuery method (I've only tested in Chrome and IE 9, so far).
$('.readonly:checkbox').click(function(e) {
e.preventDefault();
});
This will "disable" any checkbox with the "readonly" class.
Or, you can use an inline JavaScript function (albiet not recommended, as it adds clutter and confusion):
<input type="checkbox" onclick="event.preventDefault();" />
The reason you would use "preventDefault()" instead of "return false", is because returning false will stop propagation. This means that your click event will not bubble to the parent element. That could potentially cause problems with other code... but it's unlikely.
Also, like Bala R mentioned, you mustn't rely on these restrictions to work. Your server side code should be aware that these values are read only, and refrain from updating them.
Here is jsFiddle example: http://jsfiddle.net/xixionia/3rXCB/
I hope this is helpful! :)
You can do something like this with javascript and use it for the checkbox's onclick handler.
jsFiddle link
function makeMeReadonly(checkbox){
checkbox.checked = !checkbox.checked;
}
and
<asp:CheckBox id="checkbox1" onclick="makeMeReadonly(this)" />
or
<asp:CheckBox id="checkbox1" onclick="this.checked = !this.checked" />
if you want it inline.
but you shouldn't depend on this for security as it will be a regular check box when javascript is not available and/or client code is not that difficult to work around client code restrictions but in your case since you have a readonly view, I wouldn't think you have any logic to save changes.
I just had the same problem and fixed it with an OnClick event on the checkbox. In the event handler the .Checked state is set to the value it is supposed to display.
private void chkBox_CheckStateChanged(object sender, EventArgs e)
{
chkBox.Checked = boolDatabasevalue;
return;
}
Works great, the user can click on the checkbox but the check mark does not change.
The only issue is a slight border shadow indicating the Focus. But the checkmark is, as OP was looking for, of easy-to-read boldness.
NB: this is C#, but in Asp.Net this should work similarly.
i have a dynamically created gridview button that fires off a modal popup when clicked. I do this onclientside like so:
function openModal(btnId, v) {
deptdata(v);
// __doPostBack('<%=DropDownList1.ClientID %>', '');
btn = document.getElementById(btnId);
btn.click();
}
function deptdata(v) {
document.getElementById('<%=vendor.ClientID%>').value = v;
}
This is how the function is called in the code.
btnedit.OnClientClick = String.Format("openModal('{0}','" & GridView1.Rows(i).Cells(0).Text & "');return false;", hidden.ClientID)
I set the value of a hidden field(Vendor) but I need that value for what's in the modal popup. I have a dropdown list that depends on that newly set variable. The variable is set depending on what row was clicked. So i need to somehow just reload that popup. I have an Update Panel but I can't get that Panel to reload. I've tried __doPostback and it didn't help. any ideas how to update the panel or the dropdown in the panel using javascript?
It's not very clear from your description and the limited code you provide what it is exactly that you are trying to do and what is failing. However, the following might give you some ideas. If you provide more detail and code someone might be able to give you a better answer.
ScriptManager1.RegisterAsyncPostBackControl(Button1);
to trigger an update panel post back from js make sure you use UniqueID, not ClientID, thats a common gotcha that prevents the async postback from working.
__doPostBack("<%=Button1.UniqueID %>", "");
Personally, I have all but given up on UpdatePanels, I only use them in the most trivial cases. I prefer to have my js call an ASP.Net JSON webservice and have the on completed function render any needed changes to the html. It's more flexible, lighter and infinitely faster for pages with large grids or a lot of controls.