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

Hierarchy Firefox Issue on paging option

5 Answers 49 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sang
Top achievements
Rank 1
Sang asked on 27 Sep 2013, 08:27 PM
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.

5 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 01 Oct 2013, 09:15 AM
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!
0
Sang
Top achievements
Rank 1
answered on 01 Oct 2013, 07:25 PM
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>
0
Vladimir Iliev
Telerik team
answered on 02 Oct 2013, 08:44 AM
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!
0
Julio
Top achievements
Rank 1
answered on 01 Oct 2014, 07:03 PM
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...}

0
Vladimir Iliev
Telerik team
answered on 02 Oct 2014, 07:04 AM
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.

 
Tags
Grid
Asked by
Sang
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Sang
Top achievements
Rank 1
Julio
Top achievements
Rank 1
Share this question
or