how can i dynamically add row in mvc Telerik grid by Json?

Question

without any losing time i have to say about my problem .i take pic from my project because its more helpful for Gide me .i have one Telerik MVC grid that it has not any item, when user clicked in number 1 popup window show and user clicked on code and in 3 state user clicked add new button and one row that related to selected id data add to the grid my problem is i handle this problem by Json but i get 500 error in firebug and i cannot see any result in my grid any suggestion would be welcome thanks for advance enter image description here

$("#btnadd").button().click(function () {
        $.ajax({
            dataType: "json",
            url: "../Shared/GetItems",
            data: $("#SparePartCode").val(),
            success: function (json) {
                var grid = $('#InvoiceItemGrid').data('tGrid');
                alert("jsonresualt");
                grid.dataBind(json);
            }
        });
    });
    private IList<PartBooklet> GetPartBooklet(int sparepart)
        {
            return _PartBookletService.GetList().Where(m => m.SparePartCode == sparepart).ToList();
        }

        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult GetItems(int sparepart)
        {
            var PartbookletList = this.GetPartBooklet((sparepart));
            var partbookletData = PartbookletList.Select(m => new SelectListItem()
            {
                Text = m.Title,
                Value = m.Id.ToString(),
            });

            return Json(partbookletData, JsonRequestBehavior.AllowGet);
        }

grids are rendered as an html table on the view. I would look at http://stackoverflow.com/questions/171027/add-table-row-in-jquery and see if adding a row that way works for you — Matt Bodily, Sep 18 '13 at 22:52

score 0 · Answer 1 · answered Sep 30 '15 at 07:12

It works for me. Please find below code for how can i dynamically add row in mvc Telerik grid by Json.

MVC Razor html

<div  style="height:100%; overflow:scroll;" >
            @(Html.Telerik().Grid<VehicleSurveyAttachmentModel>()
                .Name("GridFilelist")
                .DataKeys(dk => dk.Add(gfl => gfl.RecordNo))
                .Columns(column =>
                    {
                        column.Bound(f => f.RecordNo).Hidden(true);
                        column.Template(@<text><img alt="attachedImage" class="surveyImg" src="@Url.Content("../Images/gui_logo.gif")" /> </text>);
                        column.Command(cmd => { cmd.Delete().Text("Remove").ButtonType(GridButtonType.Image); });
                    }                    
                    )
                    .DataBinding(dataBinding => dataBinding.Ajax()
                                .Delete("_AjaxDeleteImage", "VehicleSurvey"))                                                    
                    .Footer(false)
                    .HtmlAttributes(new { @style = "width:100%" })
                    .Scrollable()
            )
            </div>

Jquery

  $(function () {
            $("#fattach").change(function () {
                alert($("#fattach").val().substring($("#fattach").val().lastIndexOf('\\') + 1));
                var attachfile = $('#fattach').val();
                attachList(attachfile);
            });
            $("#fcapture").change(function () {
                alert($("#fcapture").val());
            });
        });

        function attachList(filename)
        {
            //debugger;
            $.ajax({
                url: '/VehicleSurvey/UpdateFileList',
                type: 'POST',
                data: { fname: filename },
                dataType: "json",
                success: function (result) {
                    var grid = $("#GridFilelist").data("tGrid");
                    grid.dataBind(result.result);
                 //   $('#GridFilelist').data('t-grid').ajaxRequest();
                },
                error: function () {
                    alert("error");
                }
            });
        }

Mvc3

 // Add attachment to GridList dynamically.
        [HttpPost]
        public JsonResult UpdateFileList(string fname)
        {
            VehicleSurveyAttachmentModel vsattach = new VehicleSurveyAttachmentModel();
            TryUpdateModel(vsattach);
            vsattach.Status = GridProcess.Insert;
            List<VehicleSurveyAttachmentModel> listImgFiles = new List<VehicleSurveyAttachmentModel>();
            listImgFiles = (List<VehicleSurveyAttachmentModel>)Session["filelist"];
            if (listImgFiles != null && listImgFiles.Count > 0)
            {
                var indexmatch = listImgFiles.Select(a => a.index).Max();
                vsattach.index = indexmatch + 1;
                vsattach.FileName = fname;
            }
            else { vsattach.index = 1; vsattach.FileName = fname; }
            listImgFiles.Add(vsattach);
            Session["filelist"] = listImgFiles;
            return Json(new {result = listImgFiles.ToList() } , JsonRequestBehavior.AllowGet );
        }

how can i dynamically add row in mvc Telerik grid by Json?

1 Answers1