locked
Using a Dropdown box form a Custom List Form to filter a Dataview Web Part RRS feed

  • Question

  • I'm attempting to use a Dropdown box form a Custom List Form to filter a Dataview Web Part. Any help would be grateful.


    Michael L. Williams

    Tuesday, March 27, 2012 4:38 PM

Answers

  • Okay I hope I understood your question correctly.

    You can approach your problem in two way, one I described earlier. I don't think you need Custom List form web part with a  dropdown values. You already have those values Custom list form. Basically, whenever the selected value changes in custom list form do something, hide/show the relevant part. 

    The easiest solution might be just use jQuery using following steps.

    • Include jQuery CDN or file either through CQWP or in the page
    • check what value is currently selected in your custom list form. You can use developer's tool to find out the jQuery selector
    • Based of selected value, hide or show certain part to the user. 

    Hope it helps! 


    7929

    Wednesday, April 4, 2012 6:01 PM
  • Here is an example of using jQuery which hide the 'Div' tag whenever the selected month in dropdown list is 'January'

    You can do something similar. 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <SCRIPT type=text/javascript>
    
    $(document).ready(function($) {
        //displays the message "Hello World" on the screen. 
        //alert("Hello World");
        var selectedMonth = $("#DropDownList1 option:selected").text();
        if (selectedMonth == 'January')
        {
        	$("#hideThis").hide();
        }
    });
    
    
    </SCRIPT>
    
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    <table>
    	<tr>
    						
    <td width="190px" valign="top" class="ms-formlabel" style="font-size: 1em; font-weight: normal; font-family: 'Segoe UI'; height: 43px">Choose a month:</td><td width="400px" valign="top" class="ms-formbody" style="height: 43px">
    						<asp:DropDownList runat="server" id="DropDownList1" Width="250px" Height="18px"  AutoPostBack="True" AppendDataBoundItems="True" >
    						<asp:ListItem>November</asp:ListItem><asp:ListItem>December</asp:ListItem>
    						<asp:ListItem>January</asp:ListItem><asp:ListItem>February</asp:ListItem><asp:ListItem>March
    						</asp:ListItem><asp:ListItem>April</asp:ListItem>
    						</asp:DropDownList>
    						
    						
    
    </td></tr>
    </table>
    <div id="hideThis">hide this</div>


    7929

    Wednesday, April 4, 2012 6:03 PM

All replies

  • Hello Mike,

    ->open your list into Sharepoint Designer

    ->open all item Page , add your Drop down box above "<WebPartPages:XsltListViewWebPart....".

    ->Now click into XsltListViewWebPart  then go to designer Ribbon --> Click on Filter Button.

    -->Select your filter  field.

    -> in Value drop down Select Create New Parameter.

    --> then create parameter Give Parameter source as a control then slect your drop down name.

    --> now click ok then Save page.

    thats it. Enjoy..


    Regards,
    Jatin Ambaliya
    (Gujarat,India)
    Email:jatinambaliya@gmail.com
    SkypeId : jatin1621

    Wednesday, March 28, 2012 2:06 PM
  • Hello,

    Could you clarify a little. Thanks.


    Michael L. Williams

    Tuesday, April 3, 2012 2:39 PM
  • Here is what might help you.

    • Let's say that your DVWP is about customer orders and your dropdown filter is by 'Province'. 
    • Create a dropdown datasource for 'Province'
    • Datasource could be from anything like List, for SQL database
    • Insert asp.net Dropdown control on the page
    • Your code should look something like this (note I am adding 'All' as well so when the page loads user will see all the data)

    <asp:DropDownList runat="server" id="ProvinceDropDownList" AutoPostBack="True" AppendDataBoundItems="True" DataValueField="Province_Name"

    DataTextField="Province_Name" DataSourceID="ProvinceSPDataSource"><asp:ListItem>All</asp:ListItem></asp:DropDownList>

    • Now click anywhere in DVWP
    • Click on 'Filter' button on ribbon in 'Options' tab
    • Check 'Add XSLT Filtering'
    • Write your conditions which could be something like this
    [(@Province = $Param1 and $Param1 != 'All') or (@Province != $Param1 and $Param1 ='All')]

    Basically this Xpath expression is saying that, either grab all data when 'All' is selected otherwise grabbed the filtered data. 

    That's it!

    Please let me know if you have any further questions. 


    7929

    Tuesday, April 3, 2012 11:54 PM
  • Hello PremShrestha,

    I already have a custom list form on the Page. Ok here is the spill.

    I have 3 WebParts on the Page: A Custom List Form that holds the Questions to the survey.

                                                       A DataView WebPart that holds the written Instructions based on the answer.

                                                       A Custom List Form Web Part, that includes a dropdown; which should be used to filter the Instructions based on the answer Yes or No.

    My question is: If I already have a Custom List Form with a dropdown inside, what do I need to add another dropdown for? Or do I have to add it anyway?


    Michael L. Williams


    Wednesday, April 4, 2012 2:17 PM
  • Okay I hope I understood your question correctly.

    You can approach your problem in two way, one I described earlier. I don't think you need Custom List form web part with a  dropdown values. You already have those values Custom list form. Basically, whenever the selected value changes in custom list form do something, hide/show the relevant part. 

    The easiest solution might be just use jQuery using following steps.

    • Include jQuery CDN or file either through CQWP or in the page
    • check what value is currently selected in your custom list form. You can use developer's tool to find out the jQuery selector
    • Based of selected value, hide or show certain part to the user. 

    Hope it helps! 


    7929

    Wednesday, April 4, 2012 6:01 PM
  • Here is an example of using jQuery which hide the 'Div' tag whenever the selected month in dropdown list is 'January'

    You can do something similar. 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <SCRIPT type=text/javascript>
    
    $(document).ready(function($) {
        //displays the message "Hello World" on the screen. 
        //alert("Hello World");
        var selectedMonth = $("#DropDownList1 option:selected").text();
        if (selectedMonth == 'January')
        {
        	$("#hideThis").hide();
        }
    });
    
    
    </SCRIPT>
    
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    <table>
    	<tr>
    						
    <td width="190px" valign="top" class="ms-formlabel" style="font-size: 1em; font-weight: normal; font-family: 'Segoe UI'; height: 43px">Choose a month:</td><td width="400px" valign="top" class="ms-formbody" style="height: 43px">
    						<asp:DropDownList runat="server" id="DropDownList1" Width="250px" Height="18px"  AutoPostBack="True" AppendDataBoundItems="True" >
    						<asp:ListItem>November</asp:ListItem><asp:ListItem>December</asp:ListItem>
    						<asp:ListItem>January</asp:ListItem><asp:ListItem>February</asp:ListItem><asp:ListItem>March
    						</asp:ListItem><asp:ListItem>April</asp:ListItem>
    						</asp:DropDownList>
    						
    						
    
    </td></tr>
    </table>
    <div id="hideThis">hide this</div>


    7929

    Wednesday, April 4, 2012 6:03 PM
  • When you say hide the 'Div' tag; what exactly do you mean. I want to hide or filter rows from a  DataView. Could you clarify a little. I'm not a JQuery expert, so it's a little harder for me to follow.

    Michael L. Williams

    Thursday, April 5, 2012 3:23 AM
  • If you want to hide/filter rows from dataview the steps that I have given at first should help.

    Here is step by step walkthrough: http://social.technet.microsoft.com/Forums/en-US/sharepointcustomization/thread/949d4443-58a4-464b-9603-e4c280740650 

    Basically, you just add filter to your rows. Here is another example: 

    http://social.msdn.microsoft.com/Forums/eu/sharepointcustomization/thread/f8cf67e7-9ba8-4dd5-8697-6a5b042c5bf2

    Thanks,

    Prem

     

    7929

    Thursday, April 5, 2012 5:53 PM