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

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

2 Answers 622 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tejpal
Top achievements
Rank 1
Tejpal asked on 02 Aug 2014, 07:57 AM
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>

2 Answers, 1 is accepted

Sort by
0
Tejpal
Top achievements
Rank 1
answered on 05 Aug 2014, 10:05 AM
Please help.

i am stuck with this.
0
Atanas Korchev
Telerik team
answered on 06 Aug 2014, 06:15 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Tejpal
Top achievements
Rank 1
Answers by
Tejpal
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or