Populate grid values to form

[Prashanth]

Hi,

I am new to Telerik at. I have a scenario where I click on the grid record I am taken to a form with the values populated. With the help of some online resources I was able to populate when the form and grid was kept in the same view. However, when I have a separate view I don't get my values populated.Where am I going wrong? Any help is greatly appreciated. Thanks in advance

My grid looks like - Index.cshtml

@(Html.Kendo().Grid<TabGrid.Models.ORM_MT_STATUS>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.STATUS_ID);
          columns.Bound(c => c.STATUS_DESCRIPTION);
          columns.Bound(c => c.CreatedBy);
          columns.Bound(c => c.CreatedDate);
          columns.Bound(c => c.CreatedIP);
          columns.Bound(c => c.UpdatedBy);
          columns.Bound(c => c.UpdatedDate);
          columns.Bound(c => c.UpdatedIP);
         ;

      })
      .ToolBar(toolbar => {
          toolbar.Excel();
      })

      .ColumnMenu()
      .Pageable()
      .Navigatable()
      .Selectable(selectable => {
          selectable.Mode(GridSelectionMode.Single);
          selectable.Type(GridSelectionType.Row);
      })
      .Sortable(sortable => {
          sortable.SortMode(GridSortMode.SingleColumn);
      })
      .Filterable()
      .Scrollable()
      .Events(events => {
          events.Change("onChange");

      })
      .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("ORM_MT_STATUS_Read", "Status"))
      )
)


<script>

   function fillForm(dataItem) {
        var columns = $("#grid").data("kendoGrid").options.columns;
        var id = dataItem.STATUS_ID;
        var form = $("form");

        for (var i = 0; i < columns.length; i++) {
            var field = columns[i].field;
            form.find("#" + field).val(dataItem[field]);

        }
       // window.location.href = "@Url.Action( "form", "Status")" + "?STATUS_ID" + id;
    }

    function onChange(e) {
        //var grid = $("#grid").data("kendoGrid");
        var dataItem = this.dataItem(this.select());
        fillForm(dataItem);
    }

</script>

 

My form looks like - form.cshtml

@{
    ViewBag.Title = "form";
}

<h2>form</h2>
<div class="demo-section k-content capitalize">

    <div id="validation-success"></div>
    @(Html.Kendo().Form<TabGrid.Models.ORM_MT_STATUS>
    ()
    .Name("form")
    .HtmlAttributes(new { action = "form", method = "POST" })
    .Validatable(v =>
    {
        v.ValidateOnBlur(true);
        v.ValidationSummary(vs => vs.Enable(true));
    })
    .Items(items =>
    {
    items.AddGroup()
    .Label("Status Management Form")
    .Items(i =>
    {
    i.Add()
    .Field(f => f.STATUS_ID).InputHtmlAttributes(new{ @readonly ="readonly"})
    .Label(l => l.Text("ID:"));

    i.Add()
    .Field(f => f.STATUS_DESCRIPTION)
    //.InputHtmlAttributes(class="capitaize")
    .InputHtmlAttributes(new { onkeyup = "this.value = this.value.initcaps();" })
    .Label(l => l.Text("Status:"));

    });

    })
    .Events(ev => ev.ValidateField("onFormValidateField").Submit("onFormSubmit").Clear("onFormClear"))

    )
</div>
@*<div>@Html.Action("Add")</div>*@
<script>
    function disablefield() {
        document.getElementById("id").disabled = true;
    }
    function onFormValidateField(e) {
        $("#validation-success").html("");
    }

    function onFormSubmit(e) {
        e.preventDefault();
        $("#validation-success").html("<div class='k-messagebox k-messagebox-success'>Form data is valid!</div>");
    }

    function onFormClear(e) {
        $("#validation-success").html("");
    }

</script>

[Eyup]

Hello Prashanth,

 

I would suggest that you check the following approaches for this kind of implementation:

1. Build-in Pop-up editor:

https://demos.telerik.com/aspnet-mvc/grid/editing-popup

2. Custom Pop-up editor:
https://docs.telerik.com/kendo-ui/knowledge-base/grid-search-panel-with-multiple-values

3. If the previous 2 options won't work for you, you can check this implementation:
https://docs.telerik.com/kendo-ui/knowledge-base/grid-external-form-editing

I hope these suggestions will prove helpful to you.

 

Regards,
Eyup
Progress Telerik

[Prashanth]

Hi Eyup,

Thanks for your prompt response. I am looking at the External forms only as mentioned in point 3. As given in the example, I am able to populate my values from the grid if I have my form in the same view. However, I am lost when I try to redirect into a separate Edit view. Any guidance or sample is highly appreciated. 

[Eyup]

Hi Prashanth,

 

Could you send me some screenshots or drawings demonstrating the desired appearance and behavior? I will then proceed with creating a working sample and send it to you.

 

Regards,
Eyup
Progress Telerik

[Prashanth]

Hi Eyup,

Please find the screenshot below, I plan to have a tabstrip with two tabs 'View' and 'Add/Edit'. In the 'View' tab I will be able to view the grid and when I select on the row I shall be able to populate the values on to a kendo form placed on the 'Add/Edit' tab.I shall also be able to add or insert new values from the Add/Edit tab as well. I intend to use a stored procedure to access the database. Thanks in advance for your support.  

[Eyup]

Hi Prashanth,

 

You could use the add() and set() methods provided by the Kendo dataSource and observable instances to achieve this requirement. Here is a jQuery sample which would be analagous to the MVC solution:
https://dojo.telerik.com/uhUBOWak/7

When you add a new record, it will not only place it in the dataSource, but also open the Tab of the grid and show to last page where the new item is located.

 

Regards,
Eyup
Progress Telerik

[Prashanth]

Hi Eyup,

Thanks a lot for your response and sharing the dojo snippet. I shall have a look at it and revert back soon in case of queries.

Regards,

Prashanth

 

[Eyup]

Hello Prashanth,

 

Feel free to take your time and let us know if new questions arise.

 

Regards,
Eyup
Progress Telerik