Hierarchy Firefox Issue on paging option

[Sang]

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.

[Vladimir Iliev]

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

[Sang]

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>

[Vladimir Iliev]

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

[Julio]

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

[Vladimir Iliev]

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