Coder Social home page Coder Social logo

dotnet-flexgrid's Introduction

FlexGrid

CodeFactor  License  .NET  C#  WPF 

FlexGrid is a custom WPF DataGrid with convenient and useful features. When developing code using WPF, the Microsoft-supported DataGrid has limited functionality, such as nested and merged column headers and variable columns. However, with FlexGrid, your DataGrid development environment becomes significantly more convenient!


I'm proud to say that FlexGrid was fully built by me, and I'm excited to share it on GitHub :)


Goal

  • Create Customized DataGrid with convenient and useful features.
  • Use FlexGrid to develop other WPF Programs

Available Features


FlexGrid Template Structure

FlexGrid is a Component that modified the Template of the default DataGrid.

FlexGridTemplateStructure.png
<FlexGrid Template Structure>

Using Bands Instead Of Columns

FlexGrid uses BandHeadersPresenters to represent the columns. The BandHeaderPresenter represents the Bands in FlexGrid.FrozenBands and FlexGrid.Bands as Columns in the FlexGrid.

Band Types

  • TextBand
  • CheckBoxBand
  • ComboBoxBand
  • TemplateBand
  • VirtualBand
    • VirtualTextBand
    • VirtualCheckBoxBand
    • VirtualComboBoxBand
    • VirtualTemplateBand

This is Example how to use Bands.

<!-- xmlns:c="clr-namespace:KevinComponent;assembly=KevinComponent" -->

<c:FlexGrid>
  <!-- Here is start of code to add Bands. -->
  <c:FlexGrid.Bands>

    <!-- TextBand -->
    <c:TextBand
      Width="100"
      HorizontalAlignment="Center"
      Header="Name"
      TextBinding="{Binding Name}" />

    <!-- TemplateBand -->
    <c:TemplateBand Width="250" Header="WebSite">
      <c:TemplateBand.CellTemplate>
        <DataTemplate>
          <TextBlock>
            <Hyperlink
              NavigateUri="{Binding WebSite}"
              RequestNavigate="OnHyperlinkRequestNavigate">
              <TextBlock Text="{Binding WebSite}" />
            </Hyperlink>
          </TextBlock>
        </DataTemplate>
      </c:TemplateBand.CellTemplate>

      <c:TemplateBand.CellEditingTemplate>
        <DataTemplate>
          <TextBox Text="{Binding WebSite}" />
        </DataTemplate>
      </c:TemplateBand.CellEditingTemplate>
    </c:TemplateBand>

  </c:FlexGrid.Bands>
</c:FlexGrid>

Bands and Frozen Bands

For represent Frozen Columns (Always showed Columns) in FlexGrid. You should use FlexGrid.FrozenBands.
The FlexGrid shows to Bands in FlexGrid.FrozenBands as Frozen Columns.

This is Example Code how to use Frozen Bands.

<!-- xmlns:c="clr-namespace:KevinComponent;assembly=KevinComponent" -->

<c:FlexGrid>
  <!-- Here is start of code to add frozen bands. -->
  <c:FlexGrid.FrozenBands>
  
    <c:TextBand
      Width="100"
      HorizontalAlignment="Center"
      Header="Name"
      TextBinding="{Binding Name}" />

    <c:TextBand
      Width="150"
      HorizontalAlignment="Center"
      Header="BirthDate"
      TextBinding="{Binding BirthDate}" />

  </c:FlexGrid.FrozenBands>

  <!-- code to add default bands. -->
  <c:FlexGrid.Bands>

    <c:TextBand
      Width="200"
      Header="Address"
      TextBinding="{Binding Address}" />

  </c:FlexGrid.Bands>
</c:FlexGrid>

Mergable Column Header (Band.Bands)

  • (Writing Content...)

Variable Columns (VirtualBand)

  • (Writing Content...)

Samples

Basic Sample

BasicSample.gif
<BasicSample ScreenShot>

  • BasicSample shows the basic usage of FlexGrid.
  • You can know how to use FlexGrid the basically in this sample.

Frozen Header Sample

BasicSample.gif
<FrozenHedaerSample ScreenShot>

  • FrozenHedaerSample shows how to using the frozen columns.
  • You can use FlexGrid.FrozenBands to add frozen columns.
  • In this sample, the Name, BirthDate bands are Frozen Bands.

Merged Header Sample

BasicSample.gif
<MergedHedaerSample ScreenShot>

  • MergedHedaerSample shows how to merge column headers.
  • You can use Band.Bands(ex. TextBand.Bands, CheckBoxBand.Bands, etc.) to merge column headers.
  • In this sample, you can see the Name, BirthDate, Address, and WebSite bands merged into the information band.

VirtualBand Sample

VirtualBandSample.gif
<VirtualBandSample ScreenShot>

  • VirtualBandSample shows how variable columns are implemented in FlexGrid.
  • You can use VirtualBand(ex. VirtualTextBand, VirtualComboBoxBand, VirtualCheckBoxBand, etc.) to show variable columns.
  • In this Sample, you can see that the list of subject scores synchronizes with the subject list when you edit the subject list.

VirtualBandSample.gif
<ItemsSource Description>


Support

If you have any good ideas (such as new featrue, refactoring, improvement feature quality, etc), do not hesitate to let me know!
You also can "Pull request" or request adding New Feature to the email below. Thank you.

dotnet-flexgrid's People

Contributors

soomin-kevin-sung avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.