Popup Grid Different Templates on Edit/Create

[Chatra]

Hi,

1) Can we have a different template for Create a record and Edit a record in Grid ? If it can achieved ; Can you point me to some example.

2) Based on Record in a grid can we have different template of popup's on Edit of each record? if it can be achieved; Can you point me to some example.


Thanks,
Chatrapathi Chennam

[CS]

I had the very same problem. I solved this by calling the same method for both cases "create" and "update" and filled it with the logic that decides weather to do a create or update.

[Chatra]

Hi Stefan thanks for the reply.

The logic to implement when a Create or Update Action is taken place can be achieved based on the condition  "e.model.isNew()" in edit function " edit: function (e) { } " .But I am looking at how to Show or Configure a different template on UI for Create or Update Actions.

editable: {
                mode: "popup",
                template: kendo.template($("#popup_editor").html())
            },

Based on your reply If I understand correctly you are calling same template(popup_editor) for Create and Update but setting the condition in the template for Create or Update ?  If so can you provide the snippet of this.

Thanks,
Chatrapathi Chennam

[CS]

I use it for regular grid editing I'm not sure if it works similar in a popup. I tried to boil it down and delete everything as far as possible just to give you a hint on how I did it. Formatting options don't seem to work currently.

var updateSalesOrderDetail = function ( data, options ) {};

var createSalesOrderDetail = function ( data, options ) {};

var createAndUpdate = function ( options ) {
    if ( value.hasOwnProperty( "salesorderdetailid" ) ) {
        return updateSalesOrderDetail( value, options );
    } else if ( !value.hasOwnProperty( "salesorderdetailid_value" ) ) {
        return createSalesOrderDetail( value, options );
    } else {
        return options.success( [] );
    }
};

var dataSource = new kendo.data.DataSource( {
    batch: true,
    pageSize: 4,
    autoSync: false,
    transport: {
        create: createAndUpdate,
        read: function ( options ) {},
        update: createAndUpdate
    },
    schema: {
        model: {
            id: "AllProducts",
            fields: {
                productid_name: {
                    type: "string",
                    nullable: false,
                    editable: false
                }
            }
        },
        total: function ( data ) {
            return data.length;
        },
        type: "json"
    }
} );

[Chatra]

Hi Stefan,

Thanks for the reply.

But the One I am looking for is more of a different templates on View perspective, but not about the  logic to handle the model for edit/create operations.


Thanks,
Chatrapathi Chennam

[Vladimir Iliev]

Hi Chatra,

In case you need to have two different editor templates for editing and creating records than you can use the following syntax to achieve the desired behavior:

$("#grid").kendoGrid({
  editable: {
    mode:"popup",
    template: $("#template").html()
  }

<script type="text/x-kendo-template" id="template">
    #if(data.isNew()) {#
        #var createTemp = kendo.template($("\#createTemplate").html());#
        #=createTemp(data)#
    #} else {#
        #var editTemp = kendo.template($("\#editTemplate").html());#
        #=editTemp(data)#
    #}#
</script>

Create template:

<script type="text/x-kendo-template" id="createTemplate">
    <input id="categories" style="margin-left:10px">
</script>

Edit template:

<script type="text/x-kendo-template" id="editTemplate">
    <input id="products" style="margin-left:10px">
</script>

Regards,
Vladimir Iliev
Telerik

 

 

[Phil]

Has this been made cleaner in more recent versions of the tools? Having to add ugly hacks such as this, defeats the purpose of having a simple, clean programming interface. It wouldn't be difficult to directly add syntax to the Grid control that differentiates between an Edit event and a Create event, for the templates.

[Boyan Dimitrov]

Hello Phil,

I am afraid that there is no cleaner way of achieving this functionality. Anyway the edit event is fired after the popup template is used and fields are bound to the model. As my colleague pointed out the isNew method of the data item can be used to determine whether a new model is created or existing model is updated. 

Regards,
Boyan Dimitrov
Telerik by Progress

[SAI NAVEEN KUMAR]

Hi,

with the above syntax i am facing some issue, as when i click on edit button for first time it is showing the create Template, then i press ESC and tried again then its showing the edit template, what i have noticed is at first for both conditions its calling create template only later its is working fine.

[Boyan Dimitrov]

Hello,

We would need a sample dojo example to review the implementation and see what happens. 

Regards,
Boyan Dimitrov
Progress Telerik

[Matthew]

Is there an equivalent to setting the template to the html of an element using the MVC control?

[Boyan Dimitrov]

Hello,

I would suggest to use a custom popup template example as a base and modify the custom popup editor template as shown in the forum discussion. Both create and update templates can be defined on the page with Kendo UI Grid for ASP.NET MVC. 



Regards,
Boyan Dimitrov
Progress Telerik

[Steve]

Could you try replying this time to the question in context of the original question - namely, a COMPLETE UNABRIDGED EXAMPLE of custom editors, one for ADD and one for EDIT.

[Matthew]

I'm sorry, but I don't see in your provided example where the template is discriminated based on an update vs edit command.
Is there an available example of an MVC Grid control that shows how to present Form-A for "insert" and Form-B for "Edit"?

[Steve]

Don't hold your breath Matthew... they are very good at IGNORING questions or worse, giving incomplete or not relevant information only to be backed up by their sales people constantly emailing you about giving them more money.

[Georgi]

Hi Matthew,

A similar approach to the one provided by my colleague Vladimir is applicable for the Wrappers. In order to use a Kendo Template as a template for the popup editor, it is necessary to modify the options of the grid on the client and specify the id of the template within the document ready event handler.

e.g.

// specify  editor name
        $(function () {
            var grid = $('#grid').data('kendoGrid');
            var options = grid.options;
            options.autoBind = true;
            options.toolbar = [{ name: "create" }]
            options.editable.template = $("#template-edit").html()
            grid.setOptions(options);
    })

// template

<script type="text/x-kendo-template" id="template-edit">
    #if(data.isNew()) {#
    #var createTemp = kendo.template($("\#createTemplate").html());#
    #=createTemp(data)#
    #} else {#
    #var editTemp = kendo.template($("\#editTemplate").html());#
    #=editTemp(data)#
    #}#
</script>

<script type="text/x-kendo-template" id="createTemplate">
    @Html.Partial("CreateTemplate")
</script>

<script type="text/x-kendo-template" id="editTemplate">
    @Html.Partial("EditTemplate")
</script>

For your convenience I am attaching a small sample which demonstrates the above approach. Please examine it and let me know if it helps.


Regards,
Georgi
Progress Telerik

[Steve]

This is annoying... can someone on THAT end answer a question in Razor format instead of always in JavaScript....

[Georgi]

Hi Steve,

Could you please examine the sample from my previous message once again?

You will notice that actually a Razor views are used for the templates which are rendered within Kendo Templates.

Have in mind that the grid is a client side component. The server wrappers provide a strongly typed configuration to facilitate the developers. Nevertheless, they evaluate to a script which initializes a jQuery Kendo Grid. In other words, you do not have the actual widget available on the server and it is not possible to determine whether the user is editing or creating server side.


Regards,
Georgi
Progress Telerik

[Steve]

Thanks... I got your point... sadly you missed mine.   That's ok... we're moving on.

[Matthew]

Thank you for your reply and it certainly allows me to discriminate separate forms per create vs edit. However, how should one proceed if each form requires a different model?

[Boyan Dimitrov]

Hello,

In general the templates (both edit and create templates in this case) should use same model - the one that the Kendo UI Grid for ASP.NET MVC is bound to. The Kendo UI Grid for ASP.NET MVC and respectively the Kendo UI DataSource (the component that performs data operations) expects and pass a model with the structure of the model used for binding the Kendo UI Grid for ASP.NET MVC. 

Regards,
Boyan Dimitrov
Progress Telerik

[Josh]

This example is fairly close to what I would like to do. I am wondering if it is possible to change text I have circled in red. When creating or adding new records it saying edit and update makes no sense. Can you please provide a solution for how to accomplish this task.

[Tsvetomir]

Hi Josh,

The highlighted aspects for the PopUp editor do not have dedicated properties which might be used to directly modify their content. However, you might change them in the edit event handler of the grid as follows:

edit: function(e){
  $("div.k-window").find(".k-window-title").text("custom header text");
  $("div.k-window").find(".k-edit-buttons .k-grid-update").text("custom edit");
  $("div.k-window").find(".k-edit-buttons .k-grid-cancel").text("custom cancel");
}

Give this a try and let me know how it works out for you.


Kind regards,
Tsvetomir
Progress Telerik

[Josh]

Thank you for the response. It worked with one tweek to the code.The java script to find and edit needs to be wrapped in the following statement

 

if (e.model.isNew()) {
           $("div.k-window").find(".k-window-title").text("custom header text");
           $("div.k-window").find(".k-edit-buttons .k-grid-update").text("custom edit");
           $("div.k-window").find(".k-edit-buttons .k-grid-cancel").text("custom cancel");
       }

[Tsvetomir]

Hi Josh,

Thank you for sharing the approach that is suitable for you. 

When the condition is applied in the edit event handler of the grid, the customizations would be visible only for the PopUp form which is rendered when a new item is created. Therefore, when the user attempts to edit an existing item, these modifications will not take place. It is up to one's preferences whether they want to show the custom text in both cases or not. 

In case there is anything else I can help with, let me know.


Kind regards,
Tsvetomir
Progress Telerik

[Josh]

So I got the examples working when I went to integrate razor functionality into the create and edit templates I get an error about a mismatch because the grid uses an ienumerable of the model and each template expects a singular item. This works with mvc when not trying to use kendo. How can I make it work with kendo to pass the selected item or the new item to the edit or create view?

 

 

[Tsvetomir]

Hi Josh,

The currently edited item or the newly added item is designed to be passed to the Partial View automatically without having the need of additional logic to send the data item. If you have set up the Grid as show below, there would not be a need for additional code:

.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Person"))

And the template located in the ~Views/Shared/EditorTemplates folder:

@model KendoUIMVC5.Models.Person

<div class="k-edit-form-container">
    <h3>Customized Person edit template</h3>
    <br />
    @Html.HiddenFor(model => model.PersonID)

Can you provide more details on the exact scenario you are willing to achieve and share the current state of the application? Providing code snippets would be very helpful to me. 

Also, as the forum thread was initially submitted for the Kendo UI jQuery widgets, I cannot be sure what is the exact technology you are using and the corresponding widgets? Because the Kendo UI widgets for jQuery can be used seamlessly in a ASP.NET Core/MVC project. 

Looking forward to your reply.


Kind regards,
Tsvetomir
Progress Telerik

[Josh]

We are using kendo in a MVC .net core application. This is the code we have for our grid display

01.@(Html.Kendo().Grid<ActionIndicatorNotification>()
02.    .Name("NotificiationGrid")
03.    .ToolBar(x => x.Create().Text("Create Notification"))
04.    .Columns(columns =>
05.                    {
06.                        columns.Bound(c => c.Title);
07.                        columns.Bound(c => c.CreateDate);
08.                        columns.Bound(c => c.SentDate);
09.                        columns.Command(command =>
10.                        {
11.                            command
12.                                .Edit();
13.
14.                    command.Destroy();
15.                }).Width(175);
16.            })
17.        .Pageable(pageable => pageable
18.        .Input(true)
19.        .Numeric(false)
20.        .Refresh(true))
21.    .DataSource(dataSource => dataSource
22.        .Ajax()
23.        .PageSize(10)
24.        .Sort(sort => sort.Add(s => s.ScheduledSendDate).Descending())
25.        .ServerOperation(false)
26.        .Create(config => config.Action("CreateNotification", "ActionIndicatorNotificationController"))
27.        .Update(config => config.Action("EditNotification", "ActionIndicatorNotificationController"))
28.        .Read(config => config.Action("Index", "ActionIndicatorNotificationController"))
29.      )
30.)

 

This is our scripting for this page 

01.<script>
02.    $(function () {
03.        console.log("Grid loading scripts")
04.        var gridData = $('#NotificiationGrid').data('kendoGrid');
05.
06.        var options = gridData.options;
07.        options.editable.mode = "popup";
08.        options.editable.template = $("#template-edit").html();
09.        gridData.setOptions(options);
10.
11.        gridData.bind("edit", editData_change);
12.
13.        hideButtons();
14.    })
15.
16.    function editData_change(e) {
17.        if (e.model.isNew()) {
18.            $("div.k-window").find(".k-window-title").text("custom header text");
19.            $("div.k-window").find(".k-edit-buttons .k-grid-update").text("custom edit");
20.            $("div.k-window").find(".k-edit-buttons .k-grid-cancel").text("custom cancel");
21.        }
22.
23.        hideButtons()
24.
25.        $(".k-grid-cancel").on("click", function () {
26.            setTimeout(function () {
27.                hideButtons();
28.            });
29.        })
30.    }
31.
32.    function hideButtons() {
33.        $("#NotificiationGrid tbody tr .k-grid-edit").each(function () {
34.            var currentDataItem = $("#NotificiationGrid").data("kendoGrid").dataItem($(this).closest("tr"));
35.
36.            console.log(`Data source item ${currentDataItem.Title} Send Date ${currentDataItem.SentDate} `);
37.            //Check in the current dataItem if the row is editable
38.            if (!!currentDataItem.SentDate) {
39.                $(this).remove();
40.            }
41.        })
42.
43.        $("#NotificiationGrid tbody tr .k-grid-delete").each(function () {
44.            var currentDataItem = $("#NotificiationGrid").data("kendoGrid").dataItem($(this).closest("tr"));
45.
46.            //Check in the current dataItem if the row is deletable
47.            if (!!currentDataItem.SentDate) {
48.                $(this).remove();
49.            }
50.        })
51.    }
52.</script>
53.
54.<script type="text/x-kendo-template" id="template-edit">
55.        #if(data.isNew()) {#
56.        #var createTemp = kendo.template($("\#createTemplate").html());#
57.        #=createTemp(data)#
58.        #} else {#
59.        #var editTemp = kendo.template($("\#editTemplate").html());#
60.        #=editTemp(data)#
61.        #}#
62.</script>
63.
64.<script type="text/x-kendo-template" id="createTemplate">
65.    @Html.Partial(@"CreateNotification")
66.</script>
67.
68.<script type="text/x-kendo-template" id="editTemplate">
69.    @Html.Partial(@"EditNotificationView")
70.</script>

 

All of this seems to work pretty good until we try and create or edit records

Here is our create modal it is in a separate file

01.@model ActionIndicatorNotification
02.
03.<div class="form-horizontal">
04.    <h4>Create Notification</h4>
05.    <hr />
06.    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
07.    <div class="form-group">
08.        <label asp-for="Title" class="col-md-2 control-label"></label>
09.        <div class="col-md-10">
10.            <input asp-for="Title" class="form-control" />
11.            <span asp-validation-for="Title" class="text-danger"></span>
12.        </div>
13.    </div>
14.
15.    <div class="form-group">
16.        <label asp-for="Text" class="col-md-2 control-label"></label>
17.        <div class="col-md-10">
18.            <input asp-for="Text" class="form-control" />
19.            <span asp-validation-for="Text" class="text-danger"></span>
20.        </div>
21.    </div>
22.    <div class="form-group">
23.        <label asp-for="ScheduledSendDate" class="col-md-2 control-label"></label>
24.        <div class="col-md-10">
25.            @(Html.Kendo().DateTimePicker()
26.                .Name("datetimepicker")
27.                .Events(e =>
28.                {
29.                    e.Change("change");
30.                })
31.            )
32.            <input id="date-input" asp-for="ScheduledSendDate" class="form-control" style="display: none" />
33.            <span asp-validation-for="ScheduledSendDate" class="text-danger"></span>
34.            <script>
35.                function change() {
36.                    $("#date-input").val(kendo.toString(this.value(), 'g'));
37.                }
38.            </script>
39.        </div>
40.    </div>
41.    <div class="form-group">
42.        <div class="col-md-offset-2 col-md-10">
43.            <input type="submit" value="Create" class="btn btn-info" />
44.            <a asp-controller="ActionIndicators" asp-action="Index" class="btn btn-default">Back to List</a>
45.        </div>
46.    </div>
47.</div>

 

The core issue that I can not seem to solve is that when a use decides to create a new item we get an error that a list of our model is being passed when it expects a single item.

 

Any help solving this issue would be fantastic. 

[Tsvetomir]

Hi Josh,

I have investigated the provided code snippets and it appears that everything is set up correctly. I have created a sample project which uses the provided resources. Find it attached to the current response.

Is it possible for you to modify it in order to replicate the faulty behavior and send it back to me?


Kind regards,
Tsvetomir
Progress Telerik