Custom editor for type

[Jeremy Branham]

I have a composite object with composite properties.

If I add a column that maps to a composite property, it just renders a text box for editing.

 

I would like to specify a custom control for editing the value [object] of a composite property.

 

Can this be done?

 

[Eswari S]

Hi Customer,

 

Your requirement can be achieved by specifying cell edit type as “DropDownEdit”, “NumericEdit”,etc. For your convenience , we have prepared sample and the same can be downloaded from the following link:

 

Editing.zip

 

We request you to check the following online UG link also:

 

http://help.syncfusion.com/ug/asp.net%20mvc/grid/default.htm#!documents/celledittype.htm

 

http://help.syncfusion.com/ug/asp.net%20mvc/grid/default.htm#!documents/databindingsupportfo.htm

 

Please  try this and let us know if you have any queries.

 

Regards,

Eswari S

[Jeremy Branham]

Thank you Eswari -

My requirement is a little more complicated than a drop down list.

 

I have a complex object that has properties that are also complex.
A dropdown box is not sufficient to represent an object with multiple properties.

 

Also, in the case where a dropdown list could work, I am concerned that the dropdown list could grow too large. It would be great to be able to use my own custom control that may provide searching or another custom function.

[Jeremy Branham]

A great way to implement support for this, would be to support the "UIHint" attribute...

 

[UIHint("MyUserControl")]
public virtual int VersionId { get; set; }

[Jeremy Branham]

More examples of where this could be used -

 

Strings that should be restricted to an enumeration.

Person field that needs a search mechanism.

Hierarchical data. (country/state/city, personell, taxonomies, etc...)

 

 

Also, It would also be fantastic if we could decorate the model with dropdown datasources [property attributes] rather than explicitly define it in the view.

 

[Eswari S]

Hi Jeremy,

 

Thanks for your update.

 

Your requirement can be achieved InlineFromtemplate mode and EditorFor. Please refer to the following steps:

 

Step #1 : Set Editmode and editortemplateform

 

   <%=Html.Syncfusion().Grid<EditableOrder>("Grid1")

                                            .Editing( edit=>{

                                                edit.AllowEdit(true)

                                                    .AllowNew(true)

                                                    .AllowDelete(true);

                                                edit.EditMode(GridEditMode.InlineTemplateForm);                                                                                          // set template mode as inlinetemmplate mode

                                              edit.FormModeEditorTemplate("OrderEditorTemplate");        // set partialview of inline template

                                                edit.PrimaryKey(key => key.Add(p => p.OrderID));

                                            }) 

        %>

 

Step #2 : [OrderEditotTemplate]

 

   <div class="celldiv" style="height: auto">

                <%=Html.EditorFor(m => m.OrderStatus) %>   // call EditorFor

            </div>

 

 

Step #3 : EditableOrder model

 

        [UIHint("DropDownList")]

        public IEnumerable<SelectListItem> OrderStatus { get; set; }

 

        public EditableOrder()

        {

            //Fill the list will all the potential selections.

            OrderStatus = new[] {

                new SelectListItem() { Value = "1", Text = "Open" },

                new SelectListItem() { Value = "2", Text = "Validated" },

                new SelectListItem() { Value = "3", Text = "In Progress" },

                new SelectListItem() { Value = "4", Text = "Delivered" }               

            };

        }

 

 

For your convenience , we have prepared the sample and the same can be downloaded from the following link:

 

CrudEdit.zip

 

Please try this and let us know if you have any queries.

 

Regards,

Eswari S

 

[Jeremy Branham]

Thanks for the sample. That helps with the editing piece.

 

What about the display format?
If the Grid would consider the UI Hint attribute, it would be much easier to control the display of a field value so that it matches the edit format.

 

Also, I see a lot of information being posted to the controller that is not in the method signature of the sample. Is there a GridRequestParams object we can add to the signature to grab the data?

 

Thanks again!

[Eswari S]

Hi Jeremy,

 

Thanks for your update.

 

#1 What about the display format?

 

We can set display format using data annotation formats. Please refer to the following code snippets:

 

[DisplayFormat( DataFormatString="{0:dd/MM/yy}")]

        public DateTime? OrderDate

        {

            get;

            set;

        }

 

Please find updated sample:

 

CrudEdit.zip

 

# Also, I see a lot of information being posted to the controller that is not in the method signature of the sample. Is there a GridRequestParams object we can add to the signature to grab the data?

 

We are just passing grid parameters to PagingParams in post action to process grid operations and maintaining some post action values only.

 

Please let us know if we misunderstood any of your query so that we can check and update based on that.

 

Please let us know if you need any further assistance.

 

Regards,

Eswari S

[Jeremy Branham]

Thanks Eswari.

 

Formatting a date is not an issue. I am looking to display a field similar to how the dropdown list displays in the edit mode.

If I create a column that has a dropdown list as datasource, the underlying value is still shown in the grid, not the display text.

I can create a custom format, but that requires creating a new control for every model that has this field.

In my case, there are a lot of models that share foreign keys.

It's not efficient to create custom controls for every model to display the same field.

 

What is the correct way to approach this?

Are there plans to support the UIHint attribute in the grid, or in the default editting forms?

 

Thanks.

[Jeremy Branham]

The Format() method would help, but it accepts the entity as a parameter rather than the property of the current column.

This forces you to create a custom control for every model with that property.

 

If you provide a way to format the display based on the current column value, it could be reused across multiple models/views.

 

Or better, would be support for the UIHint inside the grid, not just in a custom form.

[Eswari S]

Hi Jeremy,

 

Thanks for your update.

 

Your requirement of changing column display based on column value can be achieved using Template column. Please refer to the following code snippets:

 

   <%=Html.Syncfusion().Grid<EditableOrder>("Grid1")

                                  .Datasource(Model)

                         .Column(column =>

                         {

                                                                 . . . . . .

                             column.Add(p => p.CustomerID).HeaderText("Customer ID").TemplateColumn(true).TemplateName("template");// set TemplateColumn as true and specify TemplateName as partial view which contains template

                         })                                                 

        %>

 

[template.ascx]

 

<%if (Model.Verified)  {%>   // control property changed based on Model- Verified column value

 

<input type="checkbox" checked="checked"  />  

 

<%}%>

<%else{%>

 

    <input type="checkbox" />

 

<%}%>

 

Please find the modified sample from the following link:

 

CrudEdit.zip

 

Could you please try with the above sample and let us know if this is satisfies your requirement or please let us know if we misunderstood any of your query.

 

Online sample link:  http://mvc.syncfusion.com/demos/ui/grid/Templates/ServerMode

 

Let us know if you need any other further assistance.

 

Regards,

Eswari S

[Jeremy Branham]

Thanks Eswari -

Unfortunately, the templates are still not generic, so there will be much code duplication.

The current Model instance [while the grid is rendering] is passed to the template rather than the current Model property value.

This means a new template is required for every instance of the column for every instance of a grid.

Whereas, if the property value was passed, the template could be reused.

 

The closest workaround is using the same property name on all models where you want to use the same template.

Then you can use a non-typed view and call the dynamic property.

 

Let me know if I have misunderstood.

 

Thanks!

[Jeremy Branham]

I just realized, if I use a template, the column is no longer editable.

I'm not sure what to do at this point.

[Jeremy Branham]

I also tried using the QueryCellInfo() method to change the Text property value as the grid is being rendered.

Unfortunately, when the grid is refreshed after an edit, the QueryCellInfo() fails to run.

 

There are a few different ways to attempt this, but each have a shortcoming.

It would be great if the convention was -

"If you attach a drop down list data source to a field, it will also use that data source to render the value in the grid, not just the edit dialog"

 

And it would be fantastic if the UIHint attribute was supported inside the grid.

[Eswari S]

 Hi Jeremy

 

Currently, we don’t have support for the feature ‘UIHint support inside grid ’ .This has been confirmed as a feature request and it will be available in our future volume releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We do not provide confidential information in general forum. Please create the new incident in DirectTrac for better follow up.

 

Please let us know if you have any queries.

 

Regards,

Eswari.S