I believe this is the previous issue you mention in your post, Modify scheduler Day Header color

Further test indicate that in Week view and Month view, since the header will have dynamic style, the custom style will be overridden by the scheduler header style. For such scenario, you will need to create a HTML element, a DIV, in the header and move all the child node of the header to the newly created DIV. The style will be appended to this newly created DIV. Here is the modified snippet:

<style type="text/css">
    .customHead
    {
        background-image: none;
        background-color: Black;
        color: White;
    }
</style>
<script type="text/javascript" language="javascript">
    function WebScheduler1_OnAfterRenderView(controlId, viewMode)
    {
        var sched = ISGetObject(controlId);
        var headerElem = null;
        var type = "";

        //Setting all date 1 to have black background color with white text
        switch (viewMode)
        {
            case "Day":
                headerElem = sched.GetDayDayHeader().getElementsByTagName('td');
                type = 'DayHeader;';
                break;
            case "Week":
                headerElem = sched.GetWeekDayHeader().getElementsByTagName('td');
                type = 'DayHeader;';
                break;
            case "Month":
                headerElem = sched.GetSchedulerTableFrame().getElementsByTagName('td');
                type = 'MonthInboundDateHeader;MonthOutboundDateHeader;';
                break;
            case "Quarter":
                headerElem = sched.GetSchedulerTableFrame().getElementsByTagName('td');
                type = 'YearDayOfWeek;';
                break;
            case "Year":
                headerElem = sched.GetSchedulerTableFrame().getElementsByTagName('td');
                type = 'YearDayOfWeek;';
                break;
        }

        if (headerElem != null)
        {
            for (var i = 0; i < headerElem.length; i++)
            {
                if (type.indexOf(headerElem[i].getAttribute('type') + ";") != -1 &&
                headerElem[i].getAttribute('d') == '1')
                {
                    var innerContent = headerElem[i].innerHTML;
                    var childs = headerElem[i].childNodes;

                    var childCount = childs.length;
                    var loop = 0;

                    var newdiv = document.createElement('div');
                    newdiv.className = "customHead";
                    newdiv.style.height = headerElem[i].clientHeight + "px";
                    newdiv.style.lineHeight = headerElem[i].clientHeight + "px";
                    
                    while (loop < childCount)
                    {
                        newdiv.appendChild(childs[0]);
                        loop++;
                    }

                    headerElem[i].appendChild(newdiv);
                }
            }
        }
    }
</script>

In my test using the latest build for WebGrid 7 and WebUI Framework 3, build 402 and build 752 respectively, I could successfully refresh the grid during flypostback.

In my scenario, I use a WebButton in order to trigger a flypostback request and during the click event handler, I will need to invoke the RenderControl function to refresh the WebGrid and during FlyPostBackRequest the initialize data source logic will be executed. Here is the snippet:

protected void WebButton1_Clicked(object sender, ISNet.WebUI.WebDesktop.WebButtonClickedEventArgs e)
{
    WebButton1.ClientAction.RenderControl(WebGrid1); 
}

In my test, I set a static height for each row (24px) since all the row is a single line row. If you are using multi row cell or other scenario in which the height for each row could be different, the workaround would be to iterate all the row and sum all the height, as you have done using jQuery.

In my test a dynamically created panel that I created during PageLoad server side event handler could also be used in order to refresh the display.

However, a dynamically created panel during the execution of WebFlyPostBackMethod will not work. In that case, the parameter for the RenderControl would be the control which you attached the panel to, not the ASP Panel.

As far as I know, there is no function / method to set a text in the row header in WebGrid. However, we could use a workaround to achieve the screenshot, by simulating a cell with a similar style to the row header and disable the row header in WebGrid. During RowInitialize server side event you will need to set the value of this cell.

Here is the snippet:

The new cell with row header style:

<ISWebGrid:WebGridColumn Width="20px" EditType="NoEdit" Name="idxBox" Caption=" ">
    <CellStyle BackColor="#e4ecf7" CustomRules="text-align: center;"></CellStyle>
</ISWebGrid:WebGridColumn>

RowInitialize event handler snippet:

protected void wgTest_InitializeRow(object sender, RowEventArgs e)
{
    if (e.Row.Type == RowType.Record)
    {
        e.Row.Cells.GetNamedItem("idxBox").Text = (e.Row.Position + 1).ToString();
        e.Row.Cells.GetNamedItem("idxBox").Value = (e.Row.Position + 1).ToString();
    }
}

In order to remove the row header you will need to set RowHeaders="No" under LayoutSettings