[CLOSED] Showing selected gridpanel row in property grid

[ingbabic]

Hello,
We have a scenario where we want to show selected row of grid panel in property grid. So we set a listener in grid panel, to fill up property grid, on select change like this:

.Listeners(l =>
            {
                l.SelectionChange.Handler = "if (selected[0]) { this.next('propertygrid').setSource(selected[0].data); }";
            })

This works, but it shows more columns then we initially configured for property grid. I guess it is because data property of selected row contains data that we didn't want to reveal. On the other hand it hides special fields (separator) if it is not in data (this separator I wanted to use to group properties).

Html.X().PropertyGrid().Editable(false).SortableColumns(false).Flex(2).Title("Properties")
            .Source(source =>
            {
                PropertyGridParameter pgpString = new PropertyGridParameter("StringProperty", "");
                PropertyGridParameter pgpBoolean = new PropertyGridParameter("BooleanProperty", "");
                PropertyGridParameter pgpSep = new PropertyGridParameter("separator", "");
                PropertyGridParameter pgpDate = new PropertyGridParameter("DateProperty", "");
                PropertyGridParameter pgpInt = new PropertyGridParameter("IntegerProperty", "");
                PropertyGridParameter pgpFloat = new PropertyGridParameter("FloatProperty", "");

                source.AddRange(new PropertyGridParameter[] { pgpString, pgpBoolean, pgpSep, pgpDate, pgpInt, pgpFloat });
                        
            })
            .View
            (
                Html.X().GridView().GetRowClass(grc => grc.Handler = "return record.data.name == 'separator' ? 'my-class' : '';"))
            )

How can I tell to property grid to fill it self up from this object, but only properties which I told to show?
Bellow you see the pictures.

[Daniil]

Hi @ingbabic,

I would recommend to remove not required properties from selected[0].data before passing it to a .setSource() call.

[ingbabic]

Well it works, but unfortunately the data what I want to hide is ID property (long hex number is not really interesting, and not needed at all in UI). If I remove ID from selected[0].data, I will have nice looking view, but all other functionalities dependent on that ID (and that's all) will fail.

Also problem is more then that (I was thinking to join this question with this, but then again I know for a forum rule - one question per thread).
Even if somehow I prepare the data to not show not needed data (and still my app is working), I will lose any information about grouping. So my property grid will look nice before I make selection, but as soon as I select row in grid, my groping will be lost. If I didn't configure in advance property grid then that behavior would be ok, but...

Is it possible to configure it in advance to show only data what I want to be shown and in the way (order, labels, grouping) I want and then to tell, ok my property grid I configured you, here is the object containing data, please show your self with data and please do not reconfigure your self on the fly :)

[Daniil]

I don't think there is a way to configure it as you need.

It looks like I am going to recommend considering a switch to a GridPanel. I mean using a GridPanel instead of a PropertyGrid. It should be easier to implement your requirements with a GridPanel.