Syntax help hierarchy

9 posts, 0 answers
  1. Jason
    Jason avatar
    20 posts
    Member since:
    Aug 2016

    Posted 23 Jun Link to this post

    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>
  2. Jason
    Jason avatar
    20 posts
    Member since:
    Aug 2016

    Posted 26 Jun Link to this post

     

    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>

     

     

     

  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 27 Jun Link to this post

    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.
  4. Jason
    Jason avatar
    20 posts
    Member since:
    Aug 2016

    Posted 27 Jun Link to this post

    Thanks!  yes a rookie mistake  all looks good now and working
  5. Jason
    Jason avatar
    20 posts
    Member since:
    Aug 2016

    Posted 27 Jun Link to this post

    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.... 

     

  6. Jason
    Jason avatar
    20 posts
    Member since:
    Aug 2016

    Posted 27 Jun Link to this post

    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 
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 28 Jun Link to this post

    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.
  8. Jason
    Jason avatar
    20 posts
    Member since:
    Aug 2016

    Posted 06 Jul Link to this post

    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>
  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 10 Jul Link to this post

    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.
Back to Top