Flexigrid client side events

Flexigrid events

OnClientDataLoad

The OnClientDataLoad client side event is raised when the source of the flexigrid is loaded.

    <fx:Flexigrid ID="FG"
        runat="server"
        OnClientDataLoad="dataLoad"
        HandlerUrl="FlexiImpl.axd">
        <Columns>
	        <fx:FlexiColumn Code="id" Text="ID" AllowSort="false" AllowFilter="false" />
	        <fx:FlexiColumn Code="greek" Text="Greek Name" />
	        <fx:FlexiColumn Code="roman" Text="Roman Name" />
        </Columns>
      </fx:Flexigrid>

    <script type="text/javascript">
        function dataLoad(sender, args) {
            alert('Data loaded!');
        }
    </script>

The client side handler recieves the sender argument, which represents the Flexigrid ASP.NET client side class instance.

OnClientRowClick

The OnClientRowClick client side event is raised when the user clicks a row.

    <fx:Flexigrid ID="FG"
        runat="server"
        OnClientRowClick="rowClicked"
        HandlerUrl="FlexiImpl.axd">
        <Columns>
	        <fx:FlexiColumn Code="id" Text="ID" AllowSort="false" AllowFilter="false" />
	        <fx:FlexiColumn Code="greek" Text="Greek Name" />
	        <fx:FlexiColumn Code="roman" Text="Roman Name" />
        </Columns>
      </fx:Flexigrid>

    <script type="text/javascript">
        function rowClicked(sender, args) {
            alert('custom row click');
        }
    </script>

The client side handler recieves the sender argument, which represents the Flexigrid ASP.NET client side class instance. The next argument, is a custom object, containing:

selected: boolean which shows the state of the clicked row
data: the data recieved from the server for that row. The data property contains an id property and an array of string values (cell), representing the data in each cell.

OnClientBeforeSendData

The OnClientBeforeSendData client side event is raised before the request for a datasource is made.

You can use this event to add some extra filtering criteria.

Here is a page where you can see this event in action.

    <fx:Flexigrid ID="FG"
        runat="server"
        OnClientBeforeSendData="sendData"
        HandlerUrl="FlexiImpl.axd">
        <Columns>
	        <fx:FlexiColumn Code="id" Text="ID" AllowSort="false" AllowFilter="false" />
	        <fx:FlexiColumn Code="greek" Text="Greek Name" />
	        <fx:FlexiColumn Code="roman" Text="Roman Name" />
        </Columns>
      </fx:Flexigrid>

    <script type="text/javascript">
       function sendData(data) {
			if (!$("#chkMale").attr('checked'))
				data.push({ name: 'male', value: 'false' });
			if (!$("#chkFemale").attr('checked'))
				data.push({ name: 'female', value: 'false' });
		}
    </script>

The data argument passed is a collection of key/value sent to the server. You can add any value you'd like, but it's up to you to handle that value on the server.

On the server, you can get the value you put on the client using HttpContext.Current.Request.Form[your key here]

        foreach (var p in pips)
		{
			if ((HttpContext.Current.Request.Form["male"] == "false" && p.Gender == "M")
				|| (HttpContext.Current.Request.Form["female"] == "false" && p.Gender == "F")
				)
				continue;

			result.Add(new KeyValuePair(p.ID, new object[] { p.Name, p.Birthday, p.Gender }));
		}

OnClientColumnToggle

The OnClientColumnToggle client side event is raised after a column is hidden/made visible by the user.

    <fx:Flexigrid ID="FG"
        runat="server"
        OnClientColumnToggle="colToggle"
        HandlerUrl="FlexiImpl.axd">
        <Columns>
	        <fx:FlexiColumn Code="id" Text="ID" AllowSort="false" AllowFilter="false" />
	        <fx:FlexiColumn Code="greek" Text="Greek Name" />
	        <fx:FlexiColumn Code="roman" Text="Roman Name" />
        </Columns>
      </fx:Flexigrid>

The arguments received by the client function are the column id and a boolean, indicating weather the column is shown or hidden.

    <script type="text/javascript">
       function colToggle(cid, visible) {
            alert("cid: " + cid + "; visible: " + visible);
        }
    </script>

OnClientSortChanged

The OnClientSortChanged client side event is raised after the user performs a sort action on the flexigrid.

    <fx:Flexigrid ID="FG"
        runat="server"
        OnClientSortChanged="sortChanged"
        HandlerUrl="FlexiImpl.axd">
        <Columns>
	        <fx:FlexiColumn Code="id" Text="ID" AllowSort="false" AllowFilter="false" />
	        <fx:FlexiColumn Code="greek" Text="Greek Name" />
	        <fx:FlexiColumn Code="roman" Text="Roman Name" />
        </Columns>
      </fx:Flexigrid>

The arguments received by the client function are the column name and the sort direction(asc or desc).

    <script type="text/javascript">
       function sortChanged(col, direction) {
            alert("col: " + col + "; direction: " + direction);
        }
    </script>

OnClientSubmit

The OnClientSubmit client side event is raised before the ajax call to get the grid's source. You can cancel the ajax call by returning false.

    <fx:Flexigrid ID="FG"
        runat="server"
        OnClientSubmit="onSubmit"
        HandlerUrl="FlexiImpl.axd">
        <Columns>
	        <fx:FlexiColumn Code="id" Text="ID" AllowSort="false" AllowFilter="false" />
	        <fx:FlexiColumn Code="greek" Text="Greek Name" />
	        <fx:FlexiColumn Code="roman" Text="Roman Name" />
        </Columns>
      </fx:Flexigrid>

    <script type="text/javascript">
      function onSubmit() {
            alert("submitting data!");
            return true;
      }
    </script>

FlexiColumn OnRowRender event

The OnRowRender client side event is raised before rendering a cell. By implementing a renderer, you take control over what's placed inside the cell.

You can find a comprehensive example on how a renderer is implemented.

    <fx:Flexigrid ID="FG"
        runat="server"
        HandlerUrl="FlexiImpl2.axd">
        <Columns>
	        <fx:FlexiColumn Code="name" Text="Name" />
			<fx:FlexiColumn Code="birthday" Text="B Day" OnRowRender="highlightBDday" />
			<fx:FlexiColumn Code="gender" Text="Gender" />
        </Columns>
      </fx:Flexigrid>

The parameters passed are

tdCell: the td cell that will hold the data
data: the array of row values
index: the index of the data array that will identify the current cell's content

    <script type="text/javascript">
      function highlightBDday(tdCell, data, dataIdx) {
	    var birthdate = new Date(parseInt(data.cell[dataIdx].substr(6)));
		if (birthdate.getMonth() == new Date().getMonth())
			$(tdCell).css('background-color', 'red');

		tdCell.innerHTML = birthdate.format("MM/dd/yyyy");
	    }
    </script>

FlexiButton OnClientClick event

The OnClientClick event occurs when the user pushes a FlexiButton.

     <fx:Flexigrid ID="FG" 
		runat="server"
		HandlerUrl="FlexiImpl.axd">
		 <Columns>
			 <fx:FlexiColumn Code="id" Text="ID" AllowSort="false" AllowFilter="false" />
			 <fx:FlexiColumn Code="greek" Text="Greek Name" />
			 <fx:FlexiColumn Code="roman" Text="Roman Name" />
		 </Columns>
		 <Buttons>
			 <fx:FlexiButton Text="Client action" IconUrl="../img/add.png" OnClientClick="AddNewItem" />
			 <fx:FlexiButtonSeparator />
		 </Buttons>
	 </fx:Flexigrid>

The parameter passed to the function is the button text.

    <script type="text/javascript">
        function AddNewItem(buttonName) {
		    alert(buttonName + ': pretending to add a new item');
	    }
    </script>

Flexigrid-ASP.NET