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

CRUD template(s)

5 Answers 90 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Maxim
Top achievements
Rank 1
Maxim asked on 20 Nov 2012, 07:35 PM
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

5 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 21 Nov 2012, 07:54 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Maxim
Top achievements
Rank 1
answered on 21 Nov 2012, 03:41 PM
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
0
Maxim
Top achievements
Rank 1
answered on 21 Nov 2012, 03:47 PM
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();
            }
        }
0
Accepted
Rosen
Telerik team
answered on 21 Nov 2012, 04:10 PM
Hello Maxim,

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

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Maxim
Top achievements
Rank 1
answered on 21 Nov 2012, 04:25 PM
Thanks, That works. :D
Tags
Grid
Asked by
Maxim
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Maxim
Top achievements
Rank 1
Share this question
or