Click here to Skip to main content
15,743,714 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I want to list images from DB or from a folder.
After listing, i need to add or delete images to the existing list.
How can i achieve this.
Thanks in advance.


 <input type="button" class="btn btn-default btn-small" value="Attach Image " id="btnAttachImage" onclick="$("#fattach").click();"/>
<input id="fattach" type="file" name="files" value="" style="display:none;"/>
  $("#fattach").change(function () {
                //alert($("#fattach").val().substring($("#fattach").val().lastIndexOf('\\') + 1));
                var attachfile = $('#fattach').val();
  function attachList(filename)
                url: '/VehicleSurvey/UpdateFileList',
                type: 'POST',
                data: { fname: filename },
                dataType: "json",
                success: function (result) {
                    var grid = $("#GridFilelist").data("tGrid");
                 //   $('#GridFilelist').data('t-grid').ajaxRequest();
                error: function () {
                .DataKeys(dk =&gt; dk.Add(gfl =&gt; gfl.RecordNo))
                .Columns(column =&gt;
                        column.Bound(f =&gt; f.RecordNo).Hidden(true);
                       @* column.Template(@<text>&lt;img alt="attachedImage" class="surveyImg" src="@Url.Content("../Images/gui_logo.gif")" /&gt; </text>);*@
                        column.Bound(f =&gt; f.FileName)
                            .ClientTemplate("&lt;img alt='&lt;#= FileName #&gt;' src='" + Url.Content("../Images/") + "&lt;#= FileName #&gt;.jpg' /&gt;").Title("Picture");
                        column.Command(cmd =&gt; { cmd.Delete().Text("Remove").ButtonType(GridButtonType.Image); });
                    .DataBinding(dataBinding =&gt; dataBinding.Ajax()
                                .Delete("_AjaxDeleteImage", "VehicleSurvey"))
                    .HtmlAttributes(new { @style = "width:80%" })
                    .Scrollable(scr =&gt; scr.Height(100))

Updated 30-Sep-15 6:27am
Krunal Rohit 29-Sep-15 4:46am    
Any luck so far ?

SamRST 29-Sep-15 8:55am    
Not yer

1 solution

As you have tagged the question as Telerik, see this,
Kendo Grid[^]
Excellent demo with code.
Share this answer
SamRST 29-Sep-15 9:01am    
I use Telerik controls in the project. But my requirement is...

1. Populate the grid with images from DB table.
2. User can able to add new or delete images in the grid list.
Maciej Los 29-Sep-15 12:58pm    
Oh yeah? What have you tried? What database?
SamRST 30-Sep-15 2:18am    
Sqlserver 2008 Database
Maciej Los 30-Sep-15 2:21am    
You didn't answer my first question...
SamRST 30-Sep-15 4:04am    
I tried
1.populate telerik grid with model data.
2.tried to upload image to telerik grid as new row.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900