1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Grid as detail row

Grid as detail row

Hello,

I'm using this function to add a grid as detail of a row:

function detailGridData(e) {
    var data = e.data.Periodos;
  
    e.detailsElement.find("#detailGrid").ejGrid({
        dataSource: data,
        allowSelection: true,
        columns: [
            { field: "Nombre", key: true, headerText: TextoNombre, width: 80, textAlign: ej.TextAlign.Left , allowEditing:true},
            { field: "FechaCreacion", key: true, headerText: TextoFechaCreacion, width: 80, textAlign: ej.TextAlign.Left, format: "{0:dd/MM/yyyy hh:mm:ss}", allowEditing: false },
            { field: "Autor", key: true, headerText: TextoAutor, width: 80, textAlign: ej.TextAlign.Left, allowEditing: false },
            { field: "FechaInicio", key: true, headerText: TextoFechaInicio, width: 80, textAlign: ej.TextAlign.Left, format: "{0:dd/MM/yyyy}", allowEditing: false },
            { field: "FechaFin", key: true, headerText: TextoFechaFin, width: 80, textAlign: ej.TextAlign.Left, format: "{0:dd/MM/yyyy}", allowEditing: false },
                { field: "Visible", key: true, headerText: TextoVisible, width: 80, textAlign: ej.TextAlign.Left, displayAsCheckbox: true, editType: ej.Grid.EditingType.Boolean, allowEditing: true },
                    { field: "Observaciones", key: true, headerText: TextoObservaciones, width: 80, textAlign: ej.TextAlign.Left, allowEditing: true },
            { field: "IdPeriodo", key: true, headerText: "", width: 80, textAlign: ej.TextAlign.Left , visible : false, isPrimaryKey: true}
        ]
        ,editSettings: { allowAdding: false, allowEditing: true, editMode: ej.Grid.EditMode.batch },
        toolbarSettings: { showToolbar: true, customToolbarItems: ["search", "update", "cancel"] }
    });
}

But the toolbar is not showing the icons and the localized texts.

Thanks!

9 Replies
RU Ragavee U S Syncfusion Team November 11, 2015 09:16 AM UTC

Hi Jorge,

From the code snippets that you have shared, we found that the toolbar items have been specified mistakenly inside the customToolbarItems property of the ejGrid. So the icons were not displayed in the Grid.

Please specify the icons inside the toolbarItems property of the ejGrid. The toolbarItems property is used to define the default toolbar icons whereas the customToolbarItems property is used to define custom items in the toolbar.

Please refer to the class reference documentation link for more information.

http://help.syncfusion.com/js/api/ejgrid#members:toolbarsettings-toolbaritems

Please refer to the below online documentation link for more information on setting localization.

http://help.syncfusion.com/js/grid/globalizationandlocalization

For your convenience we have created a sample, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121092/ze/Sample-1107858981

If we have misunderstood your query, please get back with more and clear information.

Regards,
Ragavee U S.

JP Jorge Pampin November 11, 2015 10:12 AM UTC

Hello,

Now, the detail grid shows the icons, but it doesn't show the localized string and the main grid show the localized strings.

Thanks!

GV Gowthami V Syncfusion Team November 12, 2015 09:52 AM UTC

Hi Jorge,

We have analyzed your issue and we are unable to reproduce the issue.

We have created a sample with Localization (for example de-DE) and the same can be downloaded from the following link,

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-606094164.zip

Please provide the below details to reproduce the issue,

1.       Share the version details that you have used.
2.       Ensure that you have enabled localization (Using Locale property of the grid) for detail grid also.
3.       Share the code example that you have used.

The provided information will help to analyze the issue and provide you the response as early as possible.

Regards,
Gowthami V.

JP Jorge Pampin November 12, 2015 10:41 AM UTC

Hello,

It works perfectly! Thanks!

GV Gowthami V Syncfusion Team November 13, 2015 04:33 AM UTC

Hi Jorge,
 
We are happy to hear that your issue has been resolved.
 
Get back to us if you need further assistance.
 
Thanks & Regards,
 
Gowthami V.

JP Jorge Pampin November 23, 2015 05:26 PM UTC

Hello,

I'm trying to configure the template of the a column but the cells always shows "undefined", why?

I add the column this way:
columns: [{headerText: TextoCAUSANOCONCILIACION, template: true, templateID: 'templateRowsConciliacion' , field: "Descripcion" }]....

This is the template:

<script id="detailGridContentsConciliacion" type="text/x-jsrender">

    <div id="detailGridConcilizacion"></div>

</script>

<script type="text/x-jsrender" id="templateRowsConciliacion">  
     <div  style='height:20px;' unselectable='on'>
       <img style="width: 16px; height: 16px" src="../Images/tree_Recursos.png"  />
       <div class='e-cell' style='display:inline-block;width:100%' unselectable='on'>{{:#data['Descripcion']}}</div>
     </div>
</script>

Thanks!

GV Gowthami V Syncfusion Team November 24, 2015 10:39 AM UTC

Hi Jorge,

We have analyzed your code example, and noted that you have provided “templateID” as “templateRowsConciliacion” instead of “#templateRowsConciliacion”. The “id” should precede with “#”.

Refer to the below code example,



<script type="text/javascript">
        function detailGridData(e) {
. . . . 
. . . .

e.detailsElement.find("#detailGrid").ejGrid({
                dataSource: data,
. . . .
. . . .
columns: [{headerText: TextoCAUSANOCONCILIACION, template: true, templateID:'#templateRowsConciliacion' , field: "Descripcion" }]
. . . .

});
}
</script>



We have created a sample, and the same can be downloaded from the following link:


http://www.syncfusion.com/downloads/support/directtrac/general/SAMPLE~1-1056247807.ZIP



Regards,

Gowthami V.



JP Jorge Pampin November 24, 2015 11:55 AM UTC

Hello,

It works perfectly! Thanks!



GV Gowthami V Syncfusion Team November 25, 2015 04:02 AM UTC

Hi Jorge,
 
We are happy to hear that your issue has been resolved.
 
Get back to us if you need further assistance.
 
Regards,
 
Gowthami V.

Loader.
Up arrow icon