This is a migrated thread and some comments may be shown as answers.

Insert Row using Array.insert

9 Answers 208 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Antony
Top achievements
Rank 1
Antony asked on 18 Feb 2009, 12:49 PM
Hi,

I'm trying to insert a row into my rad grid using the Array.insert method. I am trying to insert the row at the top of my grid

Array.insert(masterTable._dataItems, 0, dataItem) 

However, the result is that the new row is appended to the bottom of the table.

var rowDataItem = $create(  
                Telerik.Web.UI.GridDataItem,  
                {  
                    _owner : masterTable,  
                    _data : {}  
                },  
                null,  
                null,  
                row  
            );   
              
            if(direction == 'bottom') Array.add(masterTable._dataItems, rowDataItem);  
            else if(direction == 'top') Array.insert(masterTable._dataItems, 0, rowDataItem); 

Can anybody help? Does Array.insert work?

Thanks,

Antony

9 Answers, 1 is accepted

Sort by
0
Antony
Top achievements
Rank 1
answered on 18 Feb 2009, 01:58 PM
Hello!

I've managed to fix my problem. For those that wish to know, I modified this line

var row = masterTable.get_element().insertRow(-1) 

to this

var row = masterTable.get_element().insertRow(0) 

My new row is now inserted at the top of the table.

Thanks,

Antony
0
Boone
Top achievements
Rank 2
answered on 18 Feb 2009, 05:23 PM
Any idea on how to do this in code behind?
0
Antony
Top achievements
Rank 1
answered on 18 Feb 2009, 05:37 PM
Hello Boone,

My initial thoughts would be to modify your datasource and then rebind the grid. For example...

List<MyObject> lstData = GetData();  
 
// insert a new item to the top  
MyObject obj = new MyObject();  
lstData.Insert(0, obj);  
 
grid.DataSource = lstData;  
grid.DataBind(); 

I hope this helps. If not then please give me more information and I'll try again.

Thanks,

Antony
0
Boone
Top achievements
Rank 2
answered on 18 Feb 2009, 05:39 PM
Ya that would be an easy way, but I would like to avoid rebinding the grid. I want to reduce the amount of database activity, so instead of pulling 2000 records I would like to just add say 4 records to it.
0
Antony
Top achievements
Rank 1
answered on 18 Feb 2009, 05:47 PM
Hello.

I think the easiest way to do it would be to do it clientside. Use a web method to get the extra data items and then update the grid manually. Take a look at my update method

for(var i = 0, L = result.length; i < L; i++)  
        {  
            var row;  
                          
            if(direction == 'bottom') row = masterTable.get_element().insertRow(-1);  
            else row = masterTable.get_element().insertRow(0+i);  
              
            row.insertCell(-1);  
            row.insertCell(-1);  
            row.insertCell(-1);  
            row.insertCell(-1);  
            row.insertCell(-1);                  
              
               
            row.className = ((i % 2) == 0) ? 'GridRow_Pab3' : 'GridAltRow_Pab3';  
            row.id = masterTable.get_element().id + '__' + result[i].ID;  
                          
            var rowDataItem = $create(  
                Telerik.Web.UI.GridDataItem,  
                {  
                    _owner : masterTable,  
                    _data : {}  
                },  
                null,  
                null,  
                row  
            );   
              
            if(direction == 'bottom') Array.add(masterTable._dataItems, rowDataItem);  
            else if(direction == 'top') Array.insert(masterTable._dataItems, 0, rowDataItem);  
                                          
            var rowCell = masterTable.getCellByColumnUniqueName(rowDataItem,'Title');  
            rowCell.innerHTML = "<div style='overflow:hidden; width:100%'><nobr>" + result[i].Heading; + "</nobr></div>";  
              
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'ContentType');  
            rowCell.innerHTML = "<div style='overflow:hidden; width:100%'><nobr>" + result[i].TypeCode.Name; + "</nobr></div>";  
              
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'SelectColumn');  
            var checkBox = document.createElement('input');  
              
            checkBox.type='checkbox';  
            checkBox.id = 'cbselect' + id;  
            checkBox.onclick = cbSelect_Click;  
            checkBox.style.textAlign = 'center';  
              
            rowCell.appendChild(checkBox);  
              
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'Flag');  
            var id = result[i].ID;  
            var img = document.createElement('img');  
              
            img.onmouseover = flagButton_Over;  
            img.onmouseout= flagButton_Out;  
            img.onclick= flagButton_Click;  
            img.id = id;  
            img.style.textAlign = 'center';  
              
            if(result[i].Read == true)  
            {  
               img.src = '../Images/noFlag.png';  
            }  
            else 
            {  
                img.src = '../Images/flag2.png';  
            }  
            rowCell.appendChild(img);  
              
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'Date');  
            rowCell.innerHTML = "<div style='overflow:hidden; width:100%'><nobr>" + result[i].Date.format('dd/MM/yyyy') + "</nobr></div>";  
              
        } 

I hope this helps

Antony
0
Boone
Top achievements
Rank 2
answered on 18 Feb 2009, 05:55 PM
How would I get data in there though. My new rows will need to be populated with data. Here is what I am testing with...

1 grid with an asp:timer. Everytime the timer ticks I am calling a sproc. That sproc will return me 4 new records. I need to add those 4 records without hitting the database to pull the regular 2000.

Seems silly that they have not implemented a way to insert a row into a grid. I am able to insert new columns to the grid on tick but can't figure out how to add rows. Here is my timer tick method without the sproc call, just trying to add static data right now.

protected void Timer_Tick(object sender, EventArgs e) 
        { 
            GridBoundColumn boundColumn; 
            boundColumn = new GridBoundColumn(); 
            Grid1.MasterTableView.Columns.Add(boundColumn); 
            boundColumn.DataField = "ID"
            boundColumn.HeaderText = "ID"
 
            boundColumn = new GridBoundColumn(); 
            Grid1.MasterTableView.Columns.Add(boundColumn); 
            boundColumn.DataField = "CompanyName"
            boundColumn.HeaderText = "Company Name"
 
            boundColumn = new GridBoundColumn(); 
            Grid1.MasterTableView.Columns.Add(boundColumn); 
            boundColumn.DataField = "Description"
            boundColumn.HeaderText = "Description"
 
            GridTableView tableViewOrders = new GridTableView(Grid1); 
            GridDataItem newnewDataItem = new GridDataItem(tableViewOrders, 0, 0); <--- doesn't do anything yet, mid thought
        } 

0
Antony
Top achievements
Rank 1
answered on 20 Feb 2009, 10:26 AM

Hi Boone,

I'm sorry for the late reply - I was on holiday yesterday. You can achieve what you want using a webmethod and a little bit of javascript...

 

First of all you need to retrieve your four rows by calling a webmethod. For example,

Here is my webmethod

    [WebMethod(EnableSession=true)]  
    public List<PData> GetSearch(int iSearchID, int iDays, int iPage)  
    {  
        List<PData> lstData = DataProvider.GetPDataFromSearch(iSearchID, iDays, string.Empty, DataProvider.OrderBy.AVAILABLE, iPage, 10, falsefalse);  
          
        if (lstData != null)  
        {  
            return lstData;  
        }  
 
        lstData = new List<PData>();  
        return lstData;  
 
 
    } 

Here is look at part of my PData object
   /// <summary>  
    /// Class which defines a P data item  
    /// </summary>  
    [Serializable]  
    public class PData: Abstract.Data  
    {
        #region Class Level Variables  
 
        private string c_strHeading;  
        private string c_strAnalysis;
        
        #endregion  
 
        #region Properties  
          
        /// <summary>  
        /// The item heading  
        /// </summary>  
        public string Heading  
        {  
            get { return c_strHeading; }  
            set { c_strHeading = value; }  
        }  
 
        /// <summary>  
        /// The item analysis  
        /// </summary>  
        public string Analysis  
        {  
            get { return c_strAnalysis; }  
            set { c_strAnalysis = value; }  
        }  
    } 

I can use setInterval in my javascript to call my webservice every n milliseconds.
function callSearch(id)     
{     
    m_id = id;     
    setInterval("getSearch()", 1000);     
}     
    
var m_id     
function getSearch()     
{     
    // Call my webmethod    
    // bottom is a parameter passed to the UpdateGrid_Callback function  
    // it determines where the new row is going to be placed (in this case at the bottom of the grid)   
    PAB3.GetSearch(m_id,7,1,10,UpdateGrid_Callback,null,'bottom');     
}   
 

Finally we can add the new rows to the grid



 
function UpdateGrid_Callback(result, direction)  
    {     
        //debugger  
        var rowHeight = 24;           
        

        var

dataItems = masterTable.get_dataItems();

        var

itemIndex = dataItems.length-1;

 
        // result is an array of PData objects          
        for(var i = 0, L = result.length; i < L; i++)  
        {  
            var row;  
            

            itemIndex = itemIndex + 1;

  
            // appends a row to the table              
            if(direction == 'bottom') row = masterTable.get_element().insertRow(-1);  
            // inserts a row at the specified position  
            else row = masterTable.get_element().insertRow(0+i);  
              
            row.insertCell(-1);  
            row.insertCell(-1);  
            row.insertCell(-1);  
            row.insertCell(-1);  
            row.insertCell(-1);  
            row.insertCell(-1);                  
              
            // css styling   
            row.className = ((i % 2) == 0) ? 'GridRow_Pab3' : 'GridAltRow_Pab3';  
            row.id = masterTable.get_element().id + '__' + result[i].ID;  
              
            masterTable._owner._clientKeyValues[itemIndex] = { "ID" : result[i].ID };  
            // Creates a new Telerik grid row  
            var rowDataItem = $create(  
                Telerik.Web.UI.GridDataItem,  
                {  
                    _owner : masterTable,  
                    _data : {}  
                },  
                null,  
                null,  
                row  
            );   
              
            // Adds the Telerik grid row to the masterTable array  
            if(direction == 'bottom') Array.add(masterTable._dataItems, rowDataItem);  
            else if(direction == 'top') Array.insert(masterTable._dataItems, 0, rowDataItem);  
              
            // Populates each cell                              
            var rowCell = masterTable.getCellByColumnUniqueName(rowDataItem,'Title');  
            // Heading is a property of the PData object  
            rowCell.innerHTML = "<div style='overflow:hidden; width:100%'><nobr>" + result[i].Heading; + "</nobr></div>";  
              
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'IDColumn');  
            rowCell.innerHTML = "<div style='overflow:hidden; width:100%'><nobr>" + result[i].ID + "</nobr></div>";  
                  
                  
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'ContentType');  
            rowCell.innerHTML = "<div style='overflow:hidden; width:100%'><nobr>" + result[i].TypeCode.Name; + "</nobr></div>";  
              
            // Create a checkbox   
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'SelectColumn');  
            var checkBox = document.createElement('input');  
              
            checkBox.type='checkbox';  
            checkBox.id = 'cbselect' + result[i].ID;  
            checkBox.onclick = cbSelect_Click;  
            checkBox.style.textAlign = 'center';  
              
            rowCell.appendChild(checkBox);  
              
            // Create an image   
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'Flag');  
            var id = result[i].ID;  
            var img = document.createElement('img');  
              
            img.onmouseover = flagButton_Over;  
            img.onmouseout= flagButton_Out;  
            img.onclick= flagButton_Click;  
            img.id = id;  
            img.style.textAlign = 'center';  
              
            if(result[i].Read == true)  
            {  
               img.src = '../Images/noFlag.png';  
            }  
            else 
            {  
                img.src = '../Images/flag2.png';  
            }  
            rowCell.appendChild(img);  
              
            rowCell = masterTable.getCellByColumnUniqueName(rowDataItem, 'Date');  
            rowCell.innerHTML = "<div style='overflow:hidden; width:100%'><nobr>" + result[i].Date.format('dd/MM/yyyy') + "</nobr></div>";  
              
        }  
          
        HideLoadingIcon();  
          
          
    } 

I hope this helps...

Antony
0
Boone
Top achievements
Rank 2
answered on 25 Feb 2009, 03:54 PM
Antony,

I was put on a different project. I will save this and try it when I get back to it. Thanks for the help
0
mfmz
Top achievements
Rank 1
answered on 25 Jun 2009, 05:52 AM
Hi,
I want to use this approach for master-detail both. How can I do that?

Thanks
Tags
Grid
Asked by
Antony
Top achievements
Rank 1
Answers by
Antony
Top achievements
Rank 1
Boone
Top achievements
Rank 2
mfmz
Top achievements
Rank 1
Share this question
or