CRUD template(s)

[Maxim]

Hi,

Is there a way to provide a custom popup editor for each  CRUD operation or wire in your own editor? A simple sample would be highly appreciated.

Thanks,
Max

[Rosen]

Hello Maxim,

In order to customize the popUp editor, you may use the template option of the editable settings. Here you can find a basic example.

However, note that the same editor is used for both updating of new and already existing records.

Regards,
Rosen
the Telerik team

[Maxim]

Hi Rosen,

Thank for the sample, but I am well aware of this functionality and it is insufficient for my needs. Any way I figured a workaround for this issue and here is a sample code. May be you can provide a better solution once you have a look at what I have done.
1. Define two templates one for add and another one for edit in your page. PS: I use type="text/html" for editing and later will flip to type="text/x-kendo-template".

<script type="text/html" id="research-workbench-add-template">

    <div>

        <p><label for="analyst">Company</label><input name="company" id="company" data-bind="value: Analyst"/></p>

        <p><label for="analyst">Analyst</label><input name="analyst" id="analyst" data-bind="value: Analyst"/></p>

        <p><label for="priority">Priority</label><input name="priority" id="priority" data-bind="value: Priority"/></p>

    </div>

</script>

<script type="text/html" id="research-workbench-edit-template">

    <div>

        <p><label for="analyst">Analyst</label><input name="analyst" id="analyst" data-bind="value: Analyst"/></p>

        <p><label for="priority">Priority</label><input name="priority" id="priority" data-bind="value: Priority"/></p>

    </div>

</script>

2. In document ready i setup event delegates. Why? I need to wire up an event handler on edit button of mu grid that will be called before any other kendo stuff happens. PS: I wish you can do it in command config but click there happens after most of the stuff is done.

$(function () {

    $("#research-workbench").on("click", "div.k-grid-content a.k-grid-edit", function (event) {

        //console.log("research-workbench-add-template", event);

        $("#research-workbench").attr("data-editor-template", "research-workbench-edit-template");

    });

3. Setup editable config as seen below. In this part we are reading template id that will be used in our popup editor.

$("#research-workbench").kendoGrid({

    editable: {

        mode: "popup",

        destroy: true,

        template: function () {

            var template = $("#research-workbench").attr("data-editor-template");

            return $("#" + template).html();

        }

    },

    toolbar: [

        {

            name: "create",

            text: "Add"

        }],

4. That last thing is to bind add tool button to the click event. PS: I try to use jquery.on pattern on it but for some reason the event only being called after kendo already done some things.

$("#research-workbench > div.k-grid-toolbar > a.k-grid-add").bind("click", function (event) {

    $("#research-workbench").attr("data-editor-template", "research-workbench-add-template");

});

Let me know what you think.
Thanks,
max

[Maxim]

Scrap all of the above... I just try something and it worked.
Apparently if you assign a function to template kendo ui will pass a model as an argument. In this case code below will be change to. PS: Make sure  your model has a filed that you can use to distinguished between edit and add.

$(function () {

    $("#research-workbench").kendoGrid({

        editable: {

            mode: "popup",

            destroy: true,

            template: function (e) {

                if (!e.id) {

                    return $("#research-workbench-add-template").html();

                }

                return $("#research-workbench-edit-template").html();

            }

        }

[Rosen]

Hello Maxim,

You can you the isNew method to differentiate new and  already existing models.

Regards,
Rosen
the Telerik team

[Maxim]

Thanks, That works. :D