Example of custom edit layout, using UniGrid and Modules for initial list

Dave,

Are you building custom interface for objects listing, or Kentico template?

What version of Kentico are you working in? In v8, you can do 95% of your module building from within the UI, there's no need to write much, if any code.

Thanks for writing, guys! (Also, long time, no see, Roman!)

This is on Kentico 8.

I would like a custom interface entirely. I don't want to do the module building in the UI because what I'm trying to do is a bit more complex than a simple grid. I'd rather work on it in Visual Studio. And the data is not a Kentico custom table; it's pre-existing data from another database.

Technically, I still have a module in Kentico. But underneath the module, I don't have a Class. I just have a UI element node defined in the User Interface section so it will show up in the admin console.

Imagine a simple grid, you click an item, then can visibly see the 3-8 colors associated with it, horizontally, along with some other information. (Sort of like a dashboard.) Then you will be able to dig deeper and edit/delete colors too.

I'm trying to use the unigrid because it seems pretty nice in that it can handle the filtering, sorting, paging, etc. The problem is that I just don't understand how to make it pass the correct parameter to the edit/dashboard page I'm creating.

The Kentico documentation examples show multiple ways to do it. In one example it shows to set the EditActionUrl: https://docs.kentico.com/display/K8/Manually+creating+the+interface+for+custom+modules

In another example, it shows to use the OnAction event: https://docs.kentico.com/display/K8/UniGrid

I got it sorta working yesterday by doing a Response.Redirect inside the OnAction handler, and I was able to pass the argument to my page like that. It doesn't seem like the best way, though, because the next problem I had was how to make a back button work. If you click your browser's Back button while in the Kentico admin console, it doesn't always work properly. I wanted that little sidebar with the back button to show up, and I couldn't figure out how to add that. So I think I'm missing something.

Am I making this too hard?

Thanks, Dave

Dave,

Not sure this will help in your case, but what if you'll implement a objectInfo class along with objectInfoProvider for your module, just without table in database for it, so objectInfo will be a DTO object for your external data and info provider will be a data source for it. This approaches you to Kentico best practice and allow you keep using Kentico features.

Implementing suggested approach you should be able to use grid definition XML + Extender class, which allow you to reach your goal.

Also, I'd recommend you to implement custom web part to edit your object instead custom page, this will allow you to access your object via UIContext.EditedObject property, which should be your DTO object.

But why do I want a UIContext.EditedObject? Where are the Kentico Best Practices you mention? Is there another tutorial somewhere on how everything works together?

I've been trying to understand a simple module -- BadWords, for example. I'm learning a little bit from that now.

Dave

Dave,

You're looking for object ID, I'm suggesting you even more - entire object.

Unfortunately you can't find Kentico best practice in one place, some of them are mentioned in Documentation, in Arlicles, in different blogs across the internet.

Thanks for the advice. I may go that route eventually, but it seems like overkill to have to do all that. We're thinking of moving over a lot of our intranet pages that have very custom layouts into Kentico, so I wanted to learn how to do it.

This is what I've got working at the moment.

• Created the following UI Elements:
  • Floorvana (main module)
    • Color Data (pointed to an actual aspx page)
      • Edit (portal page, just so I can have breadcrumbs and back button; couldn't figure out how to make this work otherwise)
        • General (pointed to another edit aspx page)
• Created a UniGrid on my main list page (Color Data)

Then I added code like this in Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
    // Registers the default CSS and JavaScript files onto the page (used to style the UniGrid)
    CSSHelper.RegisterBootstrap(Page);
    ScriptHelper.RegisterBootstrapScripts(Page);

    ColorGrid.OnDataReload += ColorGrid_OnDataReload;
    ColorGrid.OnAction += ColorGrid_OnAction;
}

protected void ColorGrid_OnAction(string actionName, object actionArgument)
{
    if (actionName == "edit" && actionArgument != null && !String.IsNullOrEmpty(actionArgument.ToString()))
    {
        // Stores the values of the actionArgument argument (InventoryId)
        string inventoryId = ValidationHelper.GetString(actionArgument, String.Empty);

        string editUrl = UIContextHelper.GetElementUrl("CMS.Floorvana", "Floorvana.ColorData.Edit");
        editUrl = URLHelper.AddParameterToUrl(editUrl, "inventoryid", actionArgument.ToString());
        URLHelper.Redirect(editUrl);
    }
}

Then, I added this in my edit page aspx:

[UIElement("Floorvana", "Floorvana.ColorData.Edit.General")]
public partial class CMSModules_Floorvana_ColorData_Edit_General : CMSPage
{
    protected string _inventoryId = String.Empty;

    protected override void OnPreInit(EventArgs e)
    {
        // Get inventory id from querystring        
        _inventoryId = QueryHelper.GetString("inventoryid", String.Empty);

        // Must be called after the master page file is set
        base.OnPreInit(e);
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        InventoryIdLabel.Text = _inventoryId;
    }
}

Dave