grid popup insert/update success view

[Thomas]

hey guys.

I'm using a grid with popup editmode which looks like:

@(Html.Kendo().Grid<Pattern>()
.Name("Pattern")
.ToolBar(toolbar =>
        {

            toolbar.Create().Text("New Pattern");
        }

    )
    .DataSource(dataSource =>
        dataSource.Ajax().PageSize(50)
            .Model(model =>
                    {
                        model.Id(s => s.RegExID);
                        model.Field(s => s.Category).DefaultValue(new Category());
                        model.Field(s => s.Table).DefaultValue(new ExpressionTable());
                        model.Field(s => s.Version).DefaultValue("%");
                    }
                )
            .Create(create => create.Action("CreatePattern", "Pattern"))
            .Destroy(destroy => destroy.Action("DeletePattern", "Pattern"))
            .Update(update => update.Action("UpdatePattern", "Pattern"))
            .Read(reader => reader.Action("LoadPattern", "Pattern"))
        )
    .Sortable()
    .Selectable()
    .Pageable(pager =>
        {
            pager.Enabled(true).Refresh(true).PageSizes(new int[] { 50, 100, 150 });
            pager.Info(false);

        })
    .Scrollable(s => s.Enabled(true).Height(500))
    .Filterable(filterable =>
                    filterable.Extra(false).Operators(operators => operators
                        .ForString(str =>
                            str.Clear()
                            .StartsWith("Starts with")
                            .Contains("Contains")
                    )
                    )

    )
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PatternPopUp")

)
)

The Template used looks like this:

@Html.HiddenFor(model => model.RegExID)

 

<div class="editor-label">

    @Html.LabelFor(model => model.Table)

</div>

<div class="editor-field">

    @(Html.Kendo().DropDownListFor(model => model.Table)

    .OptionLabel("Please select a value")

    .HtmlAttributes(new { style = "width: 200px" })

    .AutoBind(true)

    .Name("Table")

    .DataTextField("Name")

    .DataValueField("TableID")

    .Events(e =>

        {

            e.Select("select");

            e.DataBound("bound");

        }

        )

    .DataSource(source =>

    {

        source.Read(read =>

        {

            read.Action("GetRegExpressions", "Pattern");

        })

        .ServerFiltering(true);

    })

 

    )

</div>

 

<div id="regSW">

    <div class="editor-label">

        @Html.LabelFor(model => model.SoftwareName)

    </div>

    <div class="editor-field">

        @Html.EditorFor(model => model.SoftwareName)

        @Html.ValidationMessageFor(model => model.SoftwareName)

    </div>

    <div class="editor-label">

        @Html.LabelFor(model => model.SoftwarePublisher)

    </div>

    <div class="editor-field">

        @Html.EditorFor(model => model.SoftwarePublisher)

        @Html.ValidationMessageFor(model => model.SoftwarePublisher)

    </div>

    <div class="editor-label">

        @Html.LabelFor(model => model.Version)

    </div>

    <div class="editor-field">

        @Html.EditorFor(model => model.Version)

        @Html.ValidationMessageFor(model => model.Version)

    </div>

</div>

 

<div id="regMachine">

    <div class="editor-label">

        @Html.LabelFor(model => model.InstallSource)

    </div>

    <div class="editor-field">

        @Html.EditorFor(model => model.InstallSource)

        @Html.ValidationMessageFor(model => model.InstallSource)

    </div>

</div>

 

<div class="editor-label">

    @Html.LabelFor(model => model.Category)

</div>

<div class="editor-field">

    @(Html.Kendo().DropDownListFor(model => model.Category)

    .OptionLabel("Please select a value")

    .HtmlAttributes(new { style = "width: 200px" })

    .AutoBind(false)

    .Name("Category")

    .DataTextField("Name")

    .DataValueField("CategoryID")

    .DataSource(source =>

    {

        source.Read(read =>

        {

            read.Action("GetCategories", "Software");

        })

    .ServerFiltering(true);

    })

    )

</div>

 

<div class="editor-label" id="regDeslbl">

    @Html.LabelFor(model => model.Description)

</div>

<div class="editor-field" id="regDesfld">

    @Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", style = "width: 200px" })

    @Html.ValidationMessageFor(model => model.Description)

</div>

 

<script>

 

    $("#regSW").hide();

    $("#regMachine").hide();

</script>

what I want to implement now is something like this:
after the sumbit(save, update) button is clicked I don't want the window to close. I want it to remain open and display something like a progressbar or an ajax loader to inform the user that sth. is happening right now and there's no need to submit again.

in the background there will be items added to the database and I want to display the amount of items added on a new view.

when the db operation is finished the loader should disappear and something like: 6 items have been added to the database should be displayed on a lets call it success view.

hopefully there's a way without creating kendo windows, having partial views with the content displayed and an ajax.beginform.

thanks in advance
cheers, tom

[Alexander Popov]

Hi Tom,

This behavior is currently not supported out of the box, however it could be achieved using a custom solution. For example you can subscribe for the Grid's edit event. Once the event is triggered find the update button and attach a handler to its click event that stops the event propagation. This will prevent the Grid from sending the data to the server and closing the edit popup. Next you could manually send the data using an Ajax request and display the desired messages:  

@(Html.Kendo().Grid<Pattern>()
    .Name("Pattern")
    .Events(e=>e.Edit("onEdit"))
    ...
)
<script type="text/javascript">
    function onEdit(e) {
        e.container.find(".k-grid-update").on("click",function(e){
            e.stopPropagation();
            //make ajax call, show progress bar
        })
    }
</script>

 

Regards,
Alexander Popov
Telerik

[Thomas]

hey alex - thx for the response.
the interruption seems to work, but it also seems to disturb the validation of the data annotations set in the model. is there a way to get this work or do I have to do a workaround here? could you please provide an example for this particular case?
I attached a screenshot so you can see how it looks without the ajax post - how can I achieve this behavior doing an ajax.post?

thx in advance

[Alexander Popov]

Hello Tom,

You can initialize a KendoUI Validator using the popup container and call its validate method. In case all data is valid - make the ajax request.

Regards,
Alexander Popov
Telerik

[Thomas]

hey alex
I added the kendo validator to the form and everything is working fine if textboxes are marked with required value or something else.

the thing now is the validator should check if two txtbox1 and txtbox2 contain the same vale (it is not allowed that both txtboxes contain "&")
how could this be implemented?

thx in advane and many thx for your support

[Alexander Popov]

Hi Tom,

You should define a custom validation rule that compares the values of these two elements.

Regards,
Alexander Popov
Telerik