[Solved] Editing Batch with a command template

[Jeff]

Looking at your http://demos.telerik.com/aspnet-mvc/razor/grid/editingbatch?theme=hay sample and it works fine. However, In the tool bar, I also need a combobox along with one single button (SaveChanges). The user chooses a value from the combo box, selects multiple check boxes in the grid and clicks on Save Changes. Without the combobox, just like your example, it works, otherwise, the button that I have does nothing. My code is exactly like yours except my toolbar is as follows. Would be awesome if you can help me get the toolbar corrected:

.ToolBar(commands =>
       {
           commands.Template(
                @<text>
                    <label class="userimageapprovals-label" for="userimageapprovals-input">Update batch to:</label>
                    @(Html.Telerik().ComboBox()
                            .Name("UserImageApprovals")
                            .DataBinding(binding => binding.Ajax().Select("_GetVerificationStatuses", "Admin"))
                            .AutoFill(true)
                            .SelectedIndex(0)
                            .HtmlAttributes(new { style = "width: 300px" })
                    )
                    <button type="submit" class="t-button t-state-default">Update</button>
                </text>);
       })

Instead of the <button (last line), I tried commands.Submitchanges() but it does not even render the button if I have the Template defined. It's like catch 22. Reading through other posts, seems like this is by design. So what is the solution for me to have a button bnext to the combobox that will trigger a submit of all the rows that are checked to the controller (via ajax)?

Do I
1.  use @using (Ajax.BeginForm.......
2. use @using (Html.BeginForm....and wire up the post via jQuery

My grid is wired via ajax.

Please help me out.

[Atanas Korchev]

Hi Jeff,

 This should work:

.ToolBar(commands => {
            commands.Template(@<text>
                <a class="t-button t-grid-save-changes" href="#">Save changes</a>
                <a class="t-button t-grid-cancel-changes" href="#">Cancel changes</a>
            </text>);

Regards,
Atanas Korchev
the Telerik team

[Jeff]

Thank you. Tried it. I do see the 2 additional buttons. The grid has the following:

.DataBinding(dataBinding => dataBinding.Ajax()
    .Select("_GetUnApprovedImages", "Admin")
    .Update("_SaveUnApprovedImages", "Admin"))

1. do I need the Update piece?
2. How come my action (_SaveUnApprovedImages) has null data when clicking SaveChanges?

I hope you have a follow-up

[Atanas Korchev]

Hi Jeff,

 I am afraid I don't have a follow up. I tried the same in our batch editing demo and everything worked as expected there. I am not really sure what is wrong at your end.

Regards,
Atanas Korchev
the Telerik team

[Jeff]

I've seen an example where I have to do some sort of [Bind] and set it to updated. I see the data in the Request.Form. I'll probably figure that out and thank you for responding.

The data that gets bound to the grid is:
 

[ReadOnly(true)]
public int UserImageId { get; set; }

[UIHint("Notes")]
public string Notes { get; set; }

It looks like it's hitting the action when I click SaveChanges only if I modify the Notes field. The UserImageId is set to readonly and I have the following mapping:

columns.Bound(i => i.UserImageId)
.Filterable(false).Sortable(false)
.ClientTemplate("<input name='checkedRecords' type='checkbox' value='<#= UserImageId #>' title='Check'/>")
.HeaderTemplate(@<text><input type="checkbox" title="check all records" id="checkAllRecords"/></text>)

I need that even when I click the check box the SaveChanges to fire. Because I have Readonly, it does not.
If I remove the ReadOnly attribute, upon clicking the checkbox, I see the input field with the actual UserImageId value.

[I will fix the binding of the data but the latter is the only missing piece for me]

Will wait for response.

[Jeff]

I updated my action to

[Bind(Prefix = "updated")] IEnumerable<UnApprovedImageData> data

and I get the data but only the notes field is filled. The UserImageId field is null and the value from the combox box is null. The action is

public ActionResult _SaveUnApprovedImages(string UserImageApproval, [Bind(Include = "UserImageId, Notes", Prefix = "updated")] IEnumerable<UnApprovedImageData> data)

Please help out.

[Atanas Korchev]

Hello Jeff,

What you are trying to implement is not supported out of the box. Only editable data is collected and submit back to the server. You can try using the OnSave event to send additional data to the server.

Regards,
Atanas Korchev
the Telerik team

[Jeff]

Thanks. That's too bad. So I looked the example you sent.

1)What's bazaar is that the Request.Form has all the data in there. All the fields from the row. I feel like there's definitely a way to make it bind since the data is being passed in, just not sure why it's not binding.

2)In terms of the whole issue of clicking the checkbox and not editing, I can create the OnSave method, check for everything that is checked and let's say I have that, what's the code to submit the checked rows and pass in an axtra paramter in the url from comboxbox? And then do I rebind the grid via javascript? May be some pseudo code to help me think this through.

[Atanas Korchev]

Hi Jeff,

Model binding is performed by ASP.NET MVC and I cannot tell why your model is no properly populated when the required data is in Request.Form. Have you tried editing your model outside of the grid in a regular Html.Form? Does it work there?

The OnSave event is raised when the user saves a row. You don't need to rebind the grid at all after that. Rebinding will happen automatically.

If you need further help please attach a runnable subset of your project. I can't really help further before seeing the actual problem.

Regards,

Atanas Korchev
the Telerik team

[Jeff]

Thanks. I ended up using jQuery to take the checked data along with another column, format it to JSON and post it to the controller.Just a shame it's not out of the box but when all fails, jQuery to the rescue.