[Solved] Upload image in Grid

[saroj]

Hello,

Can you help me How can i use upload option in Grid below to change the picture and also i want to save the picture directly into database table?


@(Html.Telerik().Grid<Customer>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.CustomerID)
.ClientTemplate("<img width='100' height='110' alt='<#= CustomerID #>' src='"
+ Url.Content("~/Content/Grid/Customers/")
+ "<#= CustomerID #>.jpg' />")
.Title("Picture");
columns.Bound(c => c.ContactName).Title("Name");
columns.Bound(c => c.Phone);
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("_TemplatesClientSide", "Grid"))
.Sortable()
.Scrollable()
.Pageable()
)

[Petur Subev]

Hi Saroj,

You should take a look at this code library article which shows how to use the Grid in combination with the Upload to display and edit images.

Regards,
Petur Subev
the Telerik team

[saroj]

Hi Petur,

I am just trying to upload only the picture column in grid, i don't want to edit other column information. Is it possible to use upload option just under image so that it pop up the another window which allows me to select the image, as it does in your upload demo. for example is there any function like grid.uploadButton(). Can you see my below code as i have added edit option only under image column as + grid.EditButton(null) + , instead of that i want upload option.

@(Html.Telerik().Grid<

 

PersonnelNavQueryModels>()

.Name(

 

"Personnel")

 

 

.Scrollable(scrolling => scrolling.Height(700))

 

.Filterable(filtering => filtering.Enabled(

 

true))

.DataKeys(keys => keys.Add(t => t.PERSONNEL_ID))

.DataBinding(dataBinding => dataBinding.Ajax()

.Select(

 

"_PersonnelNavQuery", "Personnel"))

.Reorderable(reorder => reorder.Columns(

 

true))

.Columns(columns =>

{

columns.Bound(c => c.IMAGE_NAME)

.ClientTemplate(

 

.ClientTemplate("<a class='imagePopupTrigger' href='#' rel='" + Url.Content("~/Content/Pictures/<#= IMAGE_NAME#>") + "'><img alt='" + Url.Content("~/Content/Pictures/<#= IMAGE_NAME#>") + "' src='" + Url.Content("~/Content/Pictures/<#= IMAGE_NAME#>") + "' width='40' height='40'/></a>")

.Title(

 

"Personnel details").Width(100).Hidden(true);

columns.Bound(t => t.TITLE).Title(

 

"Title").Hidden(true);

columns.Bound(t => t.PERSONNEL_NAME).Title(

 

"Name").Hidden(true);

columns.Bound(t => t.ADDRESS1).Title(

 

"Address1").Hidden(true);

columns.Bound(t => t.MOBILE).Title(

 

"Mobile").Hidden(true);

columns.Bound(t => t.EMAIL).Title(

 

"Email").Title("Email").Hidden(true);

columns.Bound(t => t.FAX).Title(

 

"Fax").Hidden(true);

 

 

 

 

})

.ClientRowTemplate(grid =>

 

"<table> " +

 

"<tr>" +

 

"<td width='100px' >" +

 

"<a class='imagePopupTrigger' href='#' rel='" + Url.Content("~/Content/Pictures/<#= IMAGE_NAME#>") + "'><img alt='" + Url.Content("~/Content/Pictures/<#= IMAGE_NAME#>") + "' src='" + Url.Content("~/Content/Pictures/<#= IMAGE_NAME#>") + "' width='60' height='60'/></a>" + grid.EditButton(null) +

 

"</td>" +

 

"<td width='400px'>" +

 

"Salutation: <#= TITLE #>" +

 

"<br />" +

 

"Name: <#= PERSONNEL_NAME #>" +

 

"<br />" +

 

"Job title:" +

 

"</td>" +

 

"<td>" +

 

"Address: <#= ADDRESS1 #> <#= ADDRESS2 #> <#= ADDRESS3 #> " +

 

"<br />" +

 

"Phone: <#= PHONE #>" +

 

"<br />" +

 

"Mobile: <#= MOBILE #>" +

 

"</td>" +

 

"<td>" +

 

"Email: <#= EMAIL #> " +

 

"<br />" +

 

"Fax: <#= FAX #>" +

 

"</td>" +

 

"</tr>" +

 

"</table>"

)

[Petur Subev]

Hello again Saroj,

You should use a ClientTempalte for that particular column and render the upload control inside of it (using different name).
e.g.

.ClientTemplate("<img src='/Content/UserFiles/<#= Picture #>' alt='<#= Name #>' />"+
                    Html.Telerik().Upload()
                        .Name("attachments<#= RecordID #>")
                        .Async(async => async
                            .Save("Action", "Controller", fieldName: "image")
                        )
                 )

Then the action method should accept an argument called image, also you will need to send additional value to the controller (id) which indicates which is the related item to that image in the (like shown in the code library project).
Of course when the save action is finished - on the client you will need to handle the onSuccess event to update the related image src attribute so it displays the new image.

All the best,
Petur Subev
the Telerik team

[Swapnil]

Hi Telerik team,
Even I am stuck with the same problem; please elaborate a bit more on your solution as how does your action method look like. 
I have followed your solution like u described,

.ClientTemplate("<img src='/Content/UserFiles/<#= Picture #>' alt='<#= Name #>' />"+

                    Html.Telerik().Upload()

                        .Name("attachments<#= RecordID #>")                        

                        .Async(async => async

                            .Save("Action", "Controller", fieldName: "image")                          

                        )

                 )

But, still I am not able to get the file object in my controller action, though its able to hit the method after selection of file. 

[Petur Subev]

Hello guys,

I created a code-library which implements the scenario I explained in my previous post- you can find it here.
I hope it helps and makes everything clear.

All the best,
Petur Subev
the Telerik team

[saroj]

Hi Petur,

That helps a lot.

But still i am wondering about how can we call the action method so that it actually change the image src in the database(or overwrite the file). 

also i am using the Entity Framework, so will it be same with Entity Framewwork also?   

Regards,