Why my yui datatable within an updatepanel disappears after postback?

Question

I got my YUI datatable rendered with my json datasource inside an updatepanel... If i click a button within that updatepanel causes postback and my yui datatable disappears

• Why yui datatable within an updatepanel disappears after postback?

EDIT:

I am rendering YUI Datatable once again after each post back which is not a form submit... I know it is a bad practice... What can be done for this.... Any suggestion.....

 if (!IsPostBack)
    {
        GetEmployeeView();
    }


public void GetEmployeeView()
{
    DataTable dt = _employeeController.GetEmployeeView().Tables[0];
    HfJsonString.Value = GetJSONString(dt);
    Page.ClientScript.RegisterStartupScript(Page.GetType(), "json",
    "EmployeeDatatable('" + HfJsonString.Value + "');", true);
}

When i click any button in that page it causes postback and i have to 
regenerate YUI Datatable once again with the hiddenfield value containing
json string..


protected void LbCancel_Click(object sender, EventArgs e)
{
    HfId.Value = "";
    HfDesigId.Value = "";
    ScriptManager.RegisterClientScriptBlock(LbCancel, typeof(LinkButton),
     "cancel", "EmployeeDatatable('" + HfJsonString.Value + "');, true);
}

My javascript:

function EmployeeDatatable(HfJsonValue){
        var myColumnDefs = [ 
            {key:"Identity_No", label:"Id", width:50, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
            {key:"Emp_Name", label:"EmployeeName", width:150, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}}, 
            {key:"Address", label:"Address", width:200, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}}, 
            {key:"Desig_Name", label:"Category", width:200, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
            {key:"", formatter:"checkbox"}
        ]; 
        var jsonObj=eval('(' + HfJsonValue + ')');
        var target = "datatable";
        var hfId = "ctl00_ContentPlaceHolder1_HfId";
        generateDatatable(target,jsonObj,myColumnDefs,hfId)
    }



function generateDatatable(target,jsonObj,myColumnDefs,hfId){   
        var root;
        for(key in jsonObj){
            root = key; break;
        }
        var rootId = "id";
        if(jsonObj[root].length>0){
            for(key in jsonObj[root][0]){
                rootId = key; break;
            }
        }
        YAHOO.example.DynamicData = function() { 
            var myPaginator =  new YAHOO.widget.Paginator({ 
                rowsPerPage: 10, 
                template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE, 
                rowsPerPageOptions: [10,25,50,100], 
                pageLinks: 10 });

            // DataSource instance 
            var myDataSource = new YAHOO.util.DataSource(jsonObj); 
            myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
            myDataSource.responseSchema = {resultsList: root,fields:new Array()};
            myDataSource.responseSchema.fields[0]=rootId;
            for(var i=0;i<myColumnDefs.length;i++){
                myDataSource.responseSchema.fields[i+1] = myColumnDefs[i].key;
            }
            // DataTable configuration 
            var myConfigs = { 
                 sortedBy : {key:myDataSource.responseSchema.fields[1], dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
                 paginator : myPaginator
            }; 
             // DataTable instance 
            var myDataTable = new YAHOO.widget.DataTable(target, myColumnDefs, myDataSource, myConfigs); 
            myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow); 
            myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow); 
            myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);

            myDataTable.subscribe("checkboxClickEvent", function(oArgs){
                var hidObj = document.getElementById(hfId);
                var elCheckbox = oArgs.target;
                var oRecord = this.getRecord(elCheckbox);
                var id=oRecord.getData(rootId);
                if(elCheckbox.checked){
                    if(hidObj.value == ""){
                        hidObj.value = id;
                    }
                    else{ 
                        hidObj.value += "," + id;
                    }
                }      
                else{
                    hidObj.value = removeIdFromArray(""+hfId,id);  
                }
            });
            myPaginator.subscribe("changeRequest", function (){

                if(document.getElementById(hfId).value != "")
                {
                     if(document.getElementById("ConfirmationPanel").style.display=='block')
                       {
                         document.getElementById("ConfirmationPanel").style.display='none';
                       }
                    document.getElementById(hfId).value="";
                }
                return true;
            });
            myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { 
                oPayload.totalRecords = oResponse.meta.totalRecords; 
                return oPayload; 
            } 
            return { 
                ds: myDataSource, 
                dt: myDataTable 
            }; 
        }(); 
    }

Answer 1

Hai guys,

I got an answer for my qusetion.... Its my postback that caused the problem and i solved it by making an ajax call using ajax enabled WCF Service in my web application... Everything works fine now....

Answer 2

Anything you are generating client side will have to be regenerated after every page refresh (and after every partial page refresh, if that part contains client-side generated html).

Because the YUI datatable gets its data on the client, you will have to render it again each time you replace that section of html.