MVC Grid client side Updating

2 posts, 0 answers
  1. Tyler
    Tyler avatar
    47 posts
    Member since:
    Nov 2013

    Posted 11 Feb 2015 Link to this post

    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 }))
      )
    )
  2. Tyler
    Tyler avatar
    47 posts
    Member since:
    Nov 2013

    Posted 12 Feb 2015 in reply to Tyler Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top