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
Related
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've binded the same function to all elements that I want(let's say View and Label).
In this onClick handler function I want to get the element which was clicked and increase its 'top' by 1.
Please tell me if you know how to do that, I can't find an answer yet.
My global click handler function:
function increaseElementTop(e) {
// Here we should increase element's top position.
Ti.API.info(JSON.stringify(e));
}
Thanks, any help is appreciated.
Get the e.source attribute from the Event e. Then use the setTop() method.
if (e.source == $.yourLabel) {
$.yourLabel.setTop($.yourLabel.getTop() + 1)
}
UPDATE: Regarding your comment: I thought it would only be used for two elements. A universal approach would be something like this:
e.source.setTop(e.source.getTop() + 1);
Unfortunately I have no machine available to test the code but I will do so later (Tuesday I guess). Just try it and let your programm print the e.source variable. If this does not work you can also try to use e.source.getId().
function increaseElementTop(e) {
var theUIElement = e.source;
theUIElement.top = theUIElement.top + 1;
}
Add the event listener to each of your UIElements, and this will get the element you click on & modify the top.
I'm using the Kendo UI ComboBoxes in cascade mode to build up a filter that I wish to apply.
How do I clear/reset the value of a Kendo UI ComboBox?
I've tried:
$("#comboBox").data("kendoComboBox").val('');
$("#comboBox").data("kendoComboBox").select('');
$("#comboBox").data("kendoComboBox").select(null);
all to no avail. The project is an MVC4 app using the Razor engine and the code is basically the same as the Kendo UI example.
If you want to use select the you need to provide the index of the option. Otherwise use text
$("#comboBox").data("kendoComboBox").text('');
Example: http://jsfiddle.net/OnaBai/4aHbH/
I had to create my custom clear function extending involved Kendo UI controls like the following:
kendo.ui.ComboBox.fn.clear = kendo.ui.AutoComplete.fn.clear = function () {
if (!!this.text) {
this.text("");
}
if (!!this.value) {
this.value(null);
}
this._prev = this.oldIndex = this._old = this._last = undefined;
};
Then you can call $("mycontrol").data("kendoAutoComplete").clear(); to clear the control and have the change handler invoked when doing the following: select an item, clear and select again the previous item.
This also works:
$("#comboBox").data("kendoComboBox").value(null);
I've found these options below seem to work to reset the kendo combo box. You can run $("#comboBox").data("kendoComboBox").select() after trying two below and you should see a value returned of -1, indicating its reset.
$("#comboBox").data("kendoComboBox").value('')
$('#comboBox').data().kendoComboBox.value('')
$("#comboBox").data("kendoComboBox").select(-1)
$('#comboBox').data().kendoComboBox.select(-1)
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.
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.