[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to set grid column visibility from javascript

Posted on 2011-10-06
12
Medium Priority
?
808 Views
Last Modified: 2012-05-12
Hello all,

 

    I have a grid in which i have few template columns. I would like to set the 2 grid template columns visibility based on the Internet connection.

I am checking the internet connection like this

$(document).ready(function() {
        $("form").submit(function(e) {
            var r = $.ajax({ "url": 'http://www.xxxxxxxxx.com/xxxxx', "async":false }).responseText;
           
            if( r==null ) e.preventDefault();
        })
    })


Here are the controls in the template column.

  <telerik:GridTemplateColumn HeaderText="Time" UniqueName="Time" Visible = "true">
                                                              <ItemTemplate>

 <telerik:RadMaskedTextBox ID="txtTime" runat="server" PromptChar="_" Width="80px" Mask="<0..2><0..9>:<0..5><0..9>">
                            </telerik:RadMaskedTextBox>
                 </ItemTemplate>
                                <ItemStyle Wrap="False" />
                            </telerik:GridTemplateColumn>
                           
                            <telerik:GridTemplateColumn HeaderText="Odometer" UniqueName="Odometer" Visible = "true">
                                <EditItemTemplate>
                                   <asp:TextBox ID="txtOdometer"  runat="server" ToolTip="Odometer" Text='<%# Eval("Odometer") %>' Width="120px"
                                        onkeydown="return CheckKeyCode()" onfocus="this.value = this.value;" >
                                    </asp:TextBox>
                                    <asp:RegularExpressionValidator Display="Dynamic" ID="regOdometer" runat="server"
                                        ErrorMessage="Only Numbers are allowed." ControlToValidate="txtOdometer" ValidationExpression="\d+\.?\d*" /></EditItemTemplate>
                                <ItemTemplate>
                                 <asp:TextBox ID="txtOdom"  runat="server" ToolTip="Odometer" Text='<%# Eval("Odometer") %>' Width="80px"
                                        onkeydown="return CheckKeyCode()" onfocus="this.value = this.value;" >
                                    </asp:TextBox>
                                </ItemTemplate>
                                <ItemStyle Wrap="False" />
                            </telerik:GridTemplateColumn>

I have to set those columns visibilty based on the internet check.. How do i do this?

Appreciate the help

Thanks
0
Comment
Question by:shahjagat
  • 6
  • 4
  • 2
12 Comments
 
LVL 83

Expert Comment

by:CodeCruiser
ID: 36927004
Are you running the script in the same page?
0
 

Author Comment

by:shahjagat
ID: 36927178
Yes, I am running the script in the same page and i would like to show those two template columns only if there is NO internet connection
0
 
LVL 83

Expert Comment

by:CodeCruiser
ID: 36927266
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:shahjagat
ID: 36927322
Thanks for the link and now where do i call that javascript function..
My script is like this

$(document).ready(function() {
        $("form").submit(function(e) {
            var r = $.ajax({ "url": 'http://www.xxxxxxxxx.com/xxxxx', "async":false }).responseText;
                       if( r==null ) e.preventDefault();
        })
    })

if "async": then there is no internet connection..... where should i call that function,,
Any idea?

Thanks
0
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 36927779
This is how you do it jQuery.
$(document).ready(function() {
        $("form").submit(function(e) {
            var r = $.ajax({ "url": 'http://www.xxxxxxxxx.com/xxxxx', "async":false }).responseText;
                       if( r==null ) {
                            e.preventDefault();

                            //Hide the first column header
                            $('th:nth-child(0)').hide();

                            //Hide the first (index 0) column
                            $('td:nth-child(0)').hide();
                       }
        })
    })

Open in new window

0
 

Author Comment

by:shahjagat
ID: 36927827
I have a question in here...
 would the r value be null when there is no internet connection???
0
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 36927890
No I think it would be '' (blank).

FYI, you can't do a async: false on a cross domain ajax call.
0
 

Author Comment

by:shahjagat
ID: 36928004
Ok.If  it is blank then how will the code below executes..?
 if( r==null ) {
                            e.preventDefault();

                            //Hide the first column header
                            $('th:nth-child(0)').hide();

                            //Hide the first (index 0) column
                            $('td:nth-child(0)').hide();
                       }
0
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 36943448
I think making a cross-domain ajax call isn't the way to do it, since you get an error either way.

Try this out:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
    //Load the local copy of jQuery
    document.write(unescape("%3Cscript src='/path/to/your/jquery' type='text/javascript'%3E%3C/script%3E"));

     //Hide the first column header
     $('th:nth-child(0)').hide();

     //Hide the first (index 0) column
     $('td:nth-child(0)').hide();
}
</script>

Basically it loads the CDN copy of jQuery from Google if there is a connection, if there isn't a internet connection it will load a local copy of jQuery and hide your first column.
0
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 36943462
FYI, on the plus side there is some good reasons to using the jQuery provided by Google on their Content Delivery Network (CDN).
http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
0
 

Accepted Solution

by:
shahjagat earned 0 total points
ID: 36951260
I made the columns invisible like this...

function hideColumn()
{
    var grid = $find("<%=RadGrid1.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var rows = MasterTable.get_dataItems();  
             
    var TimeColumn = MasterTable.getColumnByUniqueName("Time");
    MasterTable.hideColumn(TimeColumn.get_element().cellIndex);
   
    var OdometerColumn = MasterTable.getColumnByUniqueName("Odometer");
    MasterTable.hideColumn(OdometerColumn.get_element().cellIndex);
   
}

Appreciate the help
Thanks for the information...

0
 

Author Closing Comment

by:shahjagat
ID: 37035307
Solution works perfect and it 's so simple and Straight forward.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month17 days, 17 hours left to enroll

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question