PageSizeComboBox client-side event issue

1 Answer 95 Views

Grid

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

PageSizeComboBox client-side event issue

1 Answer, 1 is accepted