Refreshing of New-Form still does not Work as expected / Pressing Inline Action Delete moving Page to the Top

[meister-d]

Hi BForms Team, I tried to implement your Answer of the Issue "Reloading of addNew Tab in Toolbar?" #240. Unfortunately I still can't get it to work correctly. To show the behavior i made a sample Project which can be found here on my OneDrive Share

Refreshing of New-Form still does not Work as expected

I modified your Contributors Example so that it shows how i try to refresh the New Tab on the Toolbar. After the Form is refreshed i can not perform a correct Add any more. The Add operation results in a JSON Reply from the Browser (it want's me to download the json file instead of updating the row). I assume that there is no Ajax Call any more...

Pressing Inline Action Delete moving Page to the Top

While trying to implement the Movies Example from your Docs i also ran into another Issue. As described in the Docs I implemented the delete Inline Actions on the Row. When all Rows are open, and I Press the delete Icon on a Row, the Inline Action gets opened, but the Site scrolls to the top. To perform the delete Operation I have to scroll down and press ok...

I would really appreciate, if you could have a look at my Sample to check this two points.

Thank you in Advance ;-)

Regards Dumitru

[meister-d]

Hi There, after some more Testing this morning I modified the evChangeDropdownSuccess handler to this (i removed the $form.bsInitUI() and added the toolbar initialisation):

GridIndex.prototype._evChangeDropdownSuccess = function (response) {
        var $form = $(response.Html);
        this.$toolbar.find('.js-newForm').replaceWith($form);
        //$form.bsInitUI();
        this.$toolbar.bsToolbar({
            uniqueName: 'usersToolbar',
            controlsOptions: {
                focusFirst: false
            },
            customControlsOptions: {
                AdvancedSearch: {
                    focusFirst: true
                }
            },
            subscribers: [this.$grid]/*,
            autoInitControls: false,
            //initialize default controls manually
            controls: [
                $.bforms.toolbar.defaults.advancedsearch,
                $.bforms.toolbar.controls.yourCustomControl
            ]*/
        });
        this.$toolbar.on('bstoolbarbeforeorderformsubmit', $.proxy(this.evBeforeOrderFormSubmit, this));   
    };

Now I can correctly submit the Form and insert a Row into the Contributor Table, but if i switch to Search -> The SearchTab is gone. Also if I try then to press the + (Add) the Add New Tab is not any more functional. I have to reload the Page again, so that it works fine again.

I also noticed, that when I send the Add request, without changing the Dropdown, i get a different JSON Object:

{"New.FirstName":"asdf","New.LastName":"asdf","New.Url":"","New.StartDate.TextValue":"02/04/2016 12:00 AM","New.StartDate.DateValue":"2016-02-04 00:00:00","New.IsEnabled.SelectedValues":"3","New.Age.TextValue":"22","New.Age.ItemValue":"22","New.CountriesList.SelectedValues":"","New.RoleList.SelectedValues":"2","New.Contributions":""}

than after Refreshing by changing the Dropdown:

{"FirstName":"asdf","LastName":"asdf","Url":"","StartDate.TextValue":"02/04/2016 12:00 AM","StartDate.DateValue":"2016-02-04 00:00:00","IsEnabled.SelectedValues":"2","Age.TextValue":"21","Age.ItemValue":"21","CountriesList.SelectedValues":"Mars","RoleList.SelectedValues":"2","LanguagesList.SelectedValues[0]":"VisualOok","Contributions":""}

There is no New.xxxxx property any more I assume, that we're not sending a 'BsToolbarModel<ContributorSearchModel, ContributorNewModel> model' any more. Because of this I had to change the url in the updated form to /newrefreshed.

Thanx & Regards Dumitru

[meister-d]

Hi BForms Team, could anyone already have a look at this Issue? Are there any further information needed?

Regards Dumitru

[mariuscosareanu]

Hi Dumitru,

For the first issue you should:

• replace _evChangeDropdownSuccess with this :

GridIndex.prototype._evChangeDropdownSuccess = function (response) {
        var $html = $(response.Html),
            $form = this.$toolbar.find('.js-newForm');

        $form.find('.js-formContent').html($html.find(".js-formContent"));
        $form.bsInitUI();
    };

• change the UpdateNewForm action, add this after model.LanguagesList.Items.Add(visualOok); :

var toolbar = new BsToolbarModel<ContributorSearchModel, ContributorNewModel, List<ContributorOrderModel>>
                {
                    New = model
                };

                html = this.BsRenderPartialView("Toolbar/_New", toolbar.New, toolbar.GetPropertyName(x => x.New));

As you can see, I use the Toobar/_New view, I guess that you don't need Toobar/_NewRefreshed

• Add a form content container, js-formContent in Toobar/_New :

...
@using (Html.BsBeginForm("new", "contributors", FormMethod.Post, new { @class = "js-newForm" }))
{
   <h3>Add Form</h3>
   <div class="js-formContent">
      <div class="col-sm-6 col-lg-6 form-group @Html.BsValidationCssFor(m => m.FirstName)">
            @Html.BsLabelFor(m => m.FirstName)
            <div class="input-group">
                @Html.BsGlyphiconAddon(Glyphicon.User)
                @Html.BsInputFor(m => m.FirstName)
                @Html.BsValidationFor(m => m.FirstName)
            </div>
        </div>
          ...
          other inputs
          ...
      <div class="col-sm-6 col-lg-6 form-group">
            @Html.BsLabelFor(m => m.Contributions)
            <div class="input-group">
                @Html.BsGlyphiconAddon(Glyphicon.Stats)
                @Html.BsInputFor(model => model.Contributions, BsControlType.TextArea, new { rows = 5 })
            </div>
        </div>
    </div>

    <div class="col-sm-12 col-md-12 col-lg-12 grid_toolbar_submit">
        <button type="submit" class="btn btn-default js-btn-save" data-action="@Url.Action("New")">@Resource.Add</button>
        <a href="#" class="js-btn-reset">@Resource.BF_Reset</a>
    </div>

    <div class="clearfix"></div>
}

Regarding your second issue you should add href="javascript:void(0)" to the row button template

@helper RowButtonTemplate(ContributorRowModel row)
{
    <a href="javascript:void(0)" class="js-btn_delete js-inlineAction"><span class="glyphicon glyphicon-trash"></span></a>
}

and set the inlineActionSelector grid option :

this.$grid.bsGrid({
...
 inlineActionSelector: '.js-inlineAction',
            rowActions: [{
                btnSelector: '.js-btn_state',
                url: this.options.recommendUnrecommendUrl,
                handler: $.proxy(this._recommendUnrecommendHandler, this),
            }, {
                btnSelector: '.js-btn_delete',
                url: this.options.deleteUrl,
                init: $.proxy(this._deleteHandler, this),
                context: this
            }],
...
})

Hope this helps, Marius

[meister-d]

Hi Marius Thanx for your support :-) Both of your Solutions work for me.

Regards Dumitru