I have a grid that I want to have a secondary grid show if the user clicks the detail. Normally I have a databound method that is called on the parent grid to color the rows based on the data there but I don't seem to be able to do this for the parent grid if I use the client detail template for the secondary grid. Am I missing something? here is the grid declarations for both grids. It works if i remove the client detail grid.

@(Html.Kendo().Grid<tbl_Quote_Scheduled_Locations>()
                  .Name("locations")
                  .DataSource(datasource => datasource
                      .Ajax()
                      .Model(model => model.Id(p => p.Id))
                      .Read(read => read.Action("LocationsGetList", "Import").Data("onLocationRead"))
                      .Update(update => update.Action("UpdateLocation", "Import"))
                      .Destroy(update => update.Action("DeleteLocation", "Import"))
                      .Aggregates(agg =>
                      {
                          agg.Add("LocationName", typeof(int?)).Count();
                          agg.Add(p => p.TIV).Sum();
                      })
                      .Events(e => e.RequestEnd("onChange"))
                  )
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.LocationName).Title("Location Name").ClientFooterTemplate("Count: #=count#");
                      columns.Bound(p => p.Address).Title("Address");
                      columns.Bound(p => p.City).Title("City");
                      columns.Bound(p => p.State).Title("State");
                      columns.Bound(p => p.Zip).Title("Zipcode");
                      columns.Bound(p => p.TIV).Title("TIV").Format("{0:c}").ClientFooterTemplate("Total TIV: #=kendo.toString(sum, 'C')#");
                      columns.Bound(p => p.Error).Hidden(true);
                      columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                      });
                  })
                  .Events(e => e
                      .DataBound("onLocationsGridBound")
                  )
                  .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Location"))
                  .ClientDetailTemplateId("errorTemplate")
            )

<script id="errorTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ReturnLocationErrors_Result>()
          .Name("error_#=Id#")
          .Columns(col =>
          {
              col.Bound(o => o.LocationId).Hidden(true);
              col.Bound(o => o.ErrorDetail);
          })
          .DataSource(s => s
              .Ajax()
              .Read(read => read.Action("GetLocationErrors", "Import", new {locationId = "#=Id#"}))
        )
          .ToClientTemplate()
    )
</script>

    function onLocationsGridBound() {
        var data = this._data;
        for (var x = 0; x < data.length; x++) {
            var dataItem = data[x];
            var tr = $("#locations").find("[data-uid='" + dataItem.uid + "']");
            console.log(tr);
            var cell = $("td:nth-child(7)", tr);
            if (cell[0].textContent == "1") {
                tr.addClass("ErrorColor");
            }
        }
    }

Hello community!

I have a problem with my grid and the popup-editing feature.

In my popup there is another grid which needs the email address from the selected row from parent grid (to get the right data in the child grid).

I already tried the "grid.dataItem(grid.select())"-Function. But its return false.

Maybe I misunderstand the problem.

This is my Main-Grid:

@(Html.Kendo().Grid<NPHE2016Management.Models.MailboxViewModel>()
            .Name("mailboxes")
            .Columns(columns =>
            {
                columns.Bound(c => c.mailboxID).Hidden();
                columns.Bound(c => c.upn).Hidden();
                columns.Bound(c => c.mailboxType);
                columns.Bound(c => c.firstName);
                columns.Bound(c => c.lastName);
                columns.Bound(c => c.email);
                columns.Bound(c => c.mailboxSize).Title("Mailbox Größe (MB)");
                columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(150);
            })
            .ToolBar(toolbar => toolbar.Create())
            .HtmlAttributes(new { style = "height: 550px;" })
            .Scrollable()
            .Sortable()
            .Selectable(x => x.Mode(GridSelectionMode.Single))
            .Editable(editable => editable
                .Mode(GridEditMode.PopUp)
                .TemplateName("MailboxTemplate")
                .Window(window => window.Width(1000).HtmlAttributes(new { style = "width:700px;" }))
            )
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.mailboxID))
            .Read(read => read.Action("MailboxRead", "Home"))
            .Create(update => update.Action("MailboxCreate", "Home")).Events(ev => ev.Error("onErrorMailbox"))
            .Update(update => update.Action("MailboxUpdate", "Home")).Events(ev => ev.Error("onErrorMailbox"))
            .Destroy(update => update.Action("MailboxDelete", "Home")).Events(ev => ev.Error("onErrorMailbox"))
            .PageSize(20)            
        )
        .Events(e =>
        {
            e.Edit("onEdit");
            e.Remove("onRemove");
            e.Change("onRowChange");
        })
)

Thank you very much.

Best regards

Patrick

Hi, 

I'm creating grid with dynamic model structure. But i could not use ForeignKey for dropdowns.

i'am using same viewdata method for non-dynamic grid structure and its working. Because i know model name and model tree.

I want to use dropdowns with dynamic grid structure.

Hi Team,

I have a custom add new row button on each row, which adds a new row adjacent to the current row which works fine with the below js code:

        var grid = $("#grid").data("kendoGrid");
        customRowDataItem = this.dataItem($(e.currentTarget).closest("tr"));
        currentCommissionMemoId = customRowDataItem.uidCommissionMeemoBusiness;

        var idx = grid.dataSource.indexOf(customRowDataItem);
        console.log(idx);

        var newItem = grid.dataSource.insert(idx, {});
        var newRow = grid.items().filter("[data-uid='" + newItem.uid + "']");
        grid.editRow(newRow);

The issue is, I am trying to do the same after grouping the grid data using the drag and drop grouping option. The add new row acts weird after grouping,

1. New row is not added adjacent to the current row

2. When trying to add a new row in a different page (grid is pageable), does not add a new row at all. 

My primary intention is to add a new row inside the group after grouping the kendo grid data, is this possible?

Thank you in advance,

Sam

Hello,

I would like to know if i can add an ActionLink in a column in my DetailTemplate: 

The only way I've found is by using a Template , for exemple : 

.Columns(col => {

      col.Bound(p => p.Etat).Template(@<text>@Html.ActionLink("Edit", "Edit")</text>);

})

But like i'm already in a DetailTemplate , i get an error when i try to do this :

.DetailTemplate(
            @<text>
             @(Html.Kendo().Grid<Affaire>()
                       .Name("Affaires_" + item.Id)
                       .Columns(col => {
                                                    col.Bound(p => p.Name).Template(@<text>@Html.ActionLink("Edit", "Edit")

             </text>)

Is there another way to make this link work ?

Thanks

Hi,

In my html page I use a grid with virtual scroll:

Html.Kendo().Grid<dynamic>(). ....

.DataSource(dataSource => dataSource
    .Ajax()
    .Read( read => read.Action(....))

.Scrollable(scroll =>
    {
            scroll.Height("100%");
            scroll.Virtual(true);
        }) ...

Everything works fine except for  :

- a special request (filter)

- Only on IE11 (It's OK for Chrome, FF & Edge)

In this case, my browser freezes.

I launched an analysis and it would seem that there is an javascript infinite loop (see attachment)

If I remove the virtual scroll, everything works properly

Regards

How would I execute a custom function when any date has been selected? 

I searched for examples, but couldn't find a function that takes into consideration dynamic datepicker ID/class.

Can we add a custom function here without using Events? Or if we have to use events, can we pass the datepicker id/class to the function -- if so how?

My markup: