Load Blazorise DataGrid DetailRow from server - datagrid

The "Blazorise DataGrid extension" supports Master/Detail. How does one load detail data, say from a server, when a user click on its parent in master table?
In example of DataGrid extension I can use "selectedEmployee" property to find out what master row selected but the main problem is "how to reload child data from server when master row clicked?"
<DataGrid TItem="Employee"
Data="#dataModels"
EditMode="#editMode"
Editable="#editable"
Sortable="#sortable"
Filterable="#filterable"
ShowPager="#showPager"
RowInserted="#OnRowInserted"
RowUpdated="#OnRowUpdated"
RowRemoved="#OnRowRemoved"
UseInternalEditing="true"
#bind-SelectedRow="#selectedEmployee"
DetailRowTrigger="#((item)=>item.Salaries?.Count > 0 && item.Id == selectedEmployee?.Id)"
IsStriped="true"
IsBordered="true"
IsHoverable="true">

You need to use event ReadData along with TotalItems property on your sub-datagrid. Sample usage can be found on Blazorise documentation.
<DataGrid TItem="YourSubModel"
Data="#yourSubModelList"
ReadData="#OnReadData"
TotalItems="#totalSubModels">
</DataGrid>

Related

Display Image to RepositoryPictureEdit in gridView of DevExpress...?

I am working in DevExpress Gridview Concepts. I require one User Image in my grid field. i m working in winforms platforms.
My Datatable has only path of image. I dont know how to bind an image to repositoryPictureEdit Control
Kindly provide any solution.
You could using a ImageEdit. This is a dropdown of Images. So you generate Images first via:
Image.FromFile(Path);
Add them to a List or ImageList and fill the dropdown with it. Then you just bind the index of the picture to your column.
I hope this is able to work in your case.
edit: OR
At first you have to create a UnboundColumn in your Grid. Just create a column and set the Property 'UnboundType' to object. Then set a RepositoryPictureEdit as ColumnEdit. Now you have a Column which got a pictureedit in each row. To populate the Images you can handle the CustomUnboundColumnData event. This event you can find on the GridView.
To accomplish this task do following:
Run GridView Designer -> Change to columns at the left side
Add Column
In the Propertywindow ->
set the Columnedit to repositorypictureedit
set the UnboundType to object
Activate the CustomUnboundColumnData event (you can find in the
GridView) -> this event fires on loading Grid for every cell.
With e.ListSourceRowIndex you can get the row of your datasource appending to the unboundcolumn. So you could do following:
private void gridView1_CustomUnboundColumnData(object sender, DevExpress.XtraGrid.Views.Base.CustomColumnDataEventArgs e)
{
if (e.Column.Name == "MyColumn")
{
clsTest test = myListAsDataSource[e.ListSourceRowIndex];
e.Value = test.Bild;
}
}
I hope this can help you.

Button to Show a Window from Listbox Row

I want to create a button that can show a window to show details of elements in listbox when it's clicked. the listbox itsetf was created from a list of JSONObject like this:
<listbox id="userListbox">
<listhead>
<listheader laber="Action"></listheader>
<listheader label="Id"></listheader>
<listheader label="Name"></listheader>
<listheader label="Address"></listheader>
<listheader label="Phone"></listheader>
</listhead>
<listitem forEach="${userController.list}">
<listcell>
<button label="Detail" id="detailButton"></button>
</listcell>
<listcell label="${each.id}" ></listcell>
<listcell label="${each.name}" ></listcell>
<listcell label="${each.address}" ></listcell>
<listcell label="${each.phone}" ></listcell>
</listitem>
</listbox>
for every row (listcell) there is always a button to show the details. but when I load the page, it failed to show the list with error message:
Not unique in ID space < Window cP8Q0#userWindow>: detailButton.
any idea to show a window when the button clicked? here is the code when button is clicked:
#Listen("onClick = #detailButton")
public void showModal(Event event) {
Component comp = Executions.createComponents("/widgets/window/modal_dialog/employee_dialog.zul", null, null);
if(comp instanceof Window) {
((Window)comp).doModal();
}
}
thank you for your help.
The problem is that if you click on different buttons you are running the createComponents again and again. Your employee_dialog.zul is only safe to include into the page once as it has IDs in it; if you do the operation twice you are creating a second set of components with the same ID and the IDs should be unique within a given idSpace (see the ZK developer guide for the theory).
There are other issues here: why create the components twice? Why not keep one and only one set around, showing and hiding them based on button clicks. That is more efficient.
Look at Button to Show a Window from Listbox Row which shows that you can:
<zk>
<!-- hidden -->
<window id="wnd" title="My Modal" visible="false" width="300px">
<button label="close" onClick="wnd.visible = false"/>
</window>
<!-- click button to pop the hidden window! -->
<button label="do it" onClick="wnd.doModal()"/>
</zk>
So you can use a
<include src="/widgets/window/modal_dialog/employee_dialog.zul">
to pull the model dialog into the bottom of the main page once and only once. Then in the code you can set the data into it and do
win1.doModal();
where win1 is the modal window defined in the fragment. You have to tell the model window what to display before you pop it but that is not hard. Use desktopScope.put( "myName", this) to have the controller/view-model of the dialog box register itself in a location where the controller/view-model in the main window can find it and talk to it to pass it the data to render.
Two other tips.
Hide your fragments as /WEB-INF/zul/employee_dialog.zul as anything under WEB-INF cannot be directly accessed by a browser for better security.
Try not to put any zul into your java. That is mixing behaviour with presentation. Sometimes it is unavoidable but always try first to keep the zul in the zul then interact with it via java IDs only (much like my suggestion). It is not always possible but separation of logic from layout is a core design pattern.
Simon
<button label="Detail" />
#Listen("onClick = listbox listitem listcell button")

Telerik RadComboBox AutomaticLoadOnDemand

I use Telerik RadComboBox in my project. I set EnableAutomaticLoadOnDemand="true" on RadComboBox. It works good but when I want to set selected item on load of page event, it doesn't show selected item
With load on demand mode, so combobox does not have any item. It just has item(s) when you action on it.
In my opinion, you should get the specific item and add it to combobox manually on page load event like this way (I'm not sure the structure, just an idea.)
if (!IsPostBack)
{
var itemSelected = service.GetById(Id); //item Id
this.combobox.Items.Add(new RadComboboxItem(itemSelected.Id, itemSelected.Name));
this.combobox.SeletedValue = Id.ToString();
}
RadCombo allows to set up SelectedValue and Text properties even through there are no items in it.

Why are my ASP.NET checkboxes always false?

I'm working on a ASP.NET web forms application. I have a four-column listview, bound to a datasource on pageload(), populated with contact names. One of the columns contains a checkbox. Users select a checkbox to indicate the corresponding contact should be processed in the next step.
The form also contains a button. When this button is clicked, the following code runs to process the selected contacts.
foreach (var x in lvPeople.Items)
{
chkSelected = (CheckBox)x.FindControl("IsLetterRecipient");
if (chkSelected.Checked)
{
// the person was selected by the user, do stuff here...
}
}
When I set a breakpoint on the line containing the IF statement, the breakpoint gets hit seven times (once for each row in the listview == seven checkboxes). However, the code inside the IF block never runs because .Checked is always False, regardless of the whether or not the checkbox is actually checked.
AutoPostBack, on the checkbox, is set to False. EnableViewState on the checkbox and listview is set to True.
What am I doing wrong? How do I get the .Checked status of the checkboxes?
Probably, when you bind the data on Page_Load you forgot to do:
if(!IsPostBack)
{
//bind the data to the list
}

Flex ComboBox, default value and dataproviders

I have a Flex ComboBox that gets populated by a dataprovider all is well...
I would now like to add a default " -- select a item --" option at the 0 index, how can I do this and still use a dataprovider? I have not seen any examples of such, but I can't imagine this being hard...
If you don't need the default item to be selectable you can use the prompt property of ComboBox and set the selectedIndex to -1. That will show the string you set propmt to as the selected value until the user chooses another. It will not appear in the list of options, however.
I came across this problem today and wanted to share my solution.
I have a ComboBox that has an ArrayCollection containing Objects as it's dataprovider. When the application runs, it uses a RemoteObject to go out and get the ArrayCollection/Objects. In my event handler for that call I just have it append another object to the beginning of the ArrayCollection and select it:
var defaultOption:Object = {MyLabelField: "Select One"};
myDataProvider.addItemAt(defaultOption, 0);
myComboBox.selectedIndex = 0;
This is what my ComboBox looks like for reference:
<mx:ComboBox id="myComboBox" dataProvider="{myDataProvider}" labelField="MyLabelField" />
The way I've dealt with this in the past is to create a new collection to serve as the data provider for the combobox, and then I listen for changes to the original source (using an mx.BindingUtils.ChangeWatcher). When I get such a notification, I recreate my custom data provider.
I wish I knew a better way to approach this; I'll monitor this question just in case.
This can be used following code for selected default value of combobox
var index:String = "foo";
for(var objIndex:int = 0; objIndex < comboBox.dataProvider.length; objIndex++) {
if(comboBox.dataProvider[objIndex].label == index)
{
comboBox.selectedIndex = objIndex;
break;
}
}
<mx:ComboBox id="comboBox" dataProvider="{_pageIndexArray}" />

Resources