PageSizeComboBox client-side event issue

1 Answer 17 Views
Grid
Dave
Top achievements
Rank 1
Iron
Veteran
Iron
Dave asked on 31 Mar 2022, 10:52 AM

Hello,

I need a client-side solution that conditionally will not change the pager combo value.  I found an old thread here with some suggested client code at the bottom.  Basically, the pager's combo box selectedIndexChanging event is handled, and under given condition is canceled.  However, what I'm finding is that when not cancelled, the event is called twice.  Why is that, and how do I prevent?  Below is a simple example that demonstrates the issue.


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server">
    <meta charset="utf-8"/>
    <title></title>
    
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">

            function pageLoad(sender, eventArgs) {


            }

            function onCommand(sender, args) {
                args.set_cancel(true);

                var lsCommand = args.get_commandName();
                if (lsCommand == "PageSize") {
                    console.log('Got PageSize Command');
                }
            }

            function onMasterTableViewCreated(sender, args) {

                console.log('Creating selectedIndexChanging Handler');

                var pageSizeCombo = $telerik.findControl(sender.get_element(), "PageSizeComboBox");
                if (pageSizeCombo) {
                    pageSizeCombo.add_selectedIndexChanging(function (sender, args) {
                        //this method will fire before the combo changes the
                        //page size in the grid pager. You can cancel this event

                        // If condition is met, cancel
                        if (args.get_item().get_value() == "20") {
                            args.set_cancel(true);
                            console.log('Page Size change cancelled')
                        }
                        else {
                            console.log('Page Size change allowed');
                        }
                    });
                }
            }
        </script>
    </telerik:RadCodeBlock>

</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Default" ShowChooser="false" />

        <telerik:RadGrid ID="RadGrid1" runat="server"
            EnableViewState="false"
            AutoGenerateColumns="false" 
            AllowPaging="false" 
            AllowSorting="true"
            Width="100%"
            Height="150px"
        >
            <MasterTableView 
                    TableLayout="Fixed"
                    AllowNaturalSort="false" 
                    ClientDataKeyNames="Name"
                    AllowPaging="true" 
                    EnableViewState="false"
            >
                <Columns>
                    <telerik:GridBoundColumn DataField="Name"  UniqueName="Name"  DataType="System.String" HeaderText="Name"  HeaderStyle-Width="150px" />
                    <telerik:GridBoundColumn DataField="Count" UniqueName="Count" DataType="System.Int32" HeaderText="Count" HeaderStyle-Width="150px" />
                </Columns>
                <NoRecordsTemplate>
                    <table style="height: 120px; width:100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td align="center" valign="middle">
                                There are no files matching the search criteria.
                            </td>
                        </tr>
                    </table>
                </NoRecordsTemplate>
                <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" PageSizes="10,20,50,100" />
            </MasterTableView>
            <ClientSettings>
                <ClientEvents 
                    OnCommand="onCommand"
                    OnMasterTableViewCreated="onMasterTableViewCreated"
                />
                <Selecting AllowRowSelect="true" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <DataBinding ShowEmptyRowsOnLoad="false" />
            </ClientSettings>
            <SortingSettings EnableSkinSortStyles="false" />
        </telerik:RadGrid>

    </form>
</body>
</html>



    public partial class Test2 : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Name", System.Type.GetType("System.String"));
            dt.Columns.Add("Count", System.Type.GetType("System.Int32"));

            DataRow dr = dt.NewRow();
            dr["Name"] = "Name1";
            dr["Count"] = 25;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["Name"] = "Name2";
            dr["Count"] = 18;
            dt.Rows.Add(dr);

            RadGrid1.DataSource = dt;
            RadGrid1.DataBind();

            RadGrid1.MasterTableView.PageSize = 20;
        }
    }

Thanks,

Dave

1 Answer, 1 is accepted

Sort by
0
Dave
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 04 Apr 2022, 01:23 PM

Never mind, I found an easier solution using the client-side onCommand event as suggested here.

Thanks,

Dave

 

Tags
Grid
Asked by
Dave
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Dave
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or