I have a dropdown and 2 listboxs in a updated panel and a save button on the page. When the page loads I load one of the list boxes with data related to the selected dropdown item. When the user selects a different item in the drop down I do a postback and reload the listbox with data related to the selected item. When the user clicks save on the page the listbox.Items are the orginal items loaded with the first page load and the items that are showing on the page.
Any ideas how to fix this?
Make sure you dont bind the data on every postback. Use Page.IsPostback to check this.
To fix this problem I had to update the viewstate from the client side. Below is the javascript function I called once the postback of the update panel is completed:
function UpdateStateforList(list){
var i;
var state = "1";
for(i = 0; i < list.options.length; i++){
state += "|" + list.options[i].text + "|" + list.options[i].value;
}
eval("document.forms[0]." + list.id + "_State.value = state");
}
Related
I am using a dropDownList to show some values in order to filter results on a grid.
I have use the 'change' event to see when the grid must be updated
$('#view-mode-selector').kendoDropDownList({
change: onMChange
});
in the method onMChange I am trying to show the progress bar with
kendo.ui.progress($("#grid), true);
and at the end of the method when all is done I have
kendo.ui.progress($("#grid), false);
But the data loads and I do not see the progress bar.
If I remove the last statement (the 'false' one) I can see the progress bar, but it never disappears.
If I debug, It appears and disappears when the data is ready.
It is not an issue of the data loading too fast, sometimes the data takes 5 seconds to be ready.
The data is already in the browser, I am just showing or hiding columns.
Kendo version v2016.2.714
Thanks
EDIT
on onMChange I have some ifs where I populate an array (columnsToShow) with the name of the columns I want to show (everything else will be hidden) then I call a function with this code:
showHideColumn: function(columnsToShow) {
var grid = $(this.gridId).data("kendoGrid");
var show = false;
for (var i = 0; i < grid.columns.length; i++) {
show = false;
if (columnsToShow.length > 0) {
for (var j = 0; j < columnsToShow.length; j++) {
if (columnsToShow[j] == grid.columns[i].field) {
grid.showColumn(i);
columnsToShow.splice(j, 1);
show = true;
break;
}
}
}
if (!show) {
grid.hideColumn(i);
}
}
}
That code seems to be very inefficient at hiding/showing columns, all activity stops for few seconds when I want to show all columns (after having hidden some), I have around 30 columns and 30 rows.
Your question is a little misleading. Is the #grid element you are having difficulty displaying the loading icon for a grid control (as per the name of the element) or a drop down control (as per the title of the question)?
If grid
In order to show the loading icon I used:
kendo.ui.progress($("#grid").data("kendoGrid").element, true);
And to hide:
kendo.ui.progress($("#grid").data("kendoGrid").element, false);
If drop down
I haven't had to force display loading icons for dropdowns however there is an example here, noting the comment specifying:
The element must have a position:relative style applied
Additionally further down, it is noted that the element cannot have child elements.
I have a view panel in xpages and a computed field to show the row-count. I have 2 problems:
1st: how can i count only the rows of the current page of the pager?it seems that viewPanel.getRowCount() gets all rows from the beginning until the current page, so if i have 30 entries per page and i am in page 2, it shows 60 instead of 30.
2nd: even if i achieve the above, the pager only refreshes the view and i can't refresh the computed field or another panel. Can i put the computed field inside the view panel or make it somehow to be refreshed in each page change? i would prefer not to do it with full page refresh if possible...
Given the computed field refresh issue, even if you managed to get a count of rows (eg on a page-scope SSJS variable), it woudln't update the computed field.
It might be easier to to count to rows in the HTML table using clientside javascript ?
something like ..
page onload event :
get the HTML table
get the table rows property (array of rows in the table)
number or rows = that value (1st row = TH (header) row if there is one = row 0)
use javsscript to plug that value into a known DIV
You could also hijack the partial refresh issued from the pager and check for the ID that has been refreshed. If the ID match your view panel's ID, you could do another partial update in order to update another panel.
Example code for hijacking the partial refresh:
var sysHijackPartialRefresh = function(){
XSP._inheritedPartialRefresh = XSP._partialRefresh;
XSP._partialRefresh = function( method, form, refreshId,options) {
if (options){
if (!options.onComplete) {
options.onStart = function(){
};
options.onComplete = function(){
if (refreshId == "<client id of view panel>") {
// issue another partial refresh
XSP.partialRefreshGet(<client id of the other panel>);
}
};
}
}
this._inheritedPartialRefresh(method, form, refreshId, options); }
}
XSP.addOnLoad(sysHijackPartialRefresh);
See http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_events_and_partial_or_full_refresh for more information about partial updates.
The pager should have a "refreshID" property in which you can put the client ID (!) of the panel you want to refresh. Use getClientId() to compute the client ID of the panel.
For the row count: use the XPages debug toolbar (from openNTF) to check for a property of the view panel or the pager which gives you the current page number. If you got that, you can simply compute by using viewPanel.getRowCount() - (page number * number of rows per page).
Is there a way to access the jqGrid's columnChooser's multiselect API objects? I need to call those objects to update the data on ColumnChooser pop-up dialog.
In the snapshot below, is the customized ColumnChooser pop-up dialog. The HTML combo when selected/changes would then change the $ui.multiselect sections (avaiable & unavailable columns).
In the 2nd snapshot below is the view souce using Firefox's firebug and it doesn't have me the option to toggle the 2 columns.
Is there a way to access ColumnChooser's API instead, to manually toggle the columns on the ColumnChooser but not touch the jqGrid's columns? How can I accomplish this?
Thanks...
[Snapshot #1]...
[Snapshot #2]...
After a few days of Google surfing, piecing together sample script from lots of example api and coming up with JQuery to find the html path to a clickable anchor link.
Updated Solution
The "parmSavedBuildDataFormValueColumnModelSetting" value is the colModel's name you passed on to it, whether it be the values you saved from the database or cookie, or anything for populating the MultiSelect "selected" box-windows.
function JqgridColumnChooserSavedBuildsRecordsMultiselectDialogToggler(parmSavedBuildDataFormValueColumnModelSetting) {
//Re-order the $.ui.multiselect's columns in 2 boxed-windows (available & unavailable)...
//http://stackoverflow.com/questions/10439072/add-remove-column-handler-on-jqgrid-columnchooser
//http://stackoverflow.com/questions/11526893/jqgrid-columnchooser-unselected-columns-on-the-right-in-alphabetical-order
var $jqgridColumModelSetting = $('#' + jqgridSpreadsheetId).jqGrid('getGridParam', 'colModel');
var $jqgridColumNameSetting = $('#' + jqgridSpreadsheetId).jqGrid('getGridParam', 'colNames');
//Remove all of the "selected" columns having "-" icon...
//09/11/2013 - This "selected" columns with hyperlink click event does not work too well as it cause 1/3 of all columns not to be visible, so let' use the "Remove All" hyperlink instead...
//#$('#colchooser_' + jqgridSpreadsheetId + ' ul.selected a.action').click();
$('#colchooser_' + jqgridSpreadsheetId + ' div.ui-multiselect div.selected a.remove-all').click();
//Add back the "available" columns having "+" icon, only the one that match the SavedBuilds data...
$.each(parmSavedBuildDataFormValueColumnModelSetting.split('|'), function (i1, o1) { //##parmSavedBuildDataFormValueColumnModelSetting.forEach(function (i, o) {
$.each($jqgridColumModelSetting, function (i2, o2) {
if (o2.name == o1) {
$('#colchooser_' + jqgridSpreadsheetId + ' ul.available li[title="' + $jqgridColumNameSetting[i2] + '"] a.action').click();
return false; //This only break the foreach loop [while "return true" resume the loop] (This have nothing to do with function's returned value)...
}
});
});
}
I have a problem with my product view. I want to display product data. each product is a "box" with an image and text. I want to display six products on a panel. As of the fact that i have many products i want to have a "carousel like view". My idea was the following: Place 6 products on a panel. Load 3 panels and place each panel as a carousel item so that i can swipe to get to another "page".
To save performance I tried to always have only 3 items in the carousel. The active "page" and the page before, and the page after, so that I can swipe to left/right and the next page can be loaded.
I tried to put my logic in the "onActiveItemChange"-Listener of the carousel, but I had massive problems with adding/removing carousel items. So my Question is is it possible to do what i want to accomplish?
Is there a better alternative? Of course my data is in a store, but I don't want that standard list view.
Another Question: Because my first attempt with the carousel failed i tried to build a Ext.Container (card layout) with the panels on it. But how can I listen to a swipe event on a Panel???
thanks for help ;-)
Even I am doing the same, using carousel & a store. Every page of carousel is a view(panel) which would have 4/6 child views(panels). On store load I am creating those children and then divide them into pages and add those pages to carousel.
This is working fine for me and on activeItemChange I am loading more pages:
activeitemchange: function(container, value, oldValue, eOpts) {
var activeItemIndex = container.getActiveIndex();
var galleryTotal = container.getInnerItems() ? container.getInnerItems().length : 0;
if ((activeItemIndex + 1 == galleryTotal)) {
console.log("At last page, time to load");
var store = this.config.store;
store.nextPage({ addRecords: true });
}
}
I think I understand your issue. Assuming you've got 3 items and you're always viewing the middle one (as you move forward, item 0 gets destroyed and one item gets created). And assuming that each item has an id associated with its location in the list.
var current_item = Ext.getCmp('carousel_name').getActiveItem().getId();
current_item = Number(current_item.replace('item', ''));
//Objects to create
var next_item = current_item + 1;
var previous_item = current_item - 1;
//Objects to destroy
var next2_item = current_item + 2;
var previous2_item = current_item - 2;
//Create items
var createItem = function(item_location, type){
var carousel_item = create_content(item_location);
if(type == 'next'){
Ext.getCmp('carousel_name').add(carousel_item);
}else if(type == 'previous'){
Ext.getCmp('carousel_name').insert(0, carousel_item);
Ext.getCmp('carousel_name').setActiveItem(1);
}
}
createItem(next_item,'next');
createItem(previous_item,'previous');
//Destroy items
if(Ext.getCmp('item'+previous2_item)){
Ext.getCmp('carousel_name').getItems().items[0].destroy();//This is a hack, for some reason with the above commented out line, the item was getting destroyed but wasn't being removed from carousel_name
}
if(Ext.getCmp('item'+next2_item)){
Ext.getCmp('carousel_name').getItems().items[Ext.getCmp('carousel_name').getMaxItemIndex()].destroy();//This is a hack, consistency with previous destroy (above)
}
There is a simple form that has 6 dropdownlists and a gridview. When any of the dropdownlists change the value filters the grid by altering the selectcommand. A user can navigate in another page through a row of the grid.
From the other page a user has a back button that loads the page WITH a querystring which has the values of the dropdownlists.
I want to accomplish 2 things:
1) To put the values in the dropdownlists. This i have done easily.
2) The next thing is to make the grid show data based on this values. this is its normal operation.
I thought that if i add the following code in page load would do the trick but it didnt. I tried all the events but no luck.I can get the dropdownlists to hold the value i want but the grid shows ALL records:
if (!IsPostBack)
{
if (Request.QueryString["ret"] != null)
{
string[] retvalues = Request.QueryString["ret"].Split('_');
Update_Search(retvalues);
dsTodo.SelectCommand = dsTodo.SelectCommand + Build_Where();
GridView1.DataBind();
}
}
The last 2 lines exist in the selectedvaluechange evnets on the dropdownlists and they work fine to filter the grid in normal operation.
You are setting the SelectCommand but you are not executing it. Do this:
dsTodo.SelectCommand = dsTodo.SelectCommand + Build_Where();
dsTodo.Select(DataSourceSelectArguments.Empty);
GridView1.DataBind();
That's assuming that the DataSourceID property of the GridView1 is set to dsTodo.