[November-06]

I want to create two types of usercontrols and I don't know how to proceed so I hope somebody can give me some ideas.

First is a multi-column dropdownlist which I already created.

Second is a gridview with filters per column, with selection for no. of records per page in the footer.

My inspiration to do something like this is Obout. If you have heard and seen Obout controls before, then it would be easier for you to understand. It is a third party control with a lot of great features similar to telerik I suppose but I have not used telerik before.

So the case is I do not want to use third party controls. This is for practice and exploration's sake.

I have a pretty good idea of how to do the two things I mentioned. In fact, I have already coded a simple program and it works. The problem is I want to place it inside a usercontrol so that I can call it anytime without coding everything from scratch. Now, I am confused of how to create the columns and assign the headertext and the datafields.

If I expose the usercontrol property, for example "TableCaption", then that would be

<uc:UserControlName id="ucTest" runat="server" TableCaption="Test" />

But how do I achieve adding the child tags <Columns></Columns> like in gridview or <ItemTemplate></ItemTemplate> for repeater.

I want that when I call the usercontrol, it would have something like those. Any idea of how to do it?

This post has been edited by November-06: 19 November 2012 - 02:54 AM

[5thWall]

It sounds like you're trying to create a templated control. Unfortunately, I've only looked into doing this a few times but haven't ever needed to implement it. Still you may find the following articles helpful:

• MSDN: Building Templated Custom ASP.NET Server Controls
  
• MSDN: Building DataBound Templated Custom ASP.NET Server Controls

[November-06]

Thanks 5thWall. I haven't finished reading the articles yet but that really helps me form ideas. Thank you. I'll try something out and start with a simple control.

[November-06]

I did some more research on the topic after reading the articles from the links 5thWall gave.

I understand how to achieve the

<GridView>
   <Columns>
   </Columns>
</GridView>

But I still don't know how to nest some more tags inside the <Columns></Columns> like the .Net GridView

<GridView>
   <Columns>
      <BoundField />
      <TemplateField>
         <HeaderTemplate></HeaderTemplate>
         <ItemTemplate></ItemTemplate>
      </TemplateField>
   </Columns>
</GridView>

To sum it up, I am having problems with adding more child tags.

Any idea?

[November-06]

Thanks for the articles. I have spent a lot of time for the past week reading on the topic and I am creating progress each day with my control although I admit that I am progressing slowly since this is my first time creating my own control.

What I am currently doing is a multi-column dropdownlist using a webusercontrol.

Inside the WebUserControl, I have a textbox, a panel with a gridview and an ajax dropdown extender.

I exposed properties such as DataSource, SelectedIndex, SelectedValue, and SelectedText.

I overloaded the databind method to create the gridview columns dynamically and then bind the datasource.

The aspx control is called by:

<uc:MultiColumnDropDownList ID="ddl" runat="server">
   <Columns>
      <asp:BoundField DataField="VALUE" HeaderText="ID">
      <asp:BoundField DataField="TEXT" HeaderText="Description">
   </Columns>
</uc:MultiColumnDropDownList>

Now, I was able to achieve this effect but I still have some problems.

I have 3 hiddenfields to hold the value of the selectedindex, selectedtext, and selectedvalue.

I set the values on these fields using javascript by adding attribute "onclick" on the row_databound event of the gridview.

I can successfully retrieve these values from the page calling the control although I am not really sure if this is the proper and the best way to do it.

Now, my problem is setting these values from the page.

To easily understand, imagine the built-in asp.net dropdownlist. Once you set the SelectedItem.value, automatically, it selects the text corresponding that value with the correct index.

In my control, I am at a loss of how to achieve the same effect mainly because the properties is set to assign value to one hiddenfield separately.

Public Property SelectedIndex() As Integer
        Get
            Return IIf(IsNumeric(hfDropDownSelectedIndex.Value.Trim()), hfDropDownSelectedIndex.Value.Trim(), -1)
        End Get
        Set(ByVal value As Integer)
            hfDropDownSelectedIndex.Value = value
        End Set
    End Property

    Public Property SelectedValue() As String
        Get
            Return hfDropDownSelectedValue.Value.Trim()
        End Get
        Set(ByVal value As String)
            hfDropDownSelectedValue.Value = value
        End Set
    End Property

    Public Property SelectedText() As String
        Get
            Return hfDropDownSelectedText.Value.Trim()
        End Get
        Set(ByVal value As String)
            hfDropDownSelectedText.Value = value
            txtDropDownSelection.Text = value
        End Set
    End Property

For example,

If I choose an item from the dropdown, javascript automatically sets the three hiddenfields. The value is set from the gridview with datafield, "value". The text is set from the gridview with datafield, "text". The selectedindex is set with the rowindex of the selected gridviewrow. So these are done all at once onclick.

But, what do I do if user wants to set it programaticaly from the page caller?

Say, I have a default.aspx that calls the control. Upon page load, the control is populated with a datatable as a datasource.

By default, the value of the hiddenfields are empty making the SelectedIndex=-1 and the SelectedText and SelectedValue equal to "".

If I set from the default.aspx the SelectedIndex to 2 (from 0), what happens is that the hfDropDownSelectedIndex will have a value of 2 but the text and value will remain as "".

So what I am trying to figure out is how to set the selected text and value corresponding to that index. Maybe the other way around (like selecting the index and text corresponding that value)? I don't know in which event should I include this. It shouldn't be DataBind I think since databind is called before setting the selecteditem (index, text or value).

Maybe the hiddenfields are not the proper way to do it?

I am having lots of thoughts but I need some help to organize them so I thought maybe you guys can help me by sharing your some of your ideas on this matter.

Oh before I forgot, maybe you are thinking of why didn't I just change the selectedindex of the datagrid? I tried it using javascript also in the row_databound, added the enablepagevalidation="false" but I hate the fact that it is causing postback since it is closing my modalpopup.

Maybe you can suggest something that woul work more efficiently?

This post has been edited by November-06: 27 December 2012 - 02:57 AM