Not able to pass data from Telerik Grid in Submit form.

2 Answers 97 Views
Grid
Andi
Top achievements
Rank 1
Iron
Iron
Andi asked on 10 Oct 2023, 01:40 PM | edited on 10 Oct 2023, 05:08 PM

Hi,

I am trying to submit multiple POMaterials through this form. But it doesn't work. I entered a breakpoint to check if data is being passed from the view, but I get null entry for all the Entries in the grid.

 

 

<form asp-action="CreatePO" id="PorequestForm" name="PorequestForm"><div asp-validation-summary="ModelOnly" class="text-danger"></div><fieldset><legend>Materials</legend> @*@Html.LabelFor(category => category.Justification) @Html.EditorFor(category => category.Justification)*@ @( Html.Kendo().Grid(Model.POMaterials) .Name("PoMaterial") .ToolBar(tools => tools.Create().Text("Add PO Materials")) .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom)) .Columns(columns => { columns.Bound(p => p.ItemNumber).ClientTemplate("#= ItemNumber #" + "<input type='hidden' name='POMaterial[#= index(data)#].ItemNumber' value='#= ItemNumber #' />" ); columns.Bound(p => p.Description).ClientTemplate("#= Description #" + "<input type='hidden' name='POMaterial[#= index(data)#].Description' value='#= Description #' />" ); columns.Bound(p => p.Amount).ClientTemplate("#= Amount #" + "<input type='hidden' name='POMaterial[#= index(data)#].Amount' value='#= Amount #'/>" ); columns.Bound(p => p.UnitCost).ClientTemplate("#= UnitCost #" + "<input type='hidden' name='POMaterial[#= index(data)#].UnitCost' value='#= UnitCost #' />" ); columns.Bound(p => p.PomaterialId).Hidden().ClientTemplate("#= PomaterialId #" + "<input type='hidden' name='POMaterial[#= index(data)#].PomaterialId' value='#= PomaterialId #' />" ); columns.Command(command => command.Destroy()).Width(100); }) .DataSource(dataSource => dataSource.Ajax() .Model(model => { model.Id(p => p.PomaterialId); model.Field(p => p.PomaterialId).Editable(false); }) .Batch(true) //.Read(read => read.Action("ReadPoRequest", "Grid")) //.Create(create => create.Action("AddPORequest", "Grid")) .ServerOperation(false) ) ) </fieldset>

 

</form>

public IActionResult CreatePO() { ViewData["WorkflowStatusId"] = new SelectList(_ob.WorkFlowStatuses.ToList(), "WorkFlowStatusId", "Value"); ViewData["ApprovalStatusId"] = new SelectList(_ob.ApprovalStatuses.ToList(), "ApprovalId", "Value"); TempData["poId"] = _ob.Porequests.Max(x => x.Id + 1); return View(new Porequest()); } [HttpPost] //[ValidateAntiForgeryToken] public IActionResult CreatePO(Porequest porequest) { porequest.VendorId = (int)TempData["VenId"];//Insert breakpoint here to check for the values being passed by the view _ob.Add(porequest); _ob.SaveChanges(); return RedirectToAction(nameof(PurchaseOrders));

}

Script it is located here

<script>
    function index(dataItem) {
        var data = $("#PoMaterial").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }
</script>


Andi
Top achievements
Rank 1
Iron
Iron
commented on 10 Oct 2023, 02:15 PM

I wanted to add that I have created a simple table with html and javascript and the data passes by.

Here is with the grid

2 Answers, 1 is accepted

Sort by
0
Accepted
Mihaela
Telerik team
answered on 13 Oct 2023, 09:48 AM

Hello Andi,

Thank you for providing the complete Grid configuration and Controller Actions.

I examined them, and noticed a typo in the Grid Name() - since the Model property is "POMaterials", you need to ensure that the Grid is set up with the same name:

@(Html.Kendo().Grid(Model.POMaterials)
                .Name("PoMaterials")
                .ToolBar(tools => tools.Create().Text("Add PO Materials"))
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                .Columns(columns =>
                {
                  columns.Bound(p => p.ItemNumber).ClientTemplate("#= ItemNumber #" +
                  "<input type='hidden' name='POMaterials[#= index(data)#].ItemNumber' value='#= ItemNumber #' />"
                  );
                ...
            })
            ....
)

<script>
    function index(dataItem) {
        var data = $("#POMaterials").data("kendoGrid").dataSource.data();
        return data.indexOf(dataItem);
    }
</script>

Also, I have tested the overall setup within the attached runnable sample, and I can confirm that the Grid's data is submitted successfully to the server.

I hope that helps.

 

Regards,
Mihaela
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
0
Andi
Top achievements
Rank 1
Iron
Iron
answered on 13 Oct 2023, 12:31 PM

Mihaela thank you.

Wow I have been going crazy for this I even built a table with JS for bootstrap, to find out that I miss-typed this the whole time.

Thank you so much for your help.  I should have noticed.

Best framework around.

Tags
Grid
Asked by
Andi
Top achievements
Rank 1
Iron
Iron
Answers by
Mihaela
Telerik team
Andi
Top achievements
Rank 1
Iron
Iron
Share this question
or