I have a dojox.grid.DataGrid where I want to select a row programmatically. I'm using setSelected() to do so and it works the first time. However, calling it a second time for a different row leaves the previous row highlighted. Also, if I try to reselect a row that was previously selected, the onSelected event does not fire. But if I actually click in the grid, it clears things up: rows that were highlighted in the grid before get unhighlighted and unselected.
The code looks like so:
if (grid.rowCount > 0 && idx < grid.rowCount)
{
grid.selection.setSelected(idx, true);
grid.render();
}
It is as if I had multi-select enabled, but I have declared the grid as selectionMode="single".
<table dojoType="dojox.grid.DataGrid"
id="hotTablesForAppDg"
autoWidth="true" autoHeight="true" selectionMode="single"
onSelected="autonomics.Clusters.loadTableDetails(this)">
Is there something else I need to call to clear the previous selection?
Problem solved. You need to call setSelected(..., false) on the currently selected index:
if (grid.rowCount > 0 && idx < grid.rowCount)
{
if (grid.selection.selectedIndex >= 0)
{
// If there is a currently selected row, deselect it now
grid.selection.setSelected(grid.selection.selectedIndex, false);
}
grid.selection.setSelected(idx, true);
grid.render();
}
I had the same issue, of grid having the previous selection active.
Following line of code
grid.selection.clear();
before calling the render(), resolved the issue. Hope this helps.
Related
I want the things in the last expandable item to be fully visible when it is clicked,Now what is happening means when I click on last item it expands down, but I manually need to scroll up again to see the the things inside the expanded item.How can the last expandable item be fully visible.
I am using Recyclerview.
I have found the solution which I wanted, I used
recyclerView.smoothScrollToPosition(selectedPosition);
after setting the adapter. So now the things in the last expandable item is fully visible when it is clicked.
Just a supplementary:
If you use h6ah4i/advrecyclerview, you can use the following code snippet:
#Override
public boolean onHookGroupExpand(int groupPosition, boolean fromUser) {
// NOTE21: collapse all other groups when one item expand.
mExpMgr.collapseAll();
// NOTE21: Visibility of expanding last view in the expandable recyclerview
if (groupPosition == getGroupCount() - 1) {
mRecyclerView.smoothScrollToPosition(groupPosition + getChildCount(groupPosition));
}
return true;
}
I have a grid with databound method which shows the message 'No Data Found for the search' in case no data gets retrieved after performing search. Now i have added a radio buttons which when clicked needs to clear the old data from the grid. The issue is i am using the code $(grid).data("kendoGrid").dataSource.data([]); which does clear the grid but it also shows 'No Data Found for the search' message. Since user didn't perform any search but only changed the radio button it doesn't seem right to display that message in the grid. So, i was wondering if there was a way to clear the grid without invoking the databound method.
Grid code that calls databound function:
#(Html.Kendo().Grid<SearchModel>()
.Events(events => events.DataBound("gridDataBound"))
Databound code:
function gridDataBound(e) {
var grid = e.sender;
var gridName = "#" + grid.table.context.id;
if (grid.dataSource.total() == 0) {
var colCount = grid.columns.length;
$(e.sender.wrapper)
.find('tbody')
.append('<tr class="kendo-data-row"><td colspan="' + colCount + '" class="no-data">No Records Meet Your Search Criteria.</td></tr>');
}
$(gridName).find(".k-pager-wrap").hide();
};
Thanks.
As far as i know there is no way of doing this without putting an e.preventDefault() in the dataBound function. What you can do is maybe make a boolean that your dataBound function uses to check whether it should display the message or not?
i'm trying to code form where you can navigate inside with a next button ( who will hide the current fieldset and show the next one ) and a previous one ( who will hide the current fieldset and show the previous one ). Those two input have a onclick function that will change the fieldset className to active from inactive depending on which fieldset we are. I want to change the next button input type when the user reach the final fieldset so he can submit, but it seems that it automatically trigger the submit event, which means when the user get to the final fieldset, he cant fill any input because the form will submit automatically.
So here's the code :
//When the last fieldset show
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick='';
next.type="submit";
next.value="Submit";
next.id='submit';
}
Is there something that i should add to stop the submit auto-firing ?
I've tested your code in JSFiddle and it works good. It means there is something that trigger submit. May be you can post whole javascript in that page and then I can check what is the issue.
var next = document.getElementById("next");
//next.type="submit";
next.setAttribute('type', 'submit'); // I prefer using .setAttribute method
next.onclick='';
next.value="Submit";
next.id='submit';
<form>
<input name="q" value="hello">
<input type="text" id="next">
</form>
I think instead of trying to "hack" the existing button and turn it into the submit, you could just have two buttons, one "next" and another one "submit-button" (hidden initially), once the user advances to the final step, you can hide the "next" button and show the "submit-button" button.
It can be something like this:
//When the last fieldset show
if (fieldset[4].className == "active") {
// hide the next button
document.getElementById('next').style.display='none';
// show the submit button
document.getElementById('submit-button').style.display='';
}
And it would be not complex to make these buttons to appear exactly on the same place with css, so the user will not notice the replacement.
There are browsers who do not allow you to change the type for security reasons. So you will often have problems with it. Just switch between two inputs as boris mentioned (or replace it completely). But to answer your question:
You can catch the autosubmit with another on submit event. First on click mark the button with a class or data attribute like "preventSubmit". Within the submit event check if this class or data attribute exists and prevent the submit (f.ex with prevent default()) and remove the class that all wanted submits by users clicks are not stopped.
Why not just add an event to submit the form you are currently on:
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick=(function() { document.forms[0].submit(); });
//next.type="submit";
next.value="Submit";
next.className="MySubmit"; // try to style it as a button for better UX
//next.id='submit';
}
Here's my problem: in my application I have a Dojo EnhancedGrid, backed up by an ItemFileReadStore. The page flow looks like this:
The user selects a value from a selection list.
The item from the list is posted on a server and then the grid is updated with data from the server (don't ask why, this is how it's supposed to work)
The new item is highlighted in the grid.
Now, the first two steps work like a charm; however, the third step gave me some headaches. After the data is successfully POSTed to the server (via dojo.xhrPost() ) the following code runs:
myGrid.store.close();
myGrid._refresh();
myGrid.store.fetch({
onComplete : function(items) {
for ( var i = 0; i < items.length; i++) {
if (items[i].documentType[0].id == documentTypeId) {
var newItemIndex = myGrid.getItemIndex(items[i]);
exportMappingGrid.selection.deselectAll();
exportMappingGrid.selection.addToSelection(newItemIndex);
}
}
}
});
Now, the selection of the grid is updated (i.e. the selection object has a selectedIndex > 0), but visually there's no response, unless I hover the mouse over the "selected" row. If I remove the .deselectAll() line (which I suspected as the culprit) then I sometimes end up with two items selected at once, although the grid selectionMode attribute is set to single.
Any thoughts on this one?
Thanks a lot.
You need to use setSelected(), like so
exportMappingGrid.selection.setSelected(newItemIndex, true);
The second parameter is true to select the row, false to unselect it.
This is what works for me:
grid.selection.clear();
grid.selection.addToSelection(newItemIndex);
grid.selection.getFirstSelected();
Jon
Is it possible to turn off the row selection feature on Flexigrid?
It's somewhat annoying when you haven't implemented anything that makes use of the selection.
Unfortunately Mr Flibble's accepted answer does not stop all selection capability, it merely restricts it to one row.
To disable it completely, add a new property to the $.extend block (around line 20)
// apply default properties
p = $.extend({
<SNIP>
onSubmit: false, // using a custom populate function
disableSelect: true
Then in the .click section of the row (around line 754) add a check for the property
$(this)
.click(
function (e)
{
var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
if (p.disableSelect) return true;
$(this).toggleClass('trSelected');
if (p.singleSelect) $(this).siblings().removeClass('trSelected');
}
)
Turns out you need to change the singleSelect property to true.
singleSelect: true
I know this thread is a bit old but I came upon it looking for the same thing. The singleSelect didn't work for me as I didn't want to be able to select any row. I found that I could remove any row selection with a single line of code:
$('.grid tr').unbind('click');
This a course removes all bindings on the table row so if you needed the binding you won't have it unless you rebind later but I needed to remove any and all row selection on my table. I didn't need to touch the flexigrid code to do so which I liked a bit more than previous answers.