Javascript - Adding a filter on clientside

4 posts, 2 answers
  1. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 09 Aug 2013 Link to this post

    We have a radFilter control linked to a radgrid.
    The user selected various filters and etc.. Applies them to the grid.
    Now the user opens a radwindow to perform certain task on that result set from the radgrid.

    In this modal there is an additional option to filter the radgrids data further (the rad grid does not post back and etc..)
    The user selects what extra filter option they want from a radCombo.. ON the blur even I now need to add the selected option to the filter and update a DIV that shows a count of the number of records to be changed by this selection.. 

    How do I add a filter from Javascript?

    From the documentation it looks like I should be able to do this, but I an not seeing a clear example...
  2. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 14 Aug 2013 Link to this post

    Hello Warren,

    If I understand correctly you want to add an expression using JavaScript. This is achievable by using the addExpression method of the RadFilter. Note however that when this is done the control need to postback in order to recreate it's structure.

    Regards,
    Angel Petrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 19 Aug 2013 Link to this post

    I have given up on my first approach, instead I am trying to the do the following:

    1. User selects and applies a filter to a RadGrid using a RadFilter control
    -- the radGrid uses a LinqDataSource which uses a view in sql server 2008
    2.  I have set a RadGrid client even (ClientSettings  clientevents OnCommand = "RaiseCommand" ) 
           -- in the javascript I am now trying to get the filterexpression that has been applied...


    Where and how do I get the filter expression via the client side?


    (the following source HTML is shortened...)

    <telerik:RadGrid ID="RadGridTags" runat="server" AutoGenerateColumns="False" AllowPaging="True"
              AllowSorting="True" AllowFilteringByColumn="True"
              CellSpacing="0" GridLines="None" OnItemCommand="RadGridTags_ItemCommand" OnItemCreated="RadGridTags_ItemCreated"
              OnPreRender="RadGridTags_PreRender" OnItemDataBound="RadGridTags_ItemDataBound"
              OnExcelExportCellFormatting="RadGridTags_ExcelExportCellFormatting" OnExportCellFormatting="RadGridTags_ExportCellFormatting"
              OnExcelMLExportRowCreated="RadGridTags_ExcelMLExportRowCreated" OnExcelMLExportStylesCreated="RadGridTags_ExcelMLExportStylesCreated"
              OnExcelMLWorkBookCreated="RadGridTags_ExcelMLWorkbookCreated" OnGridExporting="RadGridTags_GridExporting" DataSourceID="ldsTagGrid">
              <ExportSettings>
                  <Excel Format="ExcelML" />
              </ExportSettings>
              <ClientSettings>
                  <ClientEvents OnCommand="RaiseCommand" />
              </ClientSettings>
              <MasterTableView DataKeyNames="Tag"


    This does NOT fire at all....


    function RaiseCommand(sender, args) {
               args.set_cancel(true); //cancel the default command to prevent postback/ajax request
     
               var filterExpressions = sender.get_masterTableView().get_filterExpressions();
     
               //obtain the values from the GridFilterExpression properties
     
               if (filterExpressions.length > 0) {
                   var expression = filterExpressions[0];
                   var fieldName = expression.get_fieldName();
                   var fieldValue = expression.get_fieldValue();
                   var columnUniqueName = expression.get_columnUniqueName();
                   var filterFunction = expression.get_filterFunction(); // enum Telerik.Web.UI.GridFilterFunction
     
                   alert(expression.toString() + "/n" + expression.toDynamicLinq());
               }
     
               alert(filterExpressions.toString());
           }


    The basic issue is that I have to get the filters applied to the grid sent to a STATIC WEB METHOD so it can use the filters for determining data it should be working on...   This web method is called via a JQUERY AJAX call...


  5. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 22 Aug 2013 Link to this post

    Hello Warren,

    In order to get the filters the JavaScript logic needs a slight modification. If you try something like this:
    function RaiseCommand(sender, args) {
                args.set_cancel(true); //cancel the default command to prevent postback/ajax request
     
                var filterExpressions = sender.get_masterTableView().get_filterExpressions();
     
                //obtain the values from the GridFilterExpression properties
                if (filterExpressions.get_count() > 0) {
                    var expression = filterExpressions.getItem(0);
                    var fieldName = expression.get_fieldName();
                    var fieldValue = expression.get_fieldValue();
                    var columnUniqueName = expression.get_columnUniqueName();
                    $telerik.$.ajax({
                        type: 'POST',
                        url: 'Default.aspx/MyWebMethod',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify({ FieldName: fieldName, FieldValue: fieldValue, ColumnName: columnUniqueName }),
                        dataType: 'json',
                        success: function myfunction() {
                        },
                        error: function myfunction(err) {
                            alert("Error");
                        }
                    });
                }
            }

    C#:
    [WebMethod]
        public static void MyWebMethod(string FieldName, string FieldValue, string ColumnName)
        {
            
        }

    You should be able to make things work as expected. Note that by calling args.set_cancel(true) on the client you will prevent the grid from using it's built in filtering.

    Regards,
    Angel Petrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top