Hierarchy Firefox Issue on paging option

6 posts, 0 answers
  1. Sang
    Sang avatar
    25 posts
    Member since:
    Oct 2011

    Posted 27 Sep 2013 Link to this post

    See Attachment, the paging inside the grid of the child somehow goes to the new line for Refresh.  I have  grid which has a child grid, the child grid paging is showing double line.  This paging is fine for IE and Chrome.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2203 posts

    Posted 01 Oct 2013 Link to this post

    Hi Sang,

     
    I tried to reproduce the problem locally but to no avail – everything is working as expected on our side (please check this screencast). Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

    Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sang
    Sang avatar
    25 posts
    Member since:
    Oct 2011

    Posted 01 Oct 2013 Link to this post

    I am attaching the code that we used to show hierarchy and the inspect screen shot of what we get in Firefox using firebug.  I don't see the difference between the normal paging vs the one inside the grid.  As I stated, issue only with Firefox (currently v19), Chrome & IE seem to be normal.

    -----codes-----------
    @model JobPlanSearchViewModel
    @{
        Func<object> center = () => new {style = "text-align: center"};
        Func<string, string, string, string, string> statusTemplate = (title, color, value, status) =>
                    "<div class='equip-status' title='{0}' data-color='{1}'  data-status='{3}'>{2}</div>".F(title, color, value, status);
        Func<string, string, string, string, string, string, string> statTemplate =
                (status, statText, statColor, equipmentId, link, allStat) =>
                    "<div class='equip-status' data-status='{0}' title='{1}' data-color='{2}' data-equipid='{3}' data-link= '{4}'>{5}</div>".F(status, statText, statColor, equipmentId, link, allStat);
        Func<string, string, string> assignrequireratio = (assign, require) => string.Format("{0}/{1}", assign, require);

        Func<string, string, string> jobplanCheckbox = (assign, jobplanId) => "<input type='checkbox' class='jobplan-checkbox' data-id='{0}' id='jobplan-{0}'/>".F(jobplanId, assign);
     
    }

        @(Html.Kendo().Grid<JobPlanItem>()
              .Name("JobPlanItemGrid")
              .AutoBind(false)
              .HtmlAttributes(new {data_bind = "kendoGrid: JobPlanItemGrid"})
              .Columns(columns =>
              {
                  columns.Bound(o => o.Id).Title("").Width(24).ClientTemplate(jobplanCheckbox("#=Assigned#","#=Id#")).Sortable(false);
                columns.Bound(o => o.JobId);
                //columns.Bound(o => o.Customer);
                columns.Bound(o => o.Customer).ClientTemplate(ColumnField.Template("Customer").ToHtmlString());
                columns.Bound(o => o.StartDate).Format(Constants.DateFormat);
                columns.Bound(o => o.EndDate).Format(Constants.DateFormat); 
                columns.Bound(o => o.Type).ClientTemplate(ColumnField.Template("Type").ToHtmlString());
                columns.Bound(o => o.AUDesc).ClientTemplate(ColumnField.Template("AUDesc").ToHtmlString());
                columns.Bound(o => o.Status).ClientTemplate(ColumnField.Template("Status").ToHtmlString());
                columns.Bound(o => o.WellName).ClientTemplate(ColumnField.Template("WellName").ToHtmlString());
                columns.Bound(o => o.Rig).ClientTemplate(ColumnField.Template("Rig").ToHtmlString());
                columns.Bound(o => o.Completed).ClientTemplate("#= Completed ? 'Yes' : 'No' #");
                columns.Bound(x => x.Assigned).ClientTemplate(assignrequireratio("#=Assigned#", "#=Required#")).Title("Asgn/Req");
              })
              .EnableCustomBinding(true)
              .DataSource(
                  dataBinding => dataBinding
                                     .Ajax().PageSize(PageSize)
                                     .Read(x => x.Action("Grid", "JobPlan").Data("jobplan.getViewModel"))
              )
              .Events(e => e.DataBound("jobplan.onDataBound")
                            .DetailExpand("jobplan.onExpandJobPlan")
                            .DetailCollapse("jobplan.onCollapseJobPlan"))
                             
              .Pageable(p => p.Default())
              .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
              .Groupable()
              .Resizable(r => r.Columns(true))
              .ClientDetailTemplateId("jobplanDetailsTemplate")
        )
        
        @using (Rite.GridFilter("JobPlanItemGrid"))
        {   
            Rite.Header(Rite.ClearFilterButton("ClearFilter", htmlAttributes: new { data_bind = "click: clearFilter"}));
            Rite.Header();
            //Rite.Header("<input type='checkbox' id='chkAll' title='Select All'  data-bind='checked: SelectAll'/>");
            Rite.Header(Html.TextBoxFor(x => x.JobIdFilter, new { data_bind = "value: JobIdFilter" }));
            Rite.Header(Html.TextBoxFor(x => x.CustomerFilter, new { data_bind = "value: CustomerFilter" }));
            Rite.Header();
            Rite.Header();
            Rite.Header(Html.TextBoxFor(x => x.TypeFilter, new { data_bind = "value: TypeFilter" }));
            Rite.Header(Html.TextBoxFor(x => x.AUDescFilter, new { data_bind = "value: AUDescFilter" }));
            Rite.Header(Html.TextBoxFor(x => x.StatusFilter, new { data_bind = "value: StatusFilter" }));
            Rite.Header(Html.TextBoxFor(x => x.WellNameFilter, new { data_bind = "value: WellNameFilter" }));
            Rite.Header(Html.TextBoxFor(x => x.RigFilter, new { data_bind = "value: RigFilter" }));
            Rite.Header(Rite.DropDownListFor(x => x.CompleteFilter, YesNoList.ToSelectList(true), new { data_bind = "value: CompleteFilter, event: { change: search}" }));
            Rite.Header();
        }

    <script id="jobplanDetailsTemplate" type="text/kendo-tmpl">
        
        @{
            var toolsetGrid = Html.Kendo().Grid<JobPlanToolsetItem>().AutoBind(ReadOnly);
        }
          @(toolsetGrid
                .Name("JobPlanToolSetGrid_#=Id#")
                .AutoBind(true)
                .Columns(columns =>
                    {
                        columns.Bound(x => x.ToolsetId).Hidden(true);
                        columns.Bound(o => o.Id).Title("").Width(24)
                            .ClientTemplate("<input type='checkbox' data-toolsetid='\\#=ToolsetId\\#' data-jobplanid='#=Id#' class='jobplan-toolset-checkbox' id='toolset-\\#=ToolsetId\\#'/>");
                        columns.Bound(o => o.ToolCode)
                                   .ClientTemplate(Html.ActionLink("\\#=valueOrEmpty(ToolCode)\\#", "View", "ToolSet", new { area = "Equipment", toolSetid = "\\#=ToolsetId\\#" }, new {target = "\\#=ToolsetId\\#" }).ToHtmlString());

                        columns.Bound(x => x.ToolSet.PAUDescription);
                        columns.Bound(x => x.ToolSet.Located);
                        columns.Bound(x => x.ToolSet.Cell);
                        columns.Bound(x => x.ToolSet.Color);
                        columns.Bound(x => x.ToolSet.ProductFamily4);
                        columns.Bound(x => x.ToolSet.ProductFamily5);
                        columns.Bound(x => x.ToolSet.Active);
                        columns.Bound(x => x.ToolSet.TecStat).HeaderHtmlAttributes(center())
                            .ClientTemplate(statusTemplate("\\#=valueOrEmpty(ToolSet.TecStatText)\\#", "\\#=valueOrEmpty(ToolSet.TecStatColor)\\#", "\\#=valueOrEmpty(ToolSet.TecStat)\\#", "tec"))
                               .HtmlAttributes(center());
                               
                        columns.Bound(x => x.ToolSet.OnHand).Sortable(false);
                        columns.Bound(x => x.ToolSet.EquipmentCount).Hidden(true);
                        columns.Bound(x => x.ToolSet.OutOfToolsetEQCount).Hidden(true);
                        columns.Bound(x => x.ToolSet.HasAccess).Hidden(true);
                    })
                .EnableCustomBinding(true)
                .DataSource(ds => ds.Ajax().PageSize(PageSize).Read(r => r.Action("GetJobPlanAssignment", "JobPlan", new { jobplanId = "#=Id#"})))
                .Events(e => e.DataBound("jobplan.onToolsetDataBound"))
                .Pageable(p => p.Default())
                .Selectable()
                .ClientDetailTemplateId("jobplanToolSetEquipmentTemplate")
                .ToClientTemplate()
            )
    </script>

    <script id="jobplanToolSetEquipmentTemplate" type="text/kendo-tmpl">
        
        @(Html.Kendo().Grid<EquipmentListItem>()
            .Name("JobPlanToolSetEquipmentItemGrid_#=ToolsetId#")
            .AutoBind(true)
            .Columns(columns =>
            {
                columns.Bound(x => x.ToolSetId).Hidden(true);
                columns.Bound(x => x.EquipmentCode).ClientTemplate(Html.ActionLink("\\#=valueOrEmpty(EquipmentCode)\\#", "View", "Equipment", new { area = "Equipment", id = "\\#=EquipmentId\\#" }, new {target = "\\#=EquipmentId\\#", data_outoftoolset = "\\#=OutOfToolSet\\#" }).ToHtmlString());
                columns.Bound(x => x.SerialNo);
                columns.Bound(x => x.PartNo);
                columns.Bound(x => x.Located);
                columns.Bound(x => x.AUDescription);
                columns.Bound(x => x.PAUDescription);
                columns.Bound(o => o.MvtStat).Width(60).HeaderHtmlAttributes(center()).HtmlAttributes(center()).ClientTemplate("\\#=MvtStatLink\\#");
                    
                columns.Bound(x => x.TecStat).Width(60).HeaderHtmlAttributes(center()).HtmlAttributes(
                                        center()).Title("Tec").ClientTemplate(statusTemplate("\\#=valueOrEmpty(TecStatText)\\#", "\\#=valueOrEmpty(TecStatColor)\\#", "\\#=valueOrEmpty(TecStat)\\#", "tec"));
                    
                columns.Bound(x => x.CertStat).Width(60).HeaderHtmlAttributes(center()).HtmlAttributes(
                                        center()).Title("Cert").ClientTemplate(statTemplate("CERT", "\\#=valueOrEmpty(CertStatText)\\#", "\\#=valueOrEmpty(CertStatColor)\\#", "\\#=valueOrEmpty(EquipmentId)\\#", "\\#=valueOrEmpty(HasCert)\\#", "\\#=valueOrEmpty(CertAllStat)\\#"));
                    
                columns.Bound(x => x.RepStat).Width(60).HeaderHtmlAttributes(center()).HtmlAttributes(
                                        center()).Title("Rep").ClientTemplate(statTemplate(RD.Global.Type.REP, "\\#=valueOrEmpty(RepStatText)\\#", "\\#=valueOrEmpty(RepStatColor)\\#", "\\#=valueOrEmpty(EquipmentId)\\#", "\\#=valueOrEmpty(HasRep)\\#", "\\#=valueOrEmpty(RepAllStat)\\#"));
                    
                columns.Bound(x => x.ServStat).Width(60).HeaderHtmlAttributes(center()).HtmlAttributes(
                    center()).Title("Serv").ClientTemplate("<div class='equip-status' data-status='SERV' title='\\#=valueOrEmpty(ServStatText)\\#'  data-color='\\#=valueOrEmpty(ServStatColor)\\#' data-open='\\#=valueOrEmpty(HasOpenWorkOrder)\\#' data-equipid='\\#=valueOrEmpty(EquipmentId)\\#' data-link='\\#=valueOrEmpty(HasMaintenanceDue)\\#'>\\#=valueOrEmpty(ServAllStat)\\#</div>");

                columns.Bound(o => o.ModStat).Width(65).HeaderHtmlAttributes(center()).HtmlAttributes(
                                        center()).Title("Mod")
                                    .ClientTemplate(statTemplate(RD.Global.Type.MOD, "\\#=valueOrEmpty(ModStatText)\\#", "\\#=valueOrEmpty(ModStatColor)\\#", "\\#=valueOrEmpty(EquipmentId)\\#", "\\#=valueOrEmpty(HasMod)\\#", "\\#=valueOrEmpty(ModAllStat)\\#"));
                columns.Bound(o => o.ActivityStatus).Width(60).HeaderHtmlAttributes(center()).
                                        HtmlAttributes(center()).
                                        Title("Act").ClientTemplate(statusTemplate("\\#=valueOrEmpty(ActivityStatusText)\\#", "\\#=valueOrEmpty(ActivityStatusColor)\\#", "\\#=valueOrEmpty(ActivityStatus)\\#", "act"));
                    
                columns.Bound(o => o.OutOfToolSet).Hidden(true);
                columns.Bound(o => o.AtLocation).Hidden(true);
                columns.Bound(o => o.Owner).Hidden(true);
                columns.Bound(o => o.Disabled).Hidden(true);
                columns.Bound(o => o.ObjectState).Hidden(true);
                columns.Bound(o => o.ToolSetId).Hidden(true);
            })
            .DataSource(ds => ds.Ajax().Read(r => r.Action("GetToolSetEquipment", "EquipmentList", new { toolSetId = "#=ToolsetId#"})))
            .Events(e => e.DataBound("jobplan.onToolsetDataBound"))
            //.Pageable(p => p.Default())
            .ToClientTemplate()
            )
    </script>
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2203 posts

    Posted 02 Oct 2013 Link to this post

    Hi Sang,

     
    Using the provided Grid code i'm still unable to reproduce the issue on our side using the same version of Firefox (v.19). Could you please download the "Grid Ajax Hierarchy Editing" demo from our CodeLibrary, modify it to reproduce the issue and send it back to us?

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Julio
    Julio avatar
    3 posts
    Member since:
    Aug 2014

    Posted 01 Oct 2014 in reply to Vladimir Iliev Link to this post

    Hi!

    The same is happening to me, with Firefox  32.0.3. See attachment 1.png.

    With IE works fine. See attachment 2.png.

    Bellow is the DOM of the pager.

    Do you need something else?

    Regards,
    Julio










    jQuery191005419706716782413
    43
    sizzle-1412189259823
    Object { parentNode=[2]}
    accessKey
    ""
    accessKeyLabel
    ""
    align
    ""
    attributes
    [class="k-pager-wrap k-grid-pager k-widget", data-role="pager"]
    baseURI
    "http://10.115.94.45/CamoytePharmacy"
    childElementCount
    8
    childNodes
    NodeList[a.k-link.k-pager-nav.k-state-disabled.k-pager-first #, a.k-link.k-pager-nav.k-state-disabled #, ul.k-pager-numbers.k-reset, 5 more...]
    children
    HTMLCollection[a.k-link.k-pager-nav.k-state-disabled.k-pager-first #, a.k-link.k-pager-nav.k-state-disabled #, ul.k-pager-numbers.k-reset, 5 more...]
    classList
    DOMTokenList["k-pager-wrap", "k-grid-pager", "k-widget"]
    className
    "k-pager-wrap k-grid-pager k-widget"
    clientHeight
    68
    clientLeft
    0
    clientTop
    1
    clientWidth
    1138
    contentEditable
    "inherit"
    contextMenu
    null
    dataset
    DOMStringMap { role="pager"}
    dir
    ""
    draggable
    false
    firstChild
    a.k-link.k-pager-nav.k-state-disabled.k-pager-first #
    firstElementChild
    a.k-link.k-pager-nav.k-state-disabled.k-pager-first #
    hidden
    false
    id
    ""
    innerHTML
    "<a tabindex="-1" class="... 1 - 20 de 17093</span>"
    isContentEditable
    false
    itemId
    ""
    itemProp
    { length=0, value="", item=item(), more...}
    itemRef
    { length=0, value="", item=item(), more...}
    itemScope
    false
    itemType
    { length=0, value="", item=item(), more...}
    itemValue
    null
    lang
    ""
    lastChild
    span.k-pager-info.k-label
    lastElementChild
    span.k-pager-info.k-label
    localName
    "div"
    namespaceURI
    "http://www.w3.org/1999/xhtml"
    nextElementSibling
    null
    nextSibling
    null
    nodeName
    "DIV"
    nodeType
    1
    nodeValue
    null
    offsetHeight
    69
    offsetLeft
    0
    offsetParent
    div#grid.k-widget.k-grid
    offsetTop
    558
    offsetWidth
    1138
    outerHTML
    "<div data-role="pager" c...0 de 17093</span></div>"
    ownerDocument
    Document CamoytePharmacy
    parentElement
    div#grid.k-widget.k-grid
    parentNode
    div#grid.k-widget.k-grid
    prefix
    null
    previousElementSibling
    div.k-grid-content
    previousSibling
    div.k-grid-content
    properties
    HTMLPropertiesCollection { names=DOMStringList, length=0, namedItem=namedItem(), more...}
    scrollHeight
    68
    scrollLeft
    0
    scrollLeftMax
    0
    scrollTop
    0
    scrollTopMax
    0
    scrollWidth
    1138
    spellcheck
    false
    style
    CSS2Properties { length=0, MozAppearance="", MozOutlineRadius="", more...}
    tabIndex
    -1
    tagName
    "DIV"
    textContent
    "seek-warrow-w12345...arr...trados 1 - 20 de 17093"
    title
    ""
    __proto__
    HTMLDivElementPrototype { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}

  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2203 posts

    Posted 02 Oct 2014 Link to this post

    Hi Julio,

    To be able to investigate further current behavior we would need runable example where the issue is reproduced. For more information about how to create such example you can check this blog post.

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top