[CLOSED] GridPanel, MVC, Editor

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] GridPanel, MVC, Editor

    Is there a way to use the "editorFor" construction when building out a GridPanel in Razor? For example, I have this grid:

    @(Html.X.GridPanel().ID("grdCedents") _
          .Layout(LayoutType.Fit) _
          .SortableColumns(False) _
          .EnableColumnHide(False) _
          .MinWidth(500) _
          .Border(True) _
          .ColumnModel(Sub(action)
                           action.Add(Html.X.Column().Text(" ").Width(30))
                           action.Add(Html.X.Column().Text("Client Name").DataIndex("ClientName").Width(230))
                           action.Add(Html.X.Column().Text("Code").DataIndex("Code").Width(50).Align(Alignment.Right))
                           action.Add(Html.X.DateColumn().Text("Unsigned<br/>Doc Sent").DataIndex("UnsignedDocSent").Align(Alignment.Right))
                           action.Add(Html.X.DateColumn().Text("Signed<br/>Doc Sent").DataIndex("SignedDocSent").Align(Alignment.Right))
                           action.Add(Html.X.DateColumn().Text("Signed<br/>Doc Received").DataIndex("SignedDocReceived").Align(Alignment.Right))
                           action.Add(Html.X.CheckColumn().Text("Track<br/>Dates").DataIndex("TrackDates").Width(50).Align(Alignment.Center))
                           action.Add(Html.X.CheckColumn().Text("Never<br/>Signing").DataIndex("NeverSigning").Width(50).Align(Alignment.Center))
                       End Sub) _
          .Store(Sub(action)
                     action.Add(Html.X.Store().ID("docCedentStore").AutoLoad(True).DataSource(Model.CedentInformation) _
                     .Model(Sub(mdl)
                                mdl.Add(Html.X().Model.Fields(Sub(fields)
                                                                  fields.Add(Html.X.ModelField.Name("ClientName"))
                                                                  fields.Add(Html.X.ModelField.Name("Code"))
                                                                  fields.Add(Html.X.ModelField.Name("SignedDocReceived").Type(ModelFieldType.Date))
                                                                  fields.Add(Html.X.ModelField.Name("SignedDocSent").Type(ModelFieldType.Date))
                                                                  fields.Add(Html.X.ModelField.Name("UnsignedDocSent").Type(ModelFieldType.Date))
                                                                  fields.Add(Html.X.ModelField.Name("TrackDates").Type(ModelFieldType.Boolean))
                                                                  fields.Add(Html.X.ModelField.Name("NeverSigning").Type(ModelFieldType.Boolean))
                                                              End Sub))
                            End Sub) _
           .PageSize(20).RemotePaging(False) _
           )
                 End Sub)
          )
    For the date columns, is there any way to use this type of construct:
    .Editor(html.X.EditorFor(function (model) model.MyDataCollection(currentOne).UnsignedDocSent))
    If not, what is the best practice way to build out the editor in Razor?
    Last edited by Daniil; Aug 30, 2012 at 6:12 PM. Reason: [CLOSED]
  2. #2
    Hi,

    1. Why don't you want to use DateField?
    Html.X().DateField()...
    2. If you want to use EditorFor then define own template in "Shared/EditorTemplates" folder of your Views folder

    MVC Examples Explorer cotains examples with EditorFor
  3. #3
    Apologies, but I don't think I completely understand. I do want to use a datefield editor. Are you saying to use "DateField" when designing the model section of the grid? Further, I would absolutely love to use templates as a way to generate the correct editor and not have to configure it. However, from the sample I downloaded, there are no templates for the basic fieldtypes and I am trying to figure out ways to configure properties, validation, etc.

    Also, I am fairly new to MVC and very new to your UI tools, so please bear with me. With that, to clarify my original request to your response, if I have a model with a date property, the correct way to configure the grid is to add that in the model as a "DateField." Then, if I have a template in place for date, and I add the CellEditing plugin, the grid will simply "know" what editor to use and I will not need to configure the editor property, correct? If that is not correctly, again apologies for my ignorance, but a little coaching would be appreciated.
  4. #4
    I am not sure how model field is related with column editor
    Column editor retrieves value from current record only and doesn't submit own value to server therefore bind editor with model has no sense at all

    EditorFor MVC extension method just renders predefined template (you can define own or will be used standard) according type of bound value

    Then, if I have a template in place for date, and I add the CellEditing plugin, the grid will simply "know" what editor to use and I will not need to configure the editor property, correct?
    Sorry, I am not sure that correctly understood you. Can you elaborate it?
    EditorFor and column Editor are not related with each other
  5. #5
    Ok. Maybe I am not explaining myself clearly so let me rephrase:

    I have a grid that needs to be editable - for certain columns. Of the editable columns, some of those are dates. What I want to be able to do is to bind my grid to my model and I want the grid to automatically expose a datepicker for the editable fields of date type. (I do not care if the datepicker is visible all the time, if it requires a double-click on a cell or even a button click. I will go with what is easiest or preferred for Ext.) I want to save any grid changes via a batch update, and I would like to pass an object from the view to the controller method in a manner like this Update(byval myGridData as List(of MyCustomObject)) with all the properties hydrated with the new values from the view.

    Now, I understand passing the store back and forth, and I am fine with altering the above method to use a store model instead of my custom object. For this post, we can ignore that part. However, what I don't understand is the "binding" to the model with the grid, and switching from read to edit mode - correctly. Maybe I am using the wrong Ext terminology for model field or column editor, etc. However, any other UI tool I have used, I have never had to manually configure editing for a grid - it is built in. Further, for other MVC/UI tools, I have received "default" display/editor templates for the "normal" data types (date, boolean, integer, etc.) which can be altered/extended as needed, but by default are used when binding a model to a grid, or can be overridden via a UIhint in a data annotation. So, again, please excuse my ignorance to your methodolgy, but that is what I am trying to figure out - best Ext practice, if you will. With that, from my scenario above, how should configure my grid? You may feel free to completely ignore the code I provided and provide a simple model and view for the sake of brevity and simplicity.

    Finally, as a tanget - The 2.1 MVC sample project is really helpful. It could stand to have more scenarios and advanced examples, but I know you guys are adding to it regularly. As such, how often (realistically) should I check for updates?

    Thank you in advance for your assistance.
  6. #6
    At this moment, grid is not related with model at all
    All stuff (columns, editors and etc) must be configured manually (like in webform application)

    I hope we will be able to provide good example soon (in MVC examples explorer)
  7. #7
    Ok. Well, that is good to know. So, in lieu of the grid being "wired up" to a model, what is Ext's recommendation for "table-like" editing in MVC to take full advantage of binding, validation, data-annotations, etc. ? Pop-up forms? Skip MVC/use brute force? Or, something else?
  8. #8
    So, in lieu of the grid being "wired up" to a model, what is Ext's recommendation for "table-like" editing in MVC to take full advantage of binding, validation, data-annotations, etc. ?
    I am not sure yet, how do you want to bind model object to store (expects collection). As I know validation, data annoations are designed for separate fields (not tabular data) (i can be wrong)
  9. #9
    Well, I don't want to overtly compare you to other UI tools, but if you search for some of the big ones and MVC, you can see samples of this in practice. Still, from my experience, when a grid is in read mode, you are dealing with the collection, but in edit mode, the UI tool operates on a single instance of the collection and that's where your data validation, annotations, etc. can operate from the model design. However, most grids I have worked with in Visual Studio have automatically wired read/edit/add modes without any notion of "plugins." Further, in code design, the grid is wired directly to the model via the concept of Grid(of Model) and inline delegates - (the "store" does not need manual creation or configuration). From that point, the developer can choose to use annotations and validation from the model or the developer can configure those in the view. Once in edit (singular) mode, the process of reflection can kick in to render the editable column's template based on the model's datatype for that bound column. This works well - even for complex types. Different UI tools I have encountered have a variety of editing options for a grid. Some offer "inline" editing only, while others offer that as well as an option for a popup form, association to a form (region of the page) or association to a form (connected to the grid - usually with a row expansion and the form underneath the row's data).

    For your grid, I can see a popup form or an associated form to capture the MVC benefits, but then there is the manual process of "syncing" the grid and the form. Will operating on a store and setting a grid to "autosync(true)" make that an automated process or would even that still require manual manipulation for synchronization?
  10. #10
    As I see other toolkits, they just submit one row (edit one row and submit fields for one row)
    Ext.Net (ExtJS) uses another approach, all changes are wrote to a store and the store sends data in json format (several rows can be)

    At this moment, you have to convert json data to required server side object manually, see
    https://examples2.ext.net/#/GridPane...ns/WebService/

    We are planning to improve work with grid/store in MVC and add appropriate sample but at this moment, all (grid, store and saving) should be configured manually
Page 1 of 2 12 LastLast

Similar Threads

  1. GridPanel with editor
    By Vaishali in forum 1.x Help
    Replies: 0
    Last Post: Mar 15, 2012, 8:46 AM
  2. RadioGroup as Editor in GridPanel - Possible?
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Jan 12, 2012, 12:01 PM
  3. GridPanel Editor field help
    By venu.sn2009 in forum 1.x Help
    Replies: 2
    Last Post: Jul 14, 2011, 8:20 AM
  4. [FIXED] [1.1.0] GridPanel editor's bug
    By zhangsir199 in forum Bugs
    Replies: 5
    Last Post: Jul 11, 2011, 4:42 AM
  5. A problem with gridpanel editor
    By wxmayifei in forum 1.x Help
    Replies: 2
    Last Post: Nov 16, 2010, 8:36 AM

Tags for this Thread

Posting Permissions