This is a migrated thread and some comments may be shown as answers.

MVC Grid client side Updating

1 Answer 377 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Ruairi
Top achievements
Rank 1
Ruairi asked on 11 Feb 2015, 04:37 PM

I have a MVC Grid as declared below what I want to do is instead of using the popup editor I want to edit and create rows in a custom template.
The 'GridFieldDefinitions_EditClick' function pops up a dialog and inserts my custom template 'templateField' into it. Basically any edits I make to the template I want reflected in the grid then I'll do my own custom batch Save to save all changes I did in the grid.
I'm having some problems reflecting the template changes into the grid.

1. Should these changes not be refelected automatically from my template?
2. If they are not why not?
3. If they are not meant to then I propose to use the Template Save button 'updateGridField' onClick method to reflect the cahnges to the grid - is this possible? 


My template is as follows:

<script type="text/x-kendo-tmpl" id="templateField">
  <div class="divFields">
    @*<div style="overflow:auto; width:100%; height:10em; border:1px solid;">*@
    <div>
      <table class="tbl2Cols">
        <tr>
          <td>Uid</td>
          <td>#= data.uid #</td>
          </tr>
        <tr>
        <tr>
          <td>Oid</td>
          <td>#= data.oid #</td>
        </tr>
        <tr>
          <td>Key</td>
          # if (data.oid) { #
          <td>#= data.key #</td>
          #} else { #
          <td>
            <input class="k-textbox k-textbox person" data-val-required="The Key  is required." id="key" name="key" style="width:100%" />
            <span class="requiredAfter"></span>
            <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="key"></span>
          </td>
          # } #
        </tr>
        <tr>
          <td>Label</td>
          <td>
            <input data-bind="value:label" class="k-textbox" id="label" name="label" style="width:100%" value="#= data.label #" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <div id='#= data.uid #' class="k-button" onclick="updateGridField(this);" data-rowid="#= data.uid #">Save</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</script>




My MVC Grid
@(Html.Kendo().Grid<field>()
  .Name("GridFieldDefinitions")
  .HtmlAttributes(new { @class = "ignore" })
  //.ToolBar(toolbar =>
  //{
  //  if (pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)
  //  {
  //    toolbar.Create().HtmlAttributes(new { @class = "ignoreDirty" });
  //  }
  //})
  .Scrollable(s => s.Height("auto"))
  .Columns(columns =>
  {
    if (pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)
    {
      columns.Command(command => command.Custom("Edit").Click("GridFieldDefinitions_EditClick"));
    }
    columns.Bound(p => p.order).Title("").HtmlAttributes(new { @class = "noEdit noCreate" }).Width(50);
    columns.Bound(p => p.key).Title("Key").HtmlAttributes(new { @class = "noEdit", @disabled = true }).Width(150);
    columns.Bound(p => p.label).Width(200);
    columns.Bound(p => p.valueLength).Title("Length").Width(100);
  })
  .Events(e => e.Edit("GridFieldDefinitions_onEdit"))
  .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .PageSize(40)
    .Model(model =>
    {
      model.Id(p => p.oid);
      model.Field(p => p.oid).Editable(true);
    })
    .Events(e => e.Error("handleAjaxError"))
    .Read(read => read.Action("FieldDef_Read", "Forms", new { recordTypeOid = Model.Entity.Oid }))
  )
)

1 Answer, 1 is accepted

Sort by
0
Ruairi
Top achievements
Rank 1
answered on 12 Feb 2015, 04:13 PM
I've a solution to this.
Basically I use the grid for displaying data and row sorting only. On the form I also have a dialog with a partial View displaying the row template I require.
On each row I have a custom Edit command which calls javascript to do the following:

Update the dialog based on the editing row data.
Open dialog.
When I click the save button on the dialog I call javascript to update the grids underlying datasource as below:

function GridFieldDefinitions_UpdateGridField(e) {
  var rowDirty = false;
  var row;
  try {
    var uid = $('#rowUid').val();
    var grid = $("#myGrid").data("kendoGrid");
 
    //Update existing row
    if (uid) {
      row = grid.dataSource.getByUid(uid);
      var searchCriteriaDiv = "#tblFieldData";
      $(searchCriteriaDiv)
        .find('input, select, textarea')
        .not(':input[type=button], :input[type=submit]')
        .each(function () {
          var name = $(this).attr("id");
          switch (name) {
            case "key":
            case "label":
            case "fieldType":
            case "valueLength":
            case "searchable":
            case "access":
            case "active":
              var val = this.value;
              row.set(name, val);
              break;
            default:
              break;
          }
        });
 
      if (rowDirty == true) {
        row.set("dirty", true);
      }
    }
 
    //Close dialog
    $("#dialogField").data("kendoWindow").close();
  }
  catch (err) {
    alert("Error:" + err.message)
  }
}


I hope this helps someone.
 
Tags
Templates
Asked by
Ruairi
Top achievements
Rank 1
Answers by
Ruairi
Top achievements
Rank 1
Share this question
or