Telerik Forums
UI for ASP.NET MVC Forum
1 answer
85 views

I created a hierarchical grid where I need to edit a cell in the child template grid.

I can get the parent grid to work but the edit button does not show up in the child grid, nor does the select row function work either.

I am doing this in vb with MVC. I also tried adding the Editable attribute but that didn't work either.

Scott
Top achievements
Rank 1
 answered on 26 Jul 2016
6 answers
2.5K+ views

Hello.

 I have been googling this all day to no avail.  I need to add a third parameter to the following:

columns.Bound(p => p.Line).ClientTemplate(
    "<a href='" +
    Url.Action("Details", "OrderLine") +
    "?OrdId=#= OrdId #&Line=#=Line#'" +
    ">#=Line#</a>"
);

 

I have tried different combinations and none have seemed to pass the third parameter to the details screen (OrdType is the parameter).  I can pass two of the parameters using the above, but I am not sure how to pass the third.  I appreciate any help.

Thank you.

 

 

Raul
Top achievements
Rank 1
 answered on 26 Jul 2016
1 answer
165 views
Here is the specific issue (for which hours of digging through forums and the like did no good):
Data is populated into a List<T> of objects that will then be bound to the Grid object on the index page
Inside the .chtml index file:

@(Html.Kendo().Grid<HydraulicFracturing.Models.HydraulicFracturings>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.AdditiveName).Title("Additive Name");
        columns.Bound(p => p.Vendor).Title("Vendor");
        columns.Bound(p => p.Function).Title("Function");
        columns.Bound(p => p.HealthHazardScore).Title("Health Hazard Score");
        columns.Bound(p => p.EnvironmentalHazardScore).Title("Environmental Hazard Score");
        columns.Bound(p => p.TotalHazardScore).Title("Total Hazard Score");
    })
    .Groupable()
      .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .BindTo(enumerable)
        //.DataSource(datasource => datasource
        //   .Ajax()
        //.Read(read => read.Action("Query_Read", "Home"))
        //.PageSize(20)

Note: that what is commented out does not work (more on that later…)
Note: “enumerable” is an object of type IEnumerable<T> bound to this grid.  The above populates fine, but features such as Groupable are not working.
Note: Little of this code is changed from examples provided on the website.
Code from the referenced control (assuming that you wanted the .DataSource(… part to work – which is does not

public ActionResult Query_Read([DataSourceRequest]DataSourceRequest request)
        {
            var x = Json(GetQueryData().ToDataSourceResult(request));
            return x;
        }

        private static IEnumerable<HydraulicFracturing.Models.HydraulicFracturings> GetQueryData()
        {
            var northwind = HydraulicFracturing.Models.QueryData.GetInstance();

            return northwind.fracturingList.Select(order => new HydraulicFracturing.Models.HydraulicFracturings
            {
                AdditiveName = order.AdditiveName,
                Vendor = order.Vendor,
                Function = order.Function,
                HealthHazardScore = order.HealthHazardScore,
                PhysicalHazardScore = order.PhysicalHazardScore,
                EnvironmentalHazardScore = order.EnvironmentalHazardScore,
                TotalHazardScore = order.TotalHazardScore
            });
        }

Changing over from using the “BindTo(…)” to the DataSource(…) does not work.
Attempting to use “Groupable()” does not work.
This code is taken primarily from examples on pages.

Was hoping for some degree of insight into what could be going on here….

Thanks in advance.
Jeremy
Top achievements
Rank 1
 answered on 26 Jul 2016
2 answers
203 views

I have trouble applying formatting to the Excel export with one grid, due to column groups.

Here is the basic grid column definitions

.Columns(columns =>
{
    columns
        .Bound(t => t.SpecialtyCode)
        .Title("Specialty<br />Code")
    columns
        .Bound(t => t.ProviderName)
        .Title("Provider Name")
    columns
        .Bound(t => t.TotalReviewed)
        .Title("Total<br />Reviewed")
    columns
        .Group(group => group
        .Title("Met Medical Necessity")
        .Columns(metMedical =>
        {
            metMedical
                .Bound(t => t.MetMedical)
                .Title("Count")
            metMedical
                .Bound(t => t.MetMedicalPercent)
                .Title("Percent")
        }));
    columns
        .Group(group => group
        .Title("Met Documentation Criteria")
        {
            metDocumentation
                .Bound(t => t.MetDocumentation)
                .Title("Count")
            metDocumentation
                .Bound(t => t.MetDocumentationPercent)
                .Title("Percent")
        }));
    columns
        .Group(group => group
        .Title("Met Both")
        {
            metBoth
                .Bound(t => t.MetBoth)
                .Title("Count")
            metBoth
                .Bound(t => t.MetBothPercent)
                .Title("Percent")
        }));
    columns
        .Bound(t => t.IssuesFound)
        .Title("Issues<br />Found")
})

There are 10 columns total, with 3 pairs in a column group.  In Excel, this is rendered [nicely] with the group name in merged cells above the columns in the group on row 0, with the grouped column names on row 1.

I apply some formatting to the Excel workbook.  Normally, I place the setting on a custom attribute that I attach on document.ready, like so

function configureExcelExport() {
    var grid = $("#grid").data("kendoGrid");
    if (grid) {
        grid.columns[0].excelMetadata = { "width": 63, "align": "center" };
        grid.columns[2].excelMetadata = { "width": 69, "align": "center" };
        grid.columns[3].excelMetadata = { "width": 69 };
        grid.columns[4].excelMetadata = { "width": 78 };
        grid.columns[5].excelMetadata = { "width": 83 };
        grid.columns[6].excelMetadata = { "width": 99 };
        //grid.columns[7].excelMetadata = { "width": 62 };
        //grid.columns[8].excelMetadata = { "width": 64 };
        //grid.columns[9].excelMetadata = { "width": 64 };

With the column groups, I can only address up to grid column[6] - which makes sense as there are those 3 column groups.  I figured I could move those settings to the actual Excel manipulation.  In Excel, on row 0, there are again only 7 columns.  No problem addressing them.  On row 1, there are 10 columns but I still receive undefined errors when trying to address anything after the 7th column (index 6).  Here's a portion of the code

function OnExcelExport(e) {
    var sheet = e.workbook.sheets[0];
    var grid = $("#grid").data("kendoGrid");
    var row = sheet.rows[1];
    for (var colIndex = 3; colIndex < 9; colIndex++) {
        row.cells[colIndex].wrap = true;
        sheet.columns[colIndex].autoWidth = false;
        //sheet.columns[colIndex].width = grid.columns[colIndex].excelMetadata.width;
        sheet.columns[colIndex].width = 64;
}

This fails as soon as colIndex = 6, even though I am only working with the Excel file and It does have 10 columns.  I've attached a sample.  How can I use the column groups AND apply formatting to Excel on a column by column basis?

Best,
Scott

 

 

 

Scott Buchanan
Top achievements
Rank 1
 answered on 26 Jul 2016
2 answers
58 views

Hi,

After I updated from 2015.3.1111 trial to 2016.2.714 (licensed) my grid incell edit is not longer working.I can select the row with the checkbox, uncheck it, but as soon as I leave the cell, it is again checked. I assume that the change is not being applied to the underlying model (and I see "Ja" in the cell) ...

Here is my grid:

@(Html.Kendo().Grid<ModelLayer.Bild>()
    .Name("bildergrid")
    .HtmlAttributes(new { style = "height:600px;" })
    .Columns(columns =>
    {
        columns.Bound(p => p.BildBase64).Title("").ClientTemplate("<img class='gallery' rel='bilder' style='width:100px' href='data:image/png;base64, #: BildBase64#' src='data:image/png;base64, #: BildBase64#'>").HtmlAttributes(new { style = "max-width:100px;width:100px;" }).Width(100);       
        columns.Bound(p => p.Internet).Width(30).ClientTemplate("#= Internet ? 'Ja' : 'Nein' #");
        columns.Bound(p => p.Expose).Width(30).Title("Mail").ClientTemplate("#= Expose ? 'Ja' : 'Nein' #");
        columns.Bound(p => p.Drucken).Width(30).ClientTemplate("#= Drucken ? 'Ja' : 'Nein' #");
        columns.Bound(p => p.Dateiname).Width(200);
        columns.Bound(p => p.Groesse).Width(80).Visible(false); ;
        columns.Bound(p => p.Pixel).Width(80).Visible(false);
        columns.Bound(p => p.Position).Width(100);
        columns.Bound(p => p.Pfad).Visible(false);
    })
        .DataSource(dataSource => dataSource

            .Ajax()
            .PageSize(0)
            .Read(r => r.Action("Bilder_Read", "Immo", new { immobilieId = "728" }))
            .ServerOperation(false).Model(model => model.Id(p => p.Id))
         )
         .Editable(e => e.Mode(GridEditMode.InLine))
        .Resizable(i => i.Columns(true))
        .Selectable(e => e.Enabled(true).Mode(GridSelectionMode.Single))
        .Scrollable()
        .AutoBind(false)
        //.ToolBar(t=> t.Create())


)

Konstantin Dikov
Telerik team
 answered on 26 Jul 2016
4 answers
301 views

I'm having a problem with a hierarchical grid: when I run my solution, the date doesn't show in the correct format, and because of that I can't see the child grid. But when I deploy the application, it does show correctly but it has an error, and I can't debug to solve it.

Here is the grid:

@(Html.Kendo().Grid(Model)
        .Name("OperacionesOCTVigentes")
        .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("OperacionesOCTVigentes_Read", "Operaciones")
            .Data("ParametrosOCTVigentes"))
        .PageSize(30)
        .Aggregates(a =>
            {
                a.Add(p => p.Compras).Sum();
                a.Add(p => p.Ventas).Sum();
                a.Add(p => p.Neto).Sum();
                a.Add(p => p.MTM).Sum();
            })
        )
        .Columns(columns =>
        {
            columns.Bound(foo => foo.fecha_venc).Title(Global.Fecha).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { @class = "grillaFecha" });
            columns.Bound(foo => foo.espe_codigo).Title(Global.Especie).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(foo => foo.clas_codigo).Title(Global.Clase).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(foo => foo.Compras).Title(Global.Compras).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" }).ClientFooterTemplate("#= kendo.format('{0:N}', sum)#");
            columns.Bound(foo => foo.Ventas).Title(Global.Ventas).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" }).ClientFooterTemplate("#= kendo.format('{0:N}', sum)#");
            columns.Bound(foo => foo.Neto).Title(Global.Neto).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" }).ClientFooterTemplate("#= kendo.format('{0:N}', sum)#");
            columns.Bound(foo => foo.MTM).Title(Global.Capital).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" }).ClientFooterTemplate("#= kendo.format('{0:N}', sum)#");
        })
        .ClientDetailTemplateId("template")
    )

And this is the child grid:

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<SGMTrade.DAL.ViewModels.OperacionesOCTPorFecha>()
                .Name("grid2_#=row#")// "grid2_#=fecha_venc#
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones", new { fecha = "#=fecha_venc#", especie = "#=espe_codigo#", cliente = @ViewBag.cliente, clase = "#=clas_codigo#" }))
        )
        .Columns(columns =>
        {
            columns.Bound(o => o.oper_numero).Title(Global.NumeroOperacion)
                .ClientTemplate("<a href='\\\\\\#' onclick=\"showDetails('\\#=oper_numero\\#')\">\\#=oper_numero\\#</a>").HtmlAttributes(new { @class = "grillaNumero" });
            columns.Bound(o => o.oper_forigen).Title(Global.FechaOrigen).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { @class = "grillaFecha" });
            columns.Bound(o => o.espe_codigo).Title(Global.Especie).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(o => o.clas_codigo).Title(Global.Clase).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(o => o.clie_nombre).Title(Global.Cliente).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(o => o.tope_suma).Title(Global.CompraOVenta).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(o => o.oper_monto).Title(Global.Capital).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" });
            columns.Bound(o => o.oper_plazo).Title(Global.Plazo).HtmlAttributes(new { @class = "grillaNumero" });
            columns.Bound(o => o.Fecha_Vence).Title(Global.FechaVence).Format("{0:dd/MM/yyyy}").Hidden(true).HtmlAttributes(new { @class = "grillaFecha" });
            columns.Bound(o => o.precio_transf).Title(Global.PrecioTransferencia).HtmlAttributes(new { @class = "grillaNumero" });
            columns.Bound(o => o.spread).Title(Global.Spread).HtmlAttributes(new { @class = "grillaNumero" });
        })
        .Pageable()
        .Sortable()
        .Selectable()
        .Scrollable(s => s.Height(100))
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
        .ToClientTemplate()
    )

</script>

 

In the first attached file it can be seen how the parent grid displays, and in the second one it can be seen that since the date format is incorrect, it can't perform the desired action (show details from database).

 

What can I do? Thanks in advance

Danail Vasilev
Telerik team
 answered on 26 Jul 2016
1 answer
67 views

Hi everyone,

 

In a page I have several charts/grids that takes a while to load (because the data are manipulated before the rendering), so there is no issue with the Telerik component here.
My issue is: I'm on the page and the charts/grids are loading, if I click on a link that redirect to an other page of my application and if the charts/grids are still loading I'm not directly redirect to the other page. I think that the page is waiting for the charts/grids to be 100% rendered before redirecting me to the other page. So, sometimes, I need to wait for about 10-15 seconds (because of the manipulation of data server side) to be redirected to the other page.

Is there any solution to stop the rendering of the charts/grids when I click on a link ?

 

Thank you in advance for your response.

Dimo
Telerik team
 answered on 25 Jul 2016
3 answers
130 views

Is there any way to toggle tooltips for different tasks in the Gantt based on a field set in the model? We have some tasks that require tooltips, and I made a template for them that displays some model fields. When a top-level (i.e., summary) task does not contain children, I've added a task that displays No Tasks as its title (per user requirements). It is for these 'No Tasks' tasks that I would like to completely toggle off tooltips. Any suggestions?

Bozhidar
Telerik team
 answered on 25 Jul 2016
1 answer
110 views

So I've got a grid that I believe is all set up correctly. I've confirmed that the data is coming through, and I've even checked that the AJAX call returns a success with the "ToDataSourceResult" JSON data.

 

Unfortunately, the only problem is that the data doesn't display. This seems to only be an issue on read, as update, create and delete all work. Just can't retrieve the list of all items afterwards.

 

My controller action looks like this: 

public IActionResult Blog_Read([DataSourceRequest] DataSourceRequest request)
        {
            var blogs = _blogService.GetPosts().Select(post => new BlogPostModel
            {
                Id = post.Id,
                Title = post.Title,
                Author = post.Author,
                ShortDescription = post.ShortDescription,
                Contents = post.Contents,
                LastSaved = post.LastSaved,
                Published = post.Published,
                PublishedOn = post.PublishedOn
            });
            var result = blogs.ToDataSourceResult(request);
            return Json(result);
        }

 

And my Grid View looks like this:

@(Html.Kendo().Grid<BlogPostModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Title);
                columns.Bound(p => p.Author).Width(120);
                columns.Bound(p => p.LastSaved).Width(120);
                columns.Bound(p => p.Published).Width(120);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style= "height:600px;"})
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.Id))
                .Create(update => update.Action("Blog_Create", "BlogAdmin"))
                .Read(read => read.Action("Blog_Read", "BlogAdmin"))
                .Update(update => update.Action("Blog_Update", "BlogAdmin"))
                .Destroy(update => update.Action("Blog_Delete", "BlogAdmin"))
            )
            .Deferred()
        ) 

 

The correct JSON is returned, no javascript errors in the console, so I'm a little confused as to what this could be. Any help would be greatly appreciated.

 

Adam
Top achievements
Rank 1
 answered on 24 Jul 2016
1 answer
496 views

The View is rendered empty as if there is an exception when Editor is generated.
The DropDownList is not populated in the Editor.
If the Bind is commented in the Editor, the view is rendered and the Editor display the dropdownlist of course with no content.
So The problem comes from the Bind.
Any Help will be appreciated

My Model
  public partial class TA_SITE_SIT
    {
    public TA_SITE_SIT()
      {
      TA_BUILDING_BUI = new HashSet<TA_BUILDING_BUI>();
      }
    [Key]
     public Guid GUID_SIT { get; set; }
    public string NAME_SIT { get; set; }
    [InverseProperty("GUID_SITNavigation")]
    public virtual ICollection<TA_BUILDING_BUI> TA_BUILDING_BUI { get; set; }
    }
  public partial class TA_BUILDING_BUI
    {
    [Key]
    public Guid GUID_BUI { get; set; }
    public Guid? GUID_SIT { get; set; }
    public string NAME_BUI { get; set; }
    [ForeignKey("GUID_SIT")]
    [InverseProperty("TA_BUILDING_BUI")]
    public virtual TA_SITE_SIT GUID_SITNavigation { get; set; }
    }

My Controller
    public async Task<IActionResult> Index()
      {
      ViewData["arSites"] = new SelectList(_context.TA_SITE_SIT, "GUID_SIT", "NAME_SIT");
      return View(await _context.TA_BUILDING_BUI.ToListAsync());
      }

My View
@(Html.Kendo().Grid<TA_BUILDING_BUI>(Model)
    .Name("Buildings")
    .Columns(columns =>
    {
        columns.Bound(model => model.NAME_BUI);
        columns.Command(command =>
        {
            command.Edit();
        });
    })
    .Editable(editable =>
    {
        editable.Mode(GridEditMode.PopUp);
        editable.TemplateName("BuildingEditor");
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(m => m.GUID_BUI))
    .Update(update => update.Action("Update", "Building"))
    .Destroy(destroy => destroy.Action("Destroy", "Building"))
    )
)
My Editor Template
@model TelAcces3.Models.TA_BUILDING_BUI
@(Html.Kendo().DropDownList()
          .Name("DropDownList")
          .DataTextField("NAME_SIT")
          .DataValueField("GUID_SIT")
          .BindTo(ViewBag.arSites)
)


Viktor Tachev
Telerik team
 answered on 22 Jul 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?