This is a migrated thread and some comments may be shown as answers.

grid popup insert/update success view

5 Answers 186 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 2
Thomas asked on 30 Oct 2013, 11:27 AM
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

5 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 01 Nov 2013, 09:38 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Thomas
Top achievements
Rank 2
answered on 05 Nov 2013, 08:44 AM
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
0
Alexander Popov
Telerik team
answered on 06 Nov 2013, 09:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Thomas
Top achievements
Rank 2
answered on 11 Nov 2013, 07:08 AM
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
0
Alexander Popov
Telerik team
answered on 12 Nov 2013, 03:20 PM
Hi Tom,

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

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Thomas
Top achievements
Rank 2
Answers by
Alexander Popov
Telerik team
Thomas
Top achievements
Rank 2
Share this question
or