kendo grid with image upload control and upload image with SignalR only

[Tejpal]

hi,

I am creating Kendo Grid which use SignalR for CRUD operation.

but now i want custom image upload control in grid and when image saved on physical path need that URL to save in db.


i have created grid and added custom control but don't know how to integrate it with signalr for custom control.

please help me to upload image with signalr methods and get URL in control for main grid submit button click.

Thank you.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<div id="organizations-grid"></div>

<script>
    $(document).ready(function () {
        var orgnaizationPnl = {
            organizations: {
                init: function () {


                    function fileUploadEditor(container, options) {
                        $('<input type="file" name="fileUpload" id="fileUpload" />')
                            .appendTo(container)
                            .kendoUpload({
                                async: {
                                    saveUrl: "",
                                    removeUrl: ""
                                },
                            });
                    }


                    var organizationDataSource = new kendo.data.DataSource({
                        type: "signalr",
                        autoSync: false,
                        // Handle the push event to display notifications when push updates arrive
                        push: function (e) {
                            //var notification = $("#notification").data("kendoNotification");
                            //notification.success(e.type);
                        },
                        schema: {
                            model: {
                                id: "ShortName",
                                fields: {
                                    "ShortName": { editable: true, nullable: false, validation: { required: true } },
                                    "Image": { editable: true, nullable: false, validation: { required: true } },
                                    "Name": { editable: true, nullable: false, validation: { required: true } }
                                }
                            }
                        },
                        transport: {
                            signalr: {
                                promise: hubStart,
                                hub: hub,
                                server: {
                                    read: "readOrganizations",
                                    destroy: "destroyOrganization",
                                    update: "updateOrganization",
                                    create: "createOrganization"
                                },
                                client: {
                                    read: "readOrganizations",
                                    destroy: "destroyOrganization",
                                    update: "updateOrganization",
                                    create: "createOrganization"
                                }
                            }
                        }
                    });

                    var organizationGrid = $("#organizations-grid").kendoGrid({
                        dataSource: organizationDataSource,
                        height: 700,
                        toolbar: [{ name: "create", text: "Add Organization" }],  /*, "save", "cancel"*/
                        sortable: true,
                        pageable: true,
                        columns: [{
                            field: "ShortName",
                            title: "Organization Name",
                            width: 200
                        }, {
                            field: "Image",
                            title: "Image Url",
                            width: 200,
                            editor: fileUploadEditor
                        }, {
                            field: "Name",
                            title: "Title"
                        },
                        {
                            command: [{ name: "edit", text: "Edit" }, { name: "destroy", text: "Delete" }],
                            title: "&nbsp;",
                            width: 200
                        }],
                        editable: {
                            mode: "popup",
                            confirmation: true
                        },
                        edit: function (e) {
                            if (e.model.isNew()) {
                                e.container.data("kendoWindow").title('Add New Organization');
                                e.container.find(".k-button.k-grid-update").html("<span class='k-icon k-update'></span>Insert");
                            }
                            else {
                                e.container.data("kendoWindow").title('Edit Organization');
                                $('input[name=ShortName]').parent().html(e.model.ShortName);
                            }
                        },
                        save: function (e) {
                            if (e.model.isNew()) {
                                var currentShortName = e.model.ShortName;
                                var data = this.dataSource.data();
                                for (item in data) {
                                    if (data[item].id == currentShortName && data[item].ShortName == currentShortName) {
                                        e.preventDefault();
                                        alert("Organization Name Exists.");
                                    }
                                }
                            }
                        }
                    });
                }
            }
        }
        orgnaizationPnl.organizations.init();
    });
</script>

[Tejpal]

Please help.

i am stuck with this.

[Atanas Korchev]

Hello,

SignalR doesn't support uploading files. You need to upload the file in some other way. I recommend checking the async upload demo and documentation.

Regards,
Atanas Korchev
Telerik