[Solved] Client Side Filter with asp checkbox

[Nimesh]

Hi all,
To save a round trip to the database, I would like to be able to filter radgrid items client side for speed purposes. I have a grid that will contain anywhere from 500-2500 items in  columns representing Departments in a database. The grid has client paging on as well as drag and drop columns. I would prefer to keep the paging at least.

<telerik:RadCodeBlock runat="server" ID="radCodeBlock">
            <script type="text/javascript">
function CustFilter() {
                    var chk = document.getElementById('<%=CheckBox1.ClientID %>');

                    if (chk.checked == true) {
                        var radG = $find("<%=RadGrid1.ClientID %>");
                        var DataItems = radG.get_masterTableView().get_dataItems();
                        var masterTableView = radG.get_masterTableView();

                        for (i = 0; i < DataItems.length; i++) {
                            var row = DataItems[i].get_element();
                            //var row = masterTableView.get_dataItems()[i];
                            var checkBox = row.children[5].children[0];
                            //var checkBox = row.get_cell("Approved")

                            if (!checkBox.checked) {
                                radG.get_masterTableView().hideItem(i);
                            }
                            else {
                                radG.get_masterTableView().showItem(i);
                            }
                        }

                    }
                    else {
                        alert("unchecked");
                    }
                }
</script>
 </telerik:RadCodeBlock>
<telerik:RadGrid ID="RadGrid1" runat="server" PageSize="50" Height="600px" AllowFilteringByColumn="True"
        AllowPaging="True" AllowSorting="True" DataSourceID="SqlDsGetRetDepts"
        GridLines="None" ShowGroupPanel="True" Skin="Windows7"
        AutoGenerateColumns="false" EnableLinqExpressions="false">
        <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True"
            ReorderColumnsOnClient="True">
            <ClientEvents OnRowContextMenu="RowContextMenu" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
        <MasterTableView DataSourceID="SqlDsGetRetDepts" ClientDataKeyNames="DeptID, CustomerID" DataKeyNames="DeptID">
            <Columns>
                <telerik:GridBoundColumn DataField="DeptID" FilterControlWidth="50px" ItemStyle-Width="100px" HeaderText="DeptID" SortExpression="DeptID" UniqueName="DeptID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustID" ItemStyle-Width="100px" AutoPostBackOnFilter="false" SortExpression="CustID" UniqueName="CustomerID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="DeptName" FilterControlWidth="100px" ItemStyle-Width="100px" HeaderText="Name" SortExpression="Name" UniqueName="DeptName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="DeptPhone" FilterControlWidth="50px" ItemStyle-Width="100px" HeaderText="DeptPhone" SortExpression="DeptPhone" UniqueName="DeptPhone">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="BillDeptID" HeaderText="Bill DeptID" SortExpression="Bill DeptID" UniqueName="BillDeptID">
                </telerik:GridBoundColumn>
                <telerik:GridCheckBoxColumn DataField="Approved" HeaderText="Approved" SortExpression="Approved" UniqueName="Approved">
                </telerik:GridCheckBoxColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

One of those columns is a boolean field called "Approved" in a gridcheckboxcolumn . I woudl like the user to be able to check a checkbox and filter out all those that are not "Approved". I cant quite glean from other posts how to do this, my client-side code is not quite there. I am missing something, as I am hiding all the data on the page, and when I page the data is all there. Any help would be appreciated! Thanks in advance,

Nimesh Jagota

[Shinu]

Hi Nimesh,

I am not quite sure about your requirement.I guess you want to make certain rows invisible by clicking the GridCheckBoxColumn.Please take a look into the sample code snippet I tried.

C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem ditem = (GridDataItem)e.Item;
        int index = ditem.ItemIndex;
        CheckBox chkbox = (CheckBox)ditem["Approved"].Controls[0];
        chkbox.Enabled = true;
        chkbox.AutoPostBack = true;
        chkbox.Attributes.Add("onclick", "oncheckedChaned(this,'" + index + "');return false;");
    }
}

Javascript:

<script type="text/javascript">
    function oncheckedChaned(CheckBox,index)
    {
        var master = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
        var row = master.get_dataItems()[index];
        var cell1 = master.getCellByColumnUniqueName(row, "DeptID");
        var cell2 = master.getCellByColumnUniqueName(row, "CustomerID");
        var cell3 = master.getCellByColumnUniqueName(row, "DeptName");
        . . .

        var cell4 = master.getCellByColumnUniqueName(row, "Approved");
        if (CheckBox.checked == true)
        {
            cell1.className = "hide";
            cell2.className = "hide";
            cell3.className = "hide";
        . . .

            cell4.className = "hide";
        }
    }
</script>

CSS:

<style type="text/css">
.hide
{
   display:none;
}
</style>

Thanks,
Shinu.

[Nimesh]

Thanks Shinu, I will try this shortly. I also have a puzzler regarding client side row selection and retrieving the selected rows' datakeyvalues server side somehow. If you have a chance, perhaps you can have a look.

Regards, Nimesh

[Shinu]

Hello Nimesh,

Try the following code to achieve your scenario,
C#:

protected void Button1_Click(object sender, EventArgs e)
{
 foreach (GridDataItem item in RadGrid1.SelectedItems)
 {
  string value = item.GetDataKeyValue("ID").ToString();//retreiving DataKeyValue
 }
}

JS:

function OnClientClick()
 {
  var grid = $find("<%=RadGrid1.ClientID %>");
  alert(grid.get_masterTableView().get_selectedItems().length);
 }

Thanks,
Shinu.

[Nimesh]

Thanks Shinu,

Here is a link to my other forum post if you might be able to help:http://www.telerik.com/community/forums/aspnet-ajax/grid/select-rows-client-side-get-selected-datakeys-server-side.aspx

It seems that the server side code is not recognizing the selected items. I am using client side row selection, but I assumed that the server side would be aware of the items. When I try to stuff a label with the selecteditem count server side, it shows 0. When I run the client side javascript code, it definitely displays the correct number of selecteditems in the alert dialog box.

Please have a look at the link if you can, as I am stuck and I cannot think of a work around.

Regards, Nimesh

[Nimesh]

Shinu, do you have any info on how format a radtimepicker that has been declaratively bound? I would like to show the seconds as well as hours and minutes. Below works, but only displays hours and minutes, not seconds.  Bound to an objectdatasource.

<telerik:RadTimePicker ID="RadTimePicker1" DbSelectedDate='<%# Bind("StartTime", "{0:T}") %>' ZIndex="30001" runat="server">
                                <TimeView runat="server" TimeFormat="HH:mm:ss"></TimeView>
                                <DateInput ID="DateInput1" runat="server" DateFormat="hh:mm ttt" DisplayDateFormat="hh:mm ttt">
                                </DateInput>
                                </telerik:RadTimePicker>

Regards, Nimesh

[Shinu]

Hi Nimesh,

Try setting the DateFormat/DisplayDateFormat of DateInput to "hh:mm:ss".

ASPX:

<telerik:RadTimePicker ID="RadTimePicker1"   DbSelectedDate='<%# Bind("OrderDate", "{0:T}") %>' ZIndex="30001" runat="server">
        <TimeView ID="TimeView1" runat="server" TimeFormat="HH:mm:ss"></TimeView>
        <DateInput ID="DateInput1" runat="server" DateFormat="hh:mm:ss" DisplayDateFormat="hh:mm:ss"></DateInput>
</telerik:RadTimePicker>

Thanks,
Shinu.

[Nimesh]

Worked! I could have sworn I tried that though. Sometimes you just need help. Thanks.  Do you know how to format or set the time selection interval to one minute? I mean the timeview selection display to have that up/down arrow increment like the old VB timecontrol? Regards, Nimesh

[Shinu]

Hello,

Try setting the Interval as shown below.
aspx:

<telerik:RadTimePicker ID="RadTimePicker1"   DbSelectedDate='<%# Bind("OrderDate", "{0:T}") %>'  runat="server">
        <TimeView ID="TimeView1" Interval="0:01" runat="server" TimeFormat="HH:mm:ss"></TimeView>
        <DateInput ID="DateInput1"  runat="server" DateFormat="hh:mm:ss" DisplayDateFormat="hh:mm:ss"></DateInput>
</telerik:RadTimePicker>

Thanks,
Shinu.

[Nimesh]

Hi Shinu,

I already have the interval set to 10 minutes, and there is a huge pop up to select the time. I was wondering if there was any way of creating a up/down arrow way of changing the minutes/hours?

Also, I am trying to do inline editing in with a RadGrid that has 1 date and 2 time columns. Displays great when the data is selected from the db. But when I hit the edit button, I get an error saying: Error: Sys.WebForms.PageRequestManagerServerErrorException: Value of '12/30/1899 10:26:48 AM' is not valid for 'SelectedDate'. 'SelectedDate' should be between 'MinDate' and 'MaxDate'.
Parameter name: SelectedDate

I set the min and max dates in codebehing durion preload for the controls like this:

If

 

 

TypeOf e.Item Is GridEditableItem And e.Item.IsInEditMode Then

 

 

 

Dim EditItem As GridEditableItem = e.Item

 

 

 

Dim ConfDatePkr As RadDatePicker = EditItem("ConfDate").Controls(0)

 

 

 

Dim StartTimePkr As RadTimePicker = EditItem("StartTime").Controls(0)

 

 

 

Dim EndTimePkr As RadTimePicker = EditItem("EndTime").Controls(0)

 

ConfDatePkr.MaxDate =

 

DateTime.Parse("12/12/2050")

 

ConfDatePkr.MinDate =

 

DateTime.Parse("12/29/1898")

 

StartTimePkr.MaxDate =

 

DateTime.Parse("12/12/2050")

 

StartTimePkr.MinDate =

 

DateTime.Parse("12/12/1898")

 

EndTimePkr.MaxDate =

 

DateTime.Parse("12/29/2050")

 

EndTimePkr.MinDate =

 

DateTime.Parse("12/29/1898")

 

 

 

End If

 

Is there an example of how to do inplace editing with the Radgrid and datetime columns? This is hard to find.

Thanks in advance for any advice, Shinu. Regards, Nimesh

[Shinu]

Hello,

I am not getting any javascript error at my end. Make sure that you are accessing the RadTimePicker using FindControl method.
VB:

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
    If TypeOf e.Item Is GridEditableItem And e.Item.IsInEditMode Then
        Dim EditItem As GridEditableItem = DirectCast(e.Item, GridEditableItem)
        Dim ConfDatePkr As RadDatePicker = DirectCast(EditItem("ConfDate").Controls(0), RadDatePicker)
        Dim StartTimePkr As RadTimePicker = DirectCast(EditItem.FindControl("StartTime"), RadTimePicker)
        'access the controls in template using FindControl method.
        Dim EndTimePkr As RadTimePicker = DirectCast(EditItem.FindControl("EndTime"), RadTimePicker)
    End If
End Sub

Thanks,
Shinu.

[Chitra]

How can I get this javascript working for a new row ? get_DataItems gets only existing rows in the table.

[Shinu]

Hi,

I suppose you want to access the controls in insert mode.
JS:

function onClick()
{
  var editForm = $find("<%=RadGrid1.ClientID%>").get_masterTableView().get_insertItem();
  var pkr = $telerik.findControl(editForm, "RadDatePicker2");
}

Thanks,
Shinu