[Solved] Grid inside a grid's popup

[Eduardo]

Hi,

I have a grid for EntregaTalonario set in popup edit mode, and an editor template for that model in which I've another grid for model Talonario, that have two properties with DataType("Integer") attribute. The problem is when the popup shows, the grid for Talonario have rendering problems (see attached image) and when I comment the two properties with DataType("Integer") everything is ok. The other issue I detect is in Remote validation, sometimes I get this error with firebug: 
a is undefined
http://localhost:1781/Scripts/2011.2.825/jquery.validate.min.js
Line 34

I think this happens when the request is still in the server but the input lose focus because I click in other place and then is replaced by a span, but  when the response came, jquery couldn't find that input

Models:

public class Talonario
    {
        [ScaffoldColumn(false)]
        public Decimal ID { get; set; }
 
        [ScaffoldColumn(false)]
        public Decimal ID_ENTREGA_TALONARIO { get; set; }
 
        [Required]
        [Remote("CheckInterval", "Talonario", AdditionalFields = "NUMERO_FINAL", ErrorMessage = "El intervalo usado no es válido.")]
        //[DataType("Integer")]
        public int NUMERO_INICIAL { get; set; }
 
        [Required]
        [Remote("CheckInterval", "Talonario", AdditionalFields = "NUMERO_INICIAL", ErrorMessage = "El intervalo usado no es válido.")]
        //[DataType("Integer")]
        public int NUMERO_FINAL { get; set; }

	...
    }

public class EntregaTalonario{
        [ScaffoldColumn(false)]
        public Decimal ID { get; set; }

        [Required]
        [Display(Name = "Serie")]
        public String SERIE { get; set; }
 
        [Required]
        [Display(Name = "Nombre recibe")]
        public String NOMBRE_RECIBE { get; set; }
 
        public IEnumerable<Talonario> Talonarios { get; set; }

	...
    }

View:

@using TasasServicios.Areas.retenciones.Models
@model IEnumerable<EntregaTalonario>
@{
    ViewBag.Title = "Talonarios";
}
@Html.Partial("Header_Contribuyente")
@{
    Html.Telerik().Grid<EntregaTalonario>().Name("entrega_talonario").Columns(cols =>
    {
        cols.Bound(r => r.ID_CONTRIBUYENTE_RETENEDOR).Hidden();
        cols.Bound(r => r.FECHA_ENTREGA).Title("Fecha");
        cols.Bound(r => r.NOMBRE_ENTREGA).Title("Nombre entrega");
        cols.Bound(r => r.NOMBRE_RECIBE).Title("Nombre recibe");
        cols.Bound(r => r.SERIE).Title("Serie");
    })
        .DetailView(det => det.ClientTemplate(Html.Telerik().Grid<Talonario>().Name("talonario_<#=ID#>")
            .DataKeys(key => key.Add(t => t.ID))
            .DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Talonario", new { ID_ENTREGA_TALONARIO = "<#=ID#>" }))
            .Columns(cols =>
            {
                cols.Bound(t => t.NUMERO_INICIAL).Title("Número inicial");
                cols.Bound(t => t.NUMERO_FINAL).Title("Número final");
            })
            .ToHtmlString()))
        .DataKeys(k => k.Add(r => r.ID))
        .Editable(e => e.Mode(GridEditMode.PopUp).DefaultDataItem(new EntregaTalonario
        {
            FECHA_ENTREGA = DateTime.Now,
            NOMBRE_ENTREGA = User.Identity.Name
        }))
        .ToolBar(t => t.Insert().ButtonType(GridButtonType.ImageAndText))
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax().Select("Select", "EntregaTalonario");
            dataBinding.Ajax().Insert("SaveChanges", "EntregaTalonario");
        })
        .Filterable()
        .Pageable()
        .Sortable()
        .Selectable()
        .Render();
}

and Editor Template:

@using TasasServicios.Areas.retenciones.Models

@model EntregaTalonario

<fieldset style="font-size: 1.2em; border-radius: 8px;">

    @Html.ValidationSummary()

    <div class="row col4">

        <div>

            @Html.LabelFor(m => m.FECHA_ENTREGA)<br />

            @Html.Telerik().DatePickerFor(m => m.FECHA_ENTREGA)

            @Html.ValidationMessageFor(m => m.FECHA_ENTREGA)

        </div>

        <div>

            @Html.LabelFor(m => m.NOMBRE_ENTREGA)<br />

            @Html.DisplayFor(m => m.NOMBRE_ENTREGA)

            @Html.ValidationMessageFor(m => m.NOMBRE_ENTREGA)

        </div>

        <div>

            @Html.LabelFor(m => m.NOMBRE_RECIBE)<br />

            @Html.EditorFor(m => m.NOMBRE_RECIBE)

            @Html.ValidationMessageFor(m => m.NOMBRE_RECIBE)

        </div>

        <div>

            @Html.LabelFor(m => m.SERIE)<br />

            @Html.EditorFor(m => m.SERIE)

            @Html.ValidationMessageFor(m => m.SERIE)

        </div>

        <p>

        </p>

    </div>

    @{

        Html.Telerik().Grid<Talonario>().Name("talonario")

            .Editable(e => e.Mode(GridEditMode.InCell))

            .DataKeys(k => k.Add(t => t.ID))

            .DataBinding(binding => binding.Ajax().Update("SaveChanges", "Talonario").Select("Select", "Talonario", new {id = 0}))

            .Columns(cols => {

                cols.Bound(t => t.NUMERO_INICIAL).HtmlAttributes(new { name = "NUMERO_INICIAL" }).Title("Número inicial");

                cols.Bound(t => t.NUMERO_FINAL).HtmlAttributes(new { name = "NUMERO_INICIAL" }).Title("Número final");

            })

            .ToolBar(t => t.Insert())

            .Render();

    }

</fieldset>

[Nikolay Rusev]

Hello Eduardo,

I am afraid that I am not able to replicate described issue. For your convenience I am attaching sample app based on the snippets in your post.

Regards,
Nikolay
the Telerik team

[Victor]

Hi!

I have a very similair problem (Json code after the grid) and was directed here. For me (and from the screenshot for you as well), the problem occurs when the second grid is inside the edit popup of the first, not when it is rendered as a sub-grid as you have done in your example. Interesting as a possible solution though!

Anyway - I could not easily reproduce the error using the attached code, but have modified it to show some problems:

• How to databind from grid 1 row-id to popup grid is a bit unclear (Edit: this can be seen since ParentId is alway 0 in popup grid)
• Edit/new buttons in popup grid closes the popup instead of editing/creating new

Maybe you can send some example code that is not working Eduardo, otherwise I will take a stab at creating a full demo of the problems.

Edit:
After giving it some more thought I realized that the problem is because both Eduardo and I use editortemplates for the cells (Eduardo uses up/down-controls and I was using a datatime control). After updating the example to use up/down-controls I get the described behavior from the original post and my original problem.


/Victor

[Eduardo]

Hi,

I check the last sample of Victor, and I see that the problem is the same. Also, I notice that when the DataType attributes are commented and the grid its working, both Remote validator are configured to send another field (ex: AdditionalFields = "NUMERO_FINAL") but the grid is not sending anything, I think because there is not field in the grid with that name, just a span element.

Victor, the scenario I'm working on require that parent_id is 0, because the client wants to insert (just insert, not delete or edit) both EntregaTalonario and Talonario, so I put in the popup the fields for EntregaTalonario and an empty grid for Talonario, and in server code I make the bindings. About the Edit/new buttons in popup grid closes, I think this happens if the grid has another telerik control, because if I the grid renders just an input, then there is no problem.

Thanks

[Nikolay Rusev]

Hello guys,

I am glad to inform you that we were able to pin-point the problem. The fix will be available in next internal build.
The issue was related with encoding the nested grid editors in case of grid as editor of another grid.

Best wishes,
Nikolay
the Telerik team

[Victor]

Ok, thanks for that!

When is that next internal build expected to ship / is there anything we can do in the meantime? Also - what is the preferred way of passing the id to the second (popup) grid? (The behaviour that ParentId is incorrect in v3 in my previous post)

Thanks again
/Victor

[Eduardo]

Thanks, Telerik!

By the way, Victor, check the attached solution, this solution doesn't work for me, but maybe works for you. It allows to insert parent first, and then insert the childs

Thanks again :D

[Victor]

Hi!

I'm not really sure what you are trying to do, but after adding the Telerik dll it compiles and seems to run. Attached is that project for convenience...

/Victor

[Nikolay Rusev]

Hello Victor,

To send the key of the parent grid while binding the nested grid you should use the following steps.
1. Attach handler for OnEdit client-side event of the parent grid
2. Attach handler for OnDataBinding of the nested grid
3. The code for both handlers

<script>

    var keys;
    function grid_edit(args)
    {
        keys = args.dataItem;
        $(args.form).find(".t-grid").data("tGrid").ajaxRequest({ID_ENTREGA_TALONARIO: keys.ID});
    }

    function grid_binding(args)
    {
        if(!keys) {
            args.preventDefault();
        }
    }
</script>

For your convenience I am attaching sample app. See the data send for SelectChild action method inside HomeController.

Regarding the internal build it will be available later today.

All the best,
Nikolay
the Telerik team

[Victor]

Thank you for that!
/Victor

[Eduardo]

Thank you, Telerik! I tested it and works perfect, but I still have the problem with Remote validator that I mention before. 

If you see in the first post, I've defined two Remote validator attributes that send another field, the problem is when the grid is in edit mode InCell, in the action I don't receive the other parameter, I think because there is not field in the grid with that name, just a span element.

[Nikolay Rusev]

Hello Eduardo,

Indeed this is due to the fact that there is  no editor for the other field while editing the first one.
The validator attempts to extract the value from input with name as the field, but such does not exists. In InCell editing mode only one cell/field is editable at the time.

In general you should use other editing mode for this scenario - InLine for example.

However you can patch the demo to work for your app. Bellow are the steps you need to perform.
1. Attach handler for OnEdit client event for the inner grid /the grid bound to Talonario model/.
2. The code for that handler

<script>
  function grid_edit(options){
        var rules = $.data(options.form, 'validator').settings.rules;

        if(rules.NUMERO_INICIAL) {
            rules.NUMERO_INICIAL.remote.data.NUMERO_FINAL = function() {
                return $(options.form).find(":input[name='NUMERO_INICIAL']").closest("td").next().text();
            }
        }

        if(rules.NUMERO_FINAL) {
            rules.NUMERO_FINAL.remote.data.NUMERO_INICIAL = function() {
                return $(options.form).find(":input[name='NUMERO_FINAL']").closest("td").prev().text();
            }
        }
    }
</script>

Best wishes,
Nikolay
the Telerik team

[Eduardo]

Thanks, Nikolay, it's working perfect, I just have to put this

var validator = $.data(options.form, 'validator');
if (validator) {...}

in the begining, because when I click Add new record, validator is null

Thanks again

[Ji]

Hi,

I'm using telerik version 2012.3.1018.340 and the following code doesn't bring any data on the edit event. Could someone help me please?$(args.form).find(".t-grid").data("tGrid")