I have an EnhancedGrid which is bound to a dynamic Store. I am using lazy loading, so as I scroll down, more data will be fetched and bound.
I also have an "add new Item" functionality. This will open a pop-up where the user creates the new Item in a form, and on Save the item is added to the store. with dojo.data.ObjectStore.newItem() and dojo.data.ObjectStore.save().
My problem, after using those two functions, the item is automatically appended to the grid at the bottom, which is kinda of a nuisance. The user will have to scroll down to find it, which would trigger the lazy loading.
After following the code around, I found out that newItem() calls the dojox.grid.DataGrid._addItem(item, index, noUpdate) function.
I managed to overwrite it so when I am adding a new item, the _addItem function will be called with index 0. But that does not work since it was just replacing the first row with the new one instead of prepending it.
Is there any other way to look at this? is it possible to actually do it?
Related
I have a set of multilevel data to be display using abovementioned component. Usually in PHP I simply iterate the data to display it as li but coming from web background, I just can't put it all together when using react-native. What is the right way to display a set of menu
FYI, I'm also using react-native-router-flux to manage the router.
If you want to build you own menu, you'll have to customize the renderRow of your ListView. If you take a look at RN's official doc on ListView here, it shows that you can specify a sectionID, for example.
You can then specify how each row renders.
renderRow: function (rowData, sectionID, rowID, highlightRow) => renderable
Takes a data entry from the data source and its ids and should return
a renderable component to be rendered as the row. By default the data
is exactly what was put into the data source, but it's also possible
to provide custom extractors. ListView can be notified when a row is
being highlighted by calling highlightRow(sectionID, rowID). This sets
a boolean value of adjacentRowHighlighted in renderSeparator, allowing
you to control the separators above and below the highlighted row. The
highlighted state of a row can be reset by calling highlightRow(null).
Another option is using open source modules built by the community.
The one closest to your needs I could find is : https://github.com/jaysoo/react-native-menu
Is what I am trying to do in this gist possible?
https://gist.run/?id=bea803b05ad8d5b5e3e0afd59bb8dbb1
In app.html, I'm trying to use a repeat.for to create a custom element called button-row
In app.js, I'm creating two button row instances which I then place into a button row array so that I can use the repeat.for to iterate over it and create the button rows on the app.html view.
In button-row.html, I have a repeat.for to create the buttons using the btns array and setting the name of the button.
In button-row.js, I have two properties. label is the label for the button row and btns is the array of all the button names I want to create.
Sorry if this is a noob question, I have only been working with web development and aurelia for about a month.
Instantiating the ButtonRow objects yourself won't work. Aurelia instantiates the instances. you'll need to use the binding system to pass in the information to the custom element. I updated your gist here: https://gist.run/?id=6ec71143f566571960b7a182d4d98ed4
Also, you should refrain from abbreviating words like "Button" let your tooling save you the keystrokes, while making your code more readable :-)
I have an MVC/angularJS page with a button, the button needs to call code to process the current page and proceed to the next step in the application, but they want the button text to be a/b testable with different variations. I'm new to Sitecore so am struggling to know the best way of doing things.
I thought of having a simple text component/template which just has a single line text property, but if I add that to the page template then it doesn't seem a/b testable because when you click on the test option it asks you to select content. Whereas the content was text they entered as part of the page template.
The only way I know of making a/b testable content so that they can click on the page in page editor and choose to select content / add test variation. I wouldn't add the button to the placeholder as it needs to call specific angular code and always be there, but should I be adding a placeholder where the text is? It seems like overkill to have to define a placeholder there, define a rendering, create a partial view, define placeholder settings to limit it to the simple text component, and then hope they don't try adding multiple items to the placeholder.
I would make a separate template (ie with the text field for your button) to represent your form, then either create the two test variation items as children of your page, or maybe place them in a shared components folder outside of your 'home' node.
EDIT
In order to move your form component into a new A/B testable component you would need to create a new Sublayout in Sitecore, then create a new ascx control for the sublayout. In the Page_Load handler of this control, you would use the following code to retrieve the datasource of the sublayout:
//assume you have a button on your usercontrol called btnSubmit
//assume your template has a single-line text field called 'SubmitButtonText'
Guid dataSourceId;
Sitecore.Data.Items.Item dataSource;
if (Guid.TryParse(sublayout.DataSource, out dataSourceId))
{
dataSource = Sitecore.Context.Database.GetItem(new ID(dataSourceId));
btnSubmit.Text = dataSource["SubmitButtonText"];
}
So I created a new template which just had a single line of text as a field, and added a content item in a shared data node.
In my partial view:
#model Digital.Models.SimpleTextItem
<button ....>
<span class="hidden-xs">#Model.SimpleText_Value<br></span>
</button>
In my main page - I was trying to statically bind it so that they could only change content rather than add new controls to the placeholder, but that only worked if I specified the datasource in this page.
Using a rendering, and in the page layout adding the rendering to the placeholder with a specified data source:
#Html.Sitecore().Placeholder("PremiumQuoteApplyNowPlaceHolder")
Not sure if it was the best approach but it achieves what I need it to.
A/B testing could be applied only to controls(XSLT renderings, sublayouts, action controller renderings, view renderings). If you want to make A/B testing only for button then you should create additional control for it as you did.
Technical details for MVC: A/B testing is applied on mvc.customizeRendering pipeline where rendering arguments are processed. This pipeline operates on renderings level. It means that you are not able to create A/B testing for particular field(button) without your own customization.
I have problem in DOJO with DataGrid. I refresh my grid on every 1 sec with this code
window.store_data_log= new dojo.data.ItemFileReadStore({data:{items:temp}});
var grid = dijit.byId("grid_log");
grid.setStore(window.store_data_log);
and it works fine ( put new data ). Problem is that when I have lot off rows and I scroll down, my grid refreshs and my scroll goes on top grid. How to solve this ?
Of course, you are totally clearing the store and resetting it every second from scratch. When you reset the store, you basically reset the grid. I would expect nothing less than the grid resetting the scroll position when you refresh its store.
You may want to learn how to properly use the store rather than just trying to reset it. I answered this here:
How to refresh datagrid
If you use dojo properly, you will get good results, but by just taking a shortcut and trying to refresh the store every second you are going to get an unusable grid.
You need to take a step back and solve your application architecture and not expect the grid refresh to be some kind of magic solution.
After going through (dojo) datagrid.js, I found how to resolve the issue:
//datastore you're using//
var store = new dojox.data.QueryReadStore({
//in the fetch()//
fetch: function (request){
//add the following://
request.isRender = false;
}
});
Important: Only set request.isRender to false when you don't want the grid to scroll back to the top. Just keep in mind that some situations (like sorting on a new column), it's probably best to set it to true. Just add some if/else statements to help with the logic.
I am trying to delete the selected record from the drop-down grid.
In trying to do this, I've so far learned that DSOperationType.FETCH is called when the fetchData() method is called on ValuesManager class. So now I want to know what line should be executed for calling DSOperationType.REMOVE.
Or is there a better way to accomplish this task?
DSOperationType.REMOVE will be called only when removing data/row from list grid or tree grid. It can be triggered functionally by calling ListGrid.removeData(someData) or ListGrid.removeSelectedData();
But for ComboBox/SelectBox (DropDown) type item there is no functionality to remove data from list as it can only be selected from a list of data (while loading data for list FETCH operation will be called).
You can implement the functionlity indirectly by using Combobox/SelectItem with listgrid - (ex:http://www.smartclient.com/smartgwt/showcase/#dropdown_grid_combobox_category). In listgrid you can have remove data functionality. Also check other types of functionality that can be implemented with combobx http://www.smartclient.com/smartgwt/showcase/#multi_select_combobox_category