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

[Andi]

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]

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

[Mihaela]

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

[Andi]

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.