This is a migrated thread and some comments may be shown as answers.

Syntax help hierarchy

8 Answers 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 23 Jun 2017, 07:05 PM

I am using the Example http://demos.telerik.com/aspnet-mvc/grid/hierarchy

 

The Main part of the Grid loads fine but the other one appears to give me a javascript error saying the woid is not defined. Looking at the developer controls in Chrome it also looks like the woid is not being injected.  So I am trying to understand the hashtags and these variables #=woid#   I am looking at .Name("grid_#=woid#") and this is a copy of the demo but using my data. I don't see where the woid data is coming from (on the example this would be the EmployeeID)  some research says that is is related to the CSS, but ther source code does not have any clues to what and how this is used.  

 

@model IEnumerable<GISPortal.GRIDPRINTS>
 
@(Html.Kendo().Grid<GISPortal.GRIDPRINTWO>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.WOID).Width(110);
            columns.Bound(e => e.REQUESTDATE).Width(110);
            columns.Bound(e => e.NOTIFICATIONTYPE).Width(110);
            columns.Bound(e => e.COMPLETED).Width(110);
            columns.Bound(e => e.ERRORS);
 
        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("GRIDPRINTWO_Read", "GridPrint"))
        )
        .Events(events => events.DataBound("dataBound"))
)
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<GISPortal.GRIDPRINTS>()
            .Name("grid_#=woid#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.MAPNAME).Width(110);
                columns.Bound(o => o.SCALE).Width(110);
                columns.Bound(o => o.PAGENUMBER);     //.ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.STATUS).Width(300);
                columns.Bound(o => o.ERRORS).Width(300);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                                .Read(read => read.Action("GRIDPRINTS_Read", "GridPrint", new { woid = "#=woid#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

8 Answers, 1 is accepted

Sort by
0
Jason
Top achievements
Rank 1
answered on 26 Jun 2017, 02:17 PM

 

Here is my "GridPrint" Controller and returns JSON data perfect

 

public ActionResult GRIDPRINTWO_Read([DataSourceRequest]DataSourceRequest request)
       {
           IQueryable<GRIDPRINTWO> gridprintwo = db.GRIDPRINTWO;
           DataSourceResult result = gridprintwo.ToDataSourceResult(request, c => new GRIDPRINTWO
           {
               WOID = c.WOID,
               REQUESTDATE = c.REQUESTDATE,
               REQUESTER = c.REQUESTER,
               NOTIFICATIONTYPE = c.NOTIFICATIONTYPE,
               COMPLETEDATE = c.COMPLETEDATE,
               RECEIVED = c.RECEIVED,
               ERRORS = c.ERRORS,
               COMPLETED = c.COMPLETED,
               EMAILADDRESSES = c.EMAILADDRESSES
           });
 
           return Json(result, JsonRequestBehavior.AllowGet);
       }
 
 
       public ActionResult GRIDPRINTS_Read(int woid, [DataSourceRequest]DataSourceRequest request)
       {
           IQueryable<GRIDPRINTS> gridprints = db.GRIDPRINTS.Where(c => c.WOID == woid);
           DataSourceResult result = gridprints.ToDataSourceResult(request, c => new GRIDPRINTS
           {
               WOID = c.WOID,
               GRIDPRTID = c.GRIDPRTID,
               GRIDID = c.GRIDID,
               MAPNAME = c.MAPNAME,
               SCALE = c.SCALE,
               PAGENUMBER = c.PAGENUMBER,
               ERRORS = c.ERRORS,
               STATUS = c.STATUS,
               NOTIFICATION = c.NOTIFICATION
           });
 
           return Json(result, JsonRequestBehavior.AllowGet);
       }

 

 

Here is the view

@(Html.Kendo().Grid<GISPortal.GRIDPRINTWO>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.WOID).Width(110);
            columns.Bound(e => e.REQUESTDATE).Width(110);
            columns.Bound(e => e.NOTIFICATIONTYPE).Width(110);
            columns.Bound(e => e.COMPLETED).Width(110);
            columns.Bound(e => e.ERRORS);
 
        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("GRIDPRINTWO_Read", "GridPrint"))
        )
        .Events(events => events.DataBound("dataBound"))
)
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<GISPortal.GRIDPRINTS>()
            .Name("grid_#grid") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.MAPNAME).Width(110);
                columns.Bound(o => o.SCALE).Width(110);
                columns.Bound(o => o.PAGENUMBER);     //.ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.STATUS).Width(300);
                columns.Bound(o => o.ERRORS).Width(300);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                                .Read(read => read.Action("GRIDPRINTS_Read", "GridPrint", new { woid = "#=woid#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

 

 

 

0
Viktor Tachev
Telerik team
answered on 27 Jun 2017, 10:24 AM
Hi Jason,

I examined the provided code and noticed that you are using lower case for the field name in the detail grid. However the field is in capital case. Note that the names of the fields are case sensitive. 

Try to modify the Name for the detail Grid like below and let me know how the behavior changes.

.Name("grid_#=WOID#")


Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jason
Top achievements
Rank 1
answered on 27 Jun 2017, 11:52 AM
Thanks!  yes a rookie mistake  all looks good now and working
0
Jason
Top achievements
Rank 1
answered on 27 Jun 2017, 12:10 PM

Actually I still have an issue, it looks like the secondary grid is only displaying the subdata under the first record.

So for example 

 

WOID-1

 -- 1 x

 -- 2 x

 -- 3 x

WOID-2

  -- No Records (should have 4)

WOID-3

 - No Records 

etc.... 

 

0
Jason
Top achievements
Rank 1
answered on 27 Jun 2017, 02:58 PM
Nevermind the last issue, I missed the = before the WOID  Where is the CSS for the examples?  one last issue is formatting the quick record select at the bottom. It is vertical rather than Horizontal 
0
Viktor Tachev
Telerik team
answered on 28 Jun 2017, 02:44 PM
Hi Jason,

You can load the styles for the components in different ways. One option is to use the CDN service and get the styles and scripts from there. 

Another option is to load the files locally as described in the Use Local JavaScript and CSS section in the article below:


In case you are referring to the offline examples. The style files for them are located in the /Content/web folder.


Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jason
Top achievements
Rank 1
answered on 06 Jul 2017, 06:00 PM

Having a new problem with the Cascade in the Template section.  I am trying to input the values 

#=GRIDID#
#=MAPNAME#
#=PAGENUMBER#
#=SCALE#

But the only one that works is the  #=WOID#

 

I am getting a JS error saying that    GIDID is not defined.  But WOID works and it's not defined..  what am I missing

 

* Newest Workorders at the top <br />
@using (Html.BeginForm("REREQUEST", "GridPrint"))
{
 
 
 
 
 
 
 
@(Html.Kendo().Grid<GISPortal.GRIDPRINTWO>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.WOID).Width(40).Title("WO#");
            columns.Bound(e => e.REQUESTDATE).Width(150).Format("{0:G}").Title("Date");
            columns.Bound(e => e.REQUESTER).Width(100).Title("Requester#");
            columns.Bound(e => e.NOTIFICATIONTYPE).Width(110).Title("Notification");
            columns.Bound(e => e.COMPLETED).Width(110).Title("Completed?");
            columns.Bound(e => e.ERRORS).Title("Errors?");
 
        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
         
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("REQUESTDATE").Descending()) // <-- initial sort expression
        .PageSize(20)
             // .Read(read => read.Action("GRIDPRINTWO_Read", "Grid"))
                    .Read(read => read.Action("GRIDPRINTWO_Read", "GridPrint", new { woid = ViewBag.woid, requester = ViewBag.requester }))
        )
        .Events(events => events.DataBound("dataBound"))
         
         
)
 
 
    <script>
          var counter = 1;
 
 
        function gridIndex(data) {
         return counter++;
                                  }
    </script>
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<GISPortal.GRIDPRINTS>()
            .Name("grid_#=WOID#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.MAPNAME).Width(110).Title("Name");
                columns.Bound(o => o.GRIDID).Width(110).Title("GridID");
                columns.Bound(o => o.SCALE).Width(110).Title("Scale");
                columns.Bound(o => o.PAGENUMBER).Title("PageNum");     //.ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.STATUS).Width(200).Title("Status");
                columns.Bound(o => o.ERRORS).Width(300).Title("Errors?");
                 
                 
                 
                // daveaglick.com/posts/how-to-post-data-in-a-kendoui-grid
                 
                columns.Bound(m => m.GRIDID).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEGRIDID[#=gridIndex(data)#].GRIDID' "
                  + "value='#=GRIDID#' />");
                 
                 columns.Bound(m => m.MAPNAME).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEMAPNAME[#=gridIndex(data)#].MAPNAME' "
                  + "value='#=MAPNAME#' />");              
                 
                columns.Bound(m => m.PAGENUMBER).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEPAGENUMBER[#=gridIndex(data)#].PAGENUMBER' "
                  + "value='#=PAGENUMBER#' />");
                 
                columns.Bound(m => m.SCALE).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THESCALE[#=gridIndex(data)#].SCALE' "
                  + "value='#=SCALE#' />");
                                 
            
                 
                columns.Bound(o => o.MAPNAME).Width(110).Title("Re-Send")
                     .ClientTemplate("<input type='checkbox' "
                     + "name='CHECKED[#= WOID #].MAPNAME' "
                     + "value='true' "
                     + "#if (WOID) { #checked='checked'# } #/>"
                     + "<input type='hidden' value='false' "
                     + "name='themapname[#= WOID #].MAPNAME' />");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("GRIDPRINTS_Read", "GridPrint", new { woid = "#=WOID#" }))
                .ServerOperation(false)
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
0
Viktor Tachev
Telerik team
answered on 10 Jul 2017, 11:57 AM
Hi Jason,

Please submit each unrelated query you have in a separate thread/ticket. This way the information in the thread will be consistent and easier to be used as reference in the future. 

Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Jason
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or