Tag Archives: datagrid

DataGrid: How to center the title bar and content

Leave a reply

Content centered style

<Style
    x:Key="HorizontalAlignedData"
    BasedOn="{StaticResource {x:Type TextBlock}}"
    TargetType="{x:Type TextBlock}">
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
</Style>

title centering style

<Style TargetType="DataGridColumnHeader">
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="BorderBrush" Value="#a8a8a8" />
    <Setter Property="Background" Value="#f2f2f2" />
    <Setter Property="FontSize" Value="15" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Foreground" Value="{StaticResource TextColorGeneral}" />
    <Setter Property="BorderThickness" Value="0,0,1,1" />
</Style>

Realize that each column is displayed proportionally

Set the column width to starswidth="*"


<DataGridTextColumn
    Width="*"
    Binding="{Binding Name}"
    ElementStyle="{StaticResource HorizontalAlignedData}"
    Header="Project"
    IsReadOnly="True" />

Complete demo code


<DataGrid.Columns>

    <DataGridTextColumn
        Width="*"
        Binding="{Binding Name}"
        ElementStyle="{StaticResource HorizontalAlignedData}"
        Header="Project"
        IsReadOnly="True" />

    <DataGridTextColumn
        Width="*"
        Binding="{Binding Value}"
        ElementStyle="{StaticResource HorizontalAlignedData}"
        Header="Outcome"
        IsReadOnly="True" />

    <DataGridTextColumn
        Width="2*"
        Binding="{Binding Tolerance}"
        ElementStyle="{StaticResource HorizontalAlignedData}"
        Header="Task"
        IsReadOnly="True" />

</DataGrid.Columns>

Method of adding operation button for each line of data in DataGrid of easyUI

When I was working on the project today, I wanted to add an operation button after each column of data in the DataGrid of easyUI. At the beginning, I wanted to splice strings in the background and return them with JSON. But after testing, I found that this method didn’t work. I searched the Internet and sorted them out as follows:

In fact, it’s very easy to add a row of custom columns. When JS declares DataGrid, add the following code

<span style="font-size:18px;">{field:'operate',title:'act',align:'center',width:$(this).width()*0.1,
	formatter:function(value, row, index){
		var str = '<a href="#" name="opera" class="easyui-linkbutton" ></a>';
		return str;
}}</span>

This line of code is defined under the columns property, and it must be added

<span style="font-size:18px;">onLoadSuccess:function(data){  
        $("a[name='opera']").linkbutton({text:'buy',plain:true,iconCls:'icon-add'});  
},</span>

If you don’t add this, there will be no button style in that operation column. It’s just a hyperlink. You can use LinkButton or other buttons according to your needs