Grid Updates and Setup

[Joe]

I was hoping this project would just disappear, but unfortunately it has not.  And I'm beating my head against a wall to get this thing figured out.

I'm building a CSV file uploader, which upon upload it opens the CSV file and parses out the column headers.  It then presents this in a grid with an additional column that contains a dropdown.  It's to be used for custom CSV imports.  Once the grid is displayed, the user would go down each row, mapping a column to a property.

The grid is being loaded via one of the ViewModel properties.

@using FileUploader_Mapper.Models
@model CSVColumnsViewModel

@{
    ViewBag.Title = "Result";
}

<style>
    .k-grid td {
        line-height: 2em;
        padding: 0 0 0 1em;
    }
</style>

<h2>Result</h2>

<p></p>

@(Html.Label("lblMisc", "Columns from CSV File: " + Model.CSVFile))<br/>

@(Html.Kendo().Grid(Model.Columns)
    .Name("csvGrid")
    .HtmlAttributes(new { style = "width: 650px" })
    .TableHtmlAttributes(new { @class = "table-condensed" })
    .Columns(col =>
    {
        col.Bound(c => c.ColumnNumber).Width(25).Title("Col #");
        col.Bound(c => c.ColumnName).Width(400).Title("Column Name");
        col.ForeignKey(c => c.MappedTo, Model.MappingProperties, "Id", "Name").Title("Mapped To");
    })
    // .Pageable()
    .DataSource(ds => ds
        .Ajax()
        // .PageSize(20)
        // .ServerOperation(false)
        .Model(m =>
        {
            m.Id(c => c.ColumnNumber);
            m.Field(c => c.ColumnName).Editable(false);
            m.Field(c => c.MappedTo).DefaultValue(0);
        })
        .Update("SaveCSVDefinition", "Home")
    )
    .Editable(editable => editable.Mode(GridEditMode.InCell))
)

 

 You'll notice I have an Update method specified, but the method in the controller never gets called.  Am I correct in assuming the Update will only work if there is also a Read and Create?  I do not want to use AJAX to read the data to populate the grid, it's already right there in the view model, which is exactly what I want.  But I also want to get the mapped columns as well, but I never get anything.

 

Oh, and here's the controller code for now...  Even though it doesn;t really do much.  Yet.

[HttpPost]
[ActionName("SaveCSVDefinition")]
public ActionResult SaveCSVDefinition([DataSourceRequest]DataSourceRequest request, CSVColumn csvColumn)
{
    return Json("saving", JsonRequestBehavior.AllowGet);
}

So how do I get these updates to post to the controller? Ideally, I'd much rather save the whole thing at once, and even had a button with a click, but I couldn;t figure out how to get the model back out of the grid in order to post it via AJAX.

[Joe]

Since I never got any response on this, I've tried a few other things.  Firstly, instead of using the ViewModel (which to me seems ridiculous since MVC is built around the concept of a ViewModel), I am using the Read AJAX action to populate the grid, which it does.  I however did not include any Edit commands, because I don;t want the user to have to click a button to make the mapping.  Instead I click in the 3rd column, the dropdown activates, and I can choose the value I want there.  But the Update action never gets called.  It's really bugging me...

Grid Code:

@(Html.Kendo().Grid<MappedColumn>()
    .Name("csvGrid")
    .HtmlAttributes(new { style = "width: 650px" })
    .TableHtmlAttributes(new { @class = "table-condensed" })
    .Columns(col =>
    {
        col.Bound(c => c.CSVColumn).Width(25).Title("Col #");
        col.Bound(c => c.CSVColumnName).Width(400).Title("Column Name");
        col.ForeignKey(c => c.MappedTo, (IEnumerable)ViewData["ObjProps"], "Id", "Property").Title("Mapped To");
    })
    .DataSource(ds => ds
        .Ajax()
        .ServerOperation(true)
        .Model(m =>
        {
            m.Id(c => c.CSVColumn);
            m.Field(c => c.CSVColumnName).Editable(false);
            m.Field(c => c.MappedTo).DefaultValue(0);
        })
        .Events(events => events.Error("error_handler"))
        .Read(r => r.Action("GetCSVFields", "Home").Type(HttpVerbs.Get))
        .Update(u => u.Action("SaveCSVDefinition", "Home").Type(HttpVerbs.Post))
    )
    .Editable(editable => editable.Mode(GridEditMode.InCell))
)

Controller Code:

[AcceptVerbs(HttpVerbs.Get)]
      [ActionName("GetCSVFields")]
      public JsonResult GetCSVFields([DataSourceRequest]DataSourceRequest request)
      {
          using (var db = new UploadMapperContext())
          {
              return Json(db.MappedColumns.ToList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
          }
      }

      [AcceptVerbs(HttpVerbs.Post)]
      [ActionName("SaveCSVDefinition")]
      public JsonResult SaveCSVDefinition([DataSourceRequest]DataSourceRequest request, MappedColumn csvColumn)
      {
          return Json("updating", JsonRequestBehavior.AllowGet);
      }

 

I know there's nothing in the actual Update method yet, but I did add a breakpoint so I could see if it even gets called, which it does not.  I sure could use some assistance with this, which hopefully will not involve me tearing it all apart and re-doing it in some other fashion...

[Joe]

I just wanted to update this in case others have the same issue...

What I had to do was set the grid up to update in batch mode, and change my controller method to receive [Bind(Prefix = "models")]IEnumerable<MappedColumn> columns as a parameter.

My Grid code is now:

@(Html.Kendo().Grid<MappedColumn>()
    .Name("csvGrid")
    .HtmlAttributes(new { style = "width: 650px" })
    .TableHtmlAttributes(new { @class = "table-condensed" })
    .Columns(col =>
    {
        col.Bound(c => c.CSVColumn).Width(25).Title("Col #");
        col.Bound(c => c.CSVColumnName).Width(400).Title("Column Name");
        col.ForeignKey(c => c.MappedTo, (IEnumerable)ViewData["ObjProps"], "Id", "Property").Title("Mapped To");
    })
    .ToolBar(tb => tb.Save())
    .DataSource(ds => ds
        .Ajax()
        .Batch(true)
        .Model(m =>
        {
            m.Id(c => c.CSVColumn);
            m.Field(c => c.CSVColumnName).Editable(false);
            m.Field(c => c.MappedTo).DefaultValue(0);
        })
        .Events(events => events.Error("error_handler"))
        .Read(r => r.Action("GetCSVFields", "Home").Type(HttpVerbs.Get))
        .Update(u => u.Action("SaveCSVDefinition", "Home").Type(HttpVerbs.Post)
        )
    )
    .Editable(editable => editable.Mode(GridEditMode.InCell))
)

And my controller code is now:

[AcceptVerbs(HttpVerbs.Post)]
[ActionName("SaveCSVDefinition")]
public JsonResult SaveCSVDefinition([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<MappedColumn> columns)
{
    using (var db = new UploadMapperContext())
    {
        foreach (MappedColumn thisColumn in columns)
        {
            db.Entry(thisColumn).State = EntityState.Modified;
        }

        db.SaveChanges();
    }

    return Json("updated");
}

 

[Pavlina]

Hi,

Please refer to the Ajax Editing step-by-step tutorial linked below, which demonstrates how to configure the Kendo UI Grid for ASP.NET MVC to do Ajax editing
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/editing/ajax-editing

You can also check the batch editing example and see what is the difference on your end:
http://demos.telerik.com/aspnet-mvc/grid/editing

Regards,
Pavlina
Telerik by Progress

[Joe]

Yeah, I've seen that document thrown around here in these forums as the end all answer for everything.  I've even read it multiple times.  It was actually very little help since it didn't solve my initial question.  After I revised my code to behave differently (in a fashion I didn't actually want to begin with) it was a little bit more helpful.  Telerik really needs to learn the value of good thorough documentation, in a single place instead of spread all over the place, as well real world examples instead of mere demo/marketing type examples.

[Joe]

So I built the above functioning prototype, everything works exactly as I expect.  So the POC works, time to implement for real.  I move it to a new project, and it just doesn't function as it did in the prototype. In the prototype, after loading the grid, I click in the 3rd column, the dropdown shows up allowing me to select the property to map to.  In the new app, exact same code, click in the 3rd column, it attempts to show the dropdown, but just flickers and stays in the non-editing mode.  And no, there are zero javascript errors.  Well this sure is gonna be a PITA to troubleshoot.  I should've went with Infragistics or Sencha...  Everytime I try to implement something with Telerik, it just never works out of the box... so many little gotchas...

[Joe]

I have spent way more time on this than should be necessary.

So in the code I'm about to show, the grid loads and when I click in the third column, the dropdown shows up, and I'm able to select a new value for the column.

@(Html.Kendo().Grid<MappedColumn>()
    .Name("csvGrid")
    .HtmlAttributes(new { style = "width: 650px" })
    .TableHtmlAttributes(new { @class = "table-condensed" })
    .Columns(col =>
    {
        col.Bound(c => c.CSVColumn).Width(25).Title("Col #");
        col.Bound(c => c.CSVColumnName).Width(400).Title("Column Name");
        col.ForeignKey(c => c.MappedTo, (IEnumerable)ViewData["ObjProps"], "Id", "Property").Title("Mapped To");
    })
    .ToolBar(tb => tb.Save())
    .DataSource(ds => ds
        .Ajax()
        .Batch(true)
        .Model(m =>
        {
            m.Id(c => c.CSVColumn);
            m.Field(c => c.CSVColumnName).Editable(false);
            m.Field(c => c.MappedTo).DefaultValue(0);
        })
        .Events(events => events.Error("error_handler"))
        .Read(r => r.Action("GetCSVFields", "Home").Type(HttpVerbs.Get))
        .Update(u => u.Action("SaveCSVDefinition", "Home").Type(HttpVerbs.Post))
    )
    .Editable(editable => editable.Mode(GridEditMode.InCell))
)

 

The next snippet of code is pretty much the same, with the exception of a few naming changes for various models, but structurally they are identicle, and yet in this grid when I click in the third column, the dropdown flickers quickly, and goes back to the default column.  IOW, the dropdown never actually shoand allows the user to sleect a value:

@(Html.Kendo().Grid<MappedColumnPOCO>()
    .Name("csvGrid")
    .HtmlAttributes(new { style = "width: 650px" })
    .TableHtmlAttributes(new { @class = "table-condensed" })
    .Columns(col =>
    {
        col.Bound(c => c.CSVColumn).Width(25).Title("Col #");
        col.Bound(c => c.CSVColumnName).Width(400).Title("Column Name");
        col.ForeignKey(c => c.MappedTo, (IEnumerable)ViewData["ObjProps"], "ID", "Property").Title("Mapped To");
    })
    .ToolBar(tb => tb.Save())
    .DataSource(ds => ds
        .Ajax()
        .Batch(true)
        .Model(m =>
        {
            m.Id(c => c.CSVColumn);
            m.Field(c => c.CSVColumnName).Editable(false);
            m.Field(c => c.MappedTo).DefaultValue(0);
        })
        .Events(events => events.Error("error_handler"))
        .Read(r => r.Action("GetCSVFields", "Mapping").Type(HttpVerbs.Get))
        .Update(u => u.Action("SaveCSVDefinition", "Mapping").Type(HttpVerbs.Post))
    )
    .Editable(editable => editable.Mode(GridEditMode.InCell))
)

 

It's really quite frustrating.  On a whim I set the MappedTo property to an different value, and I see the value in the cell changes as appropriate, I just cannot get that damn dropdownlist to actually show and allow the user to select from it.  Can anybody shed some insight here? 

[Joe]

And no, there are no javascript errors at all.

[Joe]

ARGH!!!!  It's jQuery...  In the version that works, it's jQuery 2.2.3, in the one that doesn't work it's jQuery 3.0.0.... If I change the non-working version to 2.2.3, it works...  How irritating!!!!

[Pavlina]

Hi,

Currently Kendo UI does not support jQuery 3.0 due to some breaking changes in jQuery. We will invest development time to make the two libraries compatible, but I cannot provide a specific time frame at this point.

Regards,
Pavlina
Telerik by Progress