Telerik Forums
UI for ASP.NET AJAX Forum
1 answer
99 views
I have tried to copy this demo you have
http://demos.telerik.com/aspnet-ajax/tooltip/examples/clientsideapi/defaultcs.aspx?#qsf-demo-source
however when I click on the submit button, the tooltip doesn't show. If I click 5 or 6 times it will show up, then go away when I click again.Not sure if this is a postback issue or not but if so, why is it not an issue in the demo?
Marin Bratanov
Telerik team
 answered on 27 Oct 2014
2 answers
108 views
I have a grid with a textbox and a ClientSelectColumn. I would like to copy the value from one column into the textbox in an itemTemplate column when the selectcolum checkbox is checked. I would like to do this client-side as posting back and using server-side code can take as much as 2 seconds - unacceptable for high-volume data entry.

I would also like to do this for all columns when the checkbox in the header is checked.

TotalAmt would be copied into AmtApproved. I also need to be able to deselect and have the value clear if it exists in the textbox.

Thank you in advance for your help!

 <telerik:GridBoundColumn DataField="TotalAmt" DataType="System.Decimal" FilterControlAltText="Filter TotalAmt column" HeaderText="TotalAmt" SortExpression="Total Due" UniqueName="TotalAmt" DataFormatString="{0:F}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="75px" HeaderStyle-Width="75px">
                                </telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Amount Approved" UniqueName="AmtApproved" HeaderStyle-Width="55px" ItemStyle-Width="55px" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
                                    <ItemTemplate>
                                        <asp:TextBox ID="AmountApproved" runat="server" Width="55px" OnTextChanged="AmountApproved_TextChanged" AutoPostBack="true" CssClass="numericAlign"></asp:TextBox>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridClientSelectColumn HeaderText="Pay in Full" UniqueName="ClientSelectColumn">
                                </telerik:GridClientSelectColumn>
Thomas Derenthal
Top achievements
Rank 1
 answered on 27 Oct 2014
1 answer
53 views
I have a grid (rgVisitors) with a NestedViewTemplate that contains another grid (rgLogs).

The grids are populated using client side webservices.

On the client (javascript) I clear and refresh the main rgVisitors grid data.
Part of that process involves toggling a GridClientSelectColumn column in the rgVisitors grid using MasterTableView.showColumn(colIndex)

This all works fine except that once I have the data; when I expand a rgVisitor row and attempt to populate the NestedView grid (rgLogs) then this rgLogs grid doesn't display across the whole width of the containing Grid (HTML inspection shows it has a colspan=7 )

If I flip the toggle again to hide and then show my GridClientSelectColumn column, then after reloading the main grid (rgVisitors) and attempting to expand the row shows the NestedView grid (rgLogs) data even narrower than last time (HTML inspection shows it has a colspan=4 )

I have attached 2 images that demonstrate this along with the highlighted line of HTML with Colspan that seems to be dynamically changing.

Any ideas? Is it a bug?



Maria Ilieva
Telerik team
 answered on 27 Oct 2014
4 answers
649 views
We're using the free trial to perform a trial run of converting to Telerik since ComponentArt has abandoned their UI Framework product. The most used control in our system is the grid control.  With the ComponentArt grid we bind it to a DataView and everything is passed once to the client where it's formatted, paginated, searchable, etc.  There is no AJAXing of data or postbacks - the data can be navigated and interacted with on the client side quickly and easily.

The closest I can get with a Telerik grid is pagination and formatting but all interaction with the grid causes a postback and reloading of the data.  Is AJAX simply a requirement of using the Telerik grid or is there a way to get similar functionality where all the data is sent once and then everything happens on the client?  I'd rather not create a bunch of web services since we have close to a 100 unique grids in the app that all work this way.

Sample ComponentArt grid code:
01.<ComponentArt:Grid ID="gdCards" runat="server" EnableViewState="false" PageSize="17" RunningMode="Client">
02.    <Levels>
03.    <ComponentArt:GridLevel
04.        DataKeyField="card_id">
05.        <Columns>
06.            <ComponentArt:GridColumn DataField="card_id" HeadingText="Card ID" Width="60" FixedWidth="true" DefaultSortDirection="Ascending" />
07.                <ComponentArt:GridColumn DataField="card_tp_desc" HeadingText="Card Type" />
08.                <ComponentArt:GridColumn DataField="trk_act_dt" HeadingText="Activate Date" Width="85" FixedWidth="true" FormatString="d" />
09.                <ComponentArt:GridColumn DataField="fname" HeadingText="First Name" />
10.                <ComponentArt:GridColumn DataField="lname" HeadingText="Last name" />
11.                <ComponentArt:GridColumn DataField="amt_left" HeadingText="Amount Left" FixedWidth="true" Width="75" />
12.                <ComponentArt:GridColumn DataField="needs_printed" HeadingText="Print?" FixedWidth="true" Width="50" ColumnType="CheckBox" />
13.                <ComponentArt:GridColumn DataField="card_num" HeadingText="Card #" FixedWidth="true" Width="100" />
14.            </Columns>
15.        </ComponentArt:GridLevel>
16.    </Levels>
17.</ComponentArt:Grid>
ComponentArt grid data binding:
1.gdCards.DataSource = tblCards.DefaultView;
2.gdCards.DataBind();

Telerik grid trial implementation:
01.<telerik:RadGrid ID="rgCards" runat="server" PageSize="17" AllowPaging="true">
02.    <MasterTableView AutoGenerateColumns="false" DataKeyNames="card_id">
03.        <Columns>
04.            <telerik:GridBoundColumn DataField="card_id" HeaderText="Card ID" HeaderStyle-Width="60"></telerik:GridBoundColumn>
05.            <telerik:GridBoundColumn DataField="card_tp_desc" HeaderText="Card Type"></telerik:GridBoundColumn>
06.            <telerik:GridBoundColumn DataField="trk_act_dt" HeaderText="Activate Date" HeaderStyle-Width="85" DataFormatString="{0:d}"></telerik:GridBoundColumn>
07.            <telerik:GridBoundColumn DataField="fname" HeaderText="First Name"></telerik:GridBoundColumn>
08.            <telerik:GridBoundColumn DataField="lname" HeaderText="Last name"></telerik:GridBoundColumn>
09.            <telerik:GridBoundColumn DataField="amt_left" HeaderText="Amount Left" HeaderStyle-Width="75" DataFormatString="{0:c}"></telerik:GridBoundColumn>
10.            <telerik:GridCheckBoxColumn DataField="needs_printed" HeaderText="Print?" HeaderStyle-Width="50"></telerik:GridCheckBoxColumn>
11.            <telerik:GridBoundColumn DataField="card_num" HeaderText="Card #" HeaderStyle-Width="100"></telerik:GridBoundColumn>
12.        </Columns>
13.    </MasterTableView>
14.</telerik:RadGrid>
Telerik grid data binding:
1.rgCards.DataSource = tblCards.DefaultView;
2.rgCards.DataBind();

Thanks in advance for your help.  Also, sorry if this information is somewhere else in the forums - I did several searches but nothing seemed relevant.
Konstantin Dikov
Telerik team
 answered on 27 Oct 2014
3 answers
336 views
Hello Sir,

Please provide me Help .

I want to call  function RowClick(sender, eventArgs) on Simple Link Buttton  not  to call <ClientEventsOnRowClick="RowClick" OnRowDblClick="RowDblClick"  OnGridCreated="GridCreated" OnCommand="GridCommand"   />


My code is details on   below.
  <script type="text/javascript">
        <!--
            var hasChanges, inputs, dropdowns, editedRow;

            function RowClick(sender, eventArgs) {

               
                 var a;
                var aa;
                var gridElement = sender.get_element();
                
                inputs = gridElement.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    var lowerType = inputs[i].type.toLowerCase();
                    if (lowerType == "text") {
                        a = inputs[i].id
                        aa = document.getElementById(a).value;
                    }

                }
                // alert("awanish");
                if (editedRow && hasChanges) {
                    alert('a');
                    hasChanges = false;
                    if (confirm("Update changes?")) {

                        PageMethods.fneditData(a, aa, editedRow, OnGetMessageSuccess, OnGetMessageFailure);
                        $find("<%= grdT101.MasterTableView.ClientID %>").updateItem(editedRow);
                    }
                }
            }
            function GetMessage() {

                PageMethods.Message(OnGetMessageSuccess, OnGetMessageFailure);

            }
            function OnGetMessageSuccess(result, userContext, methodName) {
                window.location = window.location;
                //////                
            }

            function OnGetMessageFailure(error, userContext, methodName) {

                alert(error.get_message());

            }
            function RowDblClick(sender, eventArgs) {
                editedRow = eventArgs.get_itemIndexHierarchical();
                $find("<%= grdT101.MasterTableView.ClientID %>").editItem(editedRow);
            }

            function GridCommand(sender, args) {
                if (args.get_commandName() != "Edit") {
                    editedRow = null;
                }
            }

            function GridCreated(sender, eventArgs) {
                var gridElement = sender.get_element();
                var elementsToUse = [];
                inputs = gridElement.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    var lowerType = inputs[i].type.toLowerCase();
                    if (lowerType == "hidden" || lowerType == "button") {
                        continue;
                    }

                    Array.add(elementsToUse, inputs[i]);
                    inputs[i].onchange = TrackChanges;
                }

                dropdowns = gridElement.getElementsByTagName("select");
                for (var i = 0; i < dropdowns.length; i++) {
                    dropdowns[i].onchange = TrackChanges;
                }

                //setTimeout(function() { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);
            }

            function TrackChanges(e) {
                hasChanges = true;
            }
     -->    
    </script>

<telerik:RadGrid runat="server" ID="grdT101"  Skin="Office2007"
            AutoGenerateColumns="false"   OnRowDrop="grdPendingOrders_RowDrop"
              AllowPaging="True"   AllowMultiRowSelection="true" BorderWidth="0"
            Width="100%"  PageSize="30" EnableHeaderContextMenu="true"  
            GridLines="Both"  onitemcommand="grdT101_ItemCommand" AllowAutomaticUpdates="True" >
                <%--<ItemStyle BackColor="#ffffff" />
                <HeaderStyle BackColor="#ffffff" />--%>                
                <MasterTableView DataKeyNames="T101_ID"  EditMode="InPlace" Width="100%"  >
                    <Columns>
                        <%--<telerik:GridBoundColumn HeaderText="ID"  ReadOnly="True" DataField="T201_ID" HeaderStyle-Width="3%"  />--%>
                        <telerik:GridTemplateColumn HeaderStyle-Width="3%" HeaderText="ID" HeaderStyle-Font-Bold="true" >

<ItemTemplate>

<%#Container.ItemIndex+1 %>

</ItemTemplate>

</telerik:GridTemplateColumn>

                        <telerik:GridBoundColumn  HeaderText="Act Exp(T101 - C101A)" DataField="C101A" HeaderStyle-Font-Bold="true" HeaderStyle-Width="94%"  ItemStyle-Width="94%" UniqueName="C101A" />
<telerik:GridTemplateColumn HeaderStyle-Width="3%">
<ItemTemplate>
<asp:LinkButton ID="cxc" runat="server" CommandArgument='<%#Eval("T101_ID") %>' CommandName="DeleteRow"  OnClientClick="if(!confirm('Are you sure to delete this record ?'))return false;" ><img src="../../images/delete.gif" /></asp:LinkButton>
  <asp:LinkButton ID="lnkbutton" runat="server" Text="LinkButton" CommandName="RowClick"></asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>

</Columns>
<CommandItemTemplate>
<asp:TextBox ID="txtC101A" runat="server"></asp:TextBox>
</CommandItemTemplate>
 </MasterTableView>
                <ClientSettings  AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                    <Resizing AllowColumnResize="true" />
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"/>
                    <ClientEvents OnRowDropping="onRowDropping" OnRowClick="RowClick" OnRowDblClick="RowDblClick"
                    OnGridCreated="GridCreated" OnCommand="GridCommand"   />
                    <Scrolling  UseStaticHeaders="true"/>                   
                </ClientSettings>
                <PagerStyle Mode="NumericPages" PageButtonCount="4" />
            </telerik:RadGrid>


Please Provide help It is very-2 urgent

Your support will be highly appreciated.

Thank You,
Eyup
Telerik team
 answered on 27 Oct 2014
1 answer
77 views
Hi!
Is there a way to obtain the menu dynamic with the property "RenderMode = auto" on the window resize event and not only on the loading of the page?
Thank you!
Hristo Valyavicharski
Telerik team
 answered on 27 Oct 2014
1 answer
137 views
hi,

I have a project with a page that contains 2 radgrids.
in code behind I open a radwindow that does an update on a row in one grid, and changes the status, so that it appears in the other grid.

this is the code for opening the window


RadWindow ConfirmWindow = new RadWindow();
<
br>ConfirmWindow.NavigateUrl = "HolidayApproveDecline.aspx?Type=" + ((Byte)Type).ToString() + "&IDs=" + IDBuilder.ToString();<br>ConfirmWindow.Width = 450;
<
br>            ConfirmWindow.Height = 430;
<
br>            ConfirmWindow.ID = "wndUserAddHoliday";
<
br>            ConfirmWindow.VisibleOnPageLoad = true;
<
br>            ConfirmWindow.OnClientClose = "RefreshGrid";
<
br>            ConfirmWindow.VisibleStatusbar = false;
<
br>            ConfirmWindow.IconUrl = "../Images/address_book.png";
<
br>            ConfirmWindow.Title = "Bevestigen";
<br>            WindowBehaviors Behaviors = new WindowBehaviors();
<
br>            Behaviors |= WindowBehaviors.Close;
<
br>            ConfirmWindow.Behaviors = Behaviors;<br>
<
br>            ConfirmWindow.Modal = true;<br>            RadWindowManager MasterWindowManager = (RadWindowManager)this.Master.FindControl("MasterWindowManager");<br>            MasterWindowManager.Windows.Add(ConfirmWindow);


Now, upon returning he fires the clientside Refresh function which contains following code:

  <telerik:RadCodeBlock ID="Block2" runat="server">
        <script type="text/javascript">
            function RefreshGrid() {

                var grdGeneralOverview = $find("<%= grdGeneralOverview.ClientID %>").get_masterTableView();
                grdGeneralOverview.rebind();

                var grdApproveDecline = $find("<%= grdApproveDecline.ClientID %>").get_masterTableView();
                grdApproveDecline.rebind();
      </script>
    </telerik:RadCodeBlock>

The OnNeedDatasource functions for both grids in code behind are fired, and the datasources contain the updated data for both grids.

However, and this is the catch, on the screen only the second grid is updated (grdApproveDecline 
)
if I switch the 2 rebinds around, the other gets updated on screen.

Does anyone know why this happens?




Eyup
Telerik team
 answered on 27 Oct 2014
1 answer
185 views
I am wondering what the ID field in the Hyperlink Manager does exactly. I tried looking it up and saw that it might have to deal with tracking the number of clicks the hyperlink has had. If that's all the ID field does, is there a way to remove the field from the list there. I would prefer to not have to download the entire EditorDialogues and edit those if there is a way.

http://i.imgur.com/94anKwY.png link to a picture of the hyperlink manager with the ID field visible
Ianko
Telerik team
 answered on 27 Oct 2014
1 answer
96 views
Is there a demo for Drag and Drop Functionality in Master Details Grid. If not not can you provide one. Please

Thanks,
Siva
Konstantin Dikov
Telerik team
 answered on 27 Oct 2014
5 answers
290 views
I want to binding binaryimage from sql server.But it is not show. 

My Insert code
protected void RadGrid1_InsertCommand(object sender, GridCommandEventArgs e)
    {
        GridEditFormInsertItem insertItem = e.Item as GridEditFormInsertItem;
        string name = (insertItem["Name"].FindControl("txbName") as RadTextBox).Text;
        string Cate= (insertItem["IDCate"].FindControl("cboCate") as DropDownList).SelectedValue;
        RadAsyncUpload radAsyncUpload = insertItem["Pic"].FindControl("AsyncUpload1") as RadAsyncUpload;
 
        UploadedFile file = radAsyncUpload.UploadedFiles[0];
        byte[] pic= new byte[file.InputStream.Length];
        file.InputStream.Read(hinh, 0, (int)file.InputStream.Length);
        //file.InputStream.re
        //string hinh = con.ImageToByteArray(b);CONVERT(varbinary(30), @nvarcharParam)
        con.ExecuteSQL("INSERT INTO Hinh(IDCate, Name, Pic) VALUES(" + Cate+ ", N'" + name + "',CONVERT(varbinary(50),'" + pic + "'))");
    }

ASPX file
<telerik:RadGrid runat="server" ID="RadGrid1" AllowPaging="True" AllowSorting="True"
            AutoGenerateColumns="False" ShowStatusBar="True" GridLines="None"
             PageSize="3"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnInsertCommand="RadGrid1_InsertCommand">
            <PagerStyle Mode="NumericPages" AlwaysVisible="true"></PagerStyle>
            <MasterTableView Width="100%" CommandItemDisplay="Top" DataKeyNames="ID">
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton">
                        <HeaderStyle Width="36px"></HeaderStyle>
                    </telerik:GridEditCommandColumn>
                    <telerik:GridTemplateColumn HeaderText="ID" UniqueName="ID" SortExpression="ID" Visible="false">
                        <ItemTemplate>                           
                        </ItemTemplate>
                        <EditItemTemplate>                           
                        </EditItemTemplate>
                        <HeaderStyle Width="30%"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Name" UniqueName="Name" SortExpression="Name">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblName" Text='<%# Eval("Name") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadTextBox runat="server" Width="200px" ID="txbName" Text='<%# Eval("Name") %>'>
                            </telerik:RadTextBox>
                            <asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" ControlToValidate="txbName"
                                ErrorMessage="Please, enter a name!" Display="Dynamic" SetFocusOnError="true"></asp:RequiredFieldValidator>
                        </EditItemTemplate>
                        <HeaderStyle Width="30%"></HeaderStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Cate" UniqueName="IDCate" DataField="IDCate" >
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblCate" Text='<%# Eval("CateName") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate
                            <asp:DropDownList ID="cboCate" runat="server"  Width="200px" DataTextField="Cate" DataValueField="IDCate" DataSource="<%# loadCate() %>" SelectedValue='<%#  Bind("IDCate") %>'  AppendDataBoundItems="True" >
                            <asp:ListItem Selected="True" Text="Select" Value="">
                            </asp:ListItem>
                            </asp:DropDownList>                               
                        </EditItemTemplate>
                        <ItemStyle VerticalAlign="Top"></ItemStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="Pic" HeaderText="Pic" UniqueName="Pic">
                        <ItemTemplate>
                            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#  Eval("Pic") %>'
                                AutoAdjustImageControlSize="false" Height="80px" Width="80px" ToolTip='<%#Eval("Pic", "Photo of {0}") %>'
                                AlternateText='<%#Eval("Pic", "Photo of {0}") %>'></telerik:RadBinaryImage>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" OnClientFileUploaded="OnClientFileUploaded"
                                AllowedFileExtensions="jpg,jpeg,png,gif" MaxFileSize="1048576" OnFileUploaded="AsyncUpload1_FileUploaded">
                            </telerik:RadAsyncUpload>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridButtonColumn Text="Delete" CommandName="Delete" ButtonType="ImageButton">
                        <HeaderStyle Width="36px"></HeaderStyle>
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings>
                    <EditColumn ButtonType="ImageButton">
                    </EditColumn>
                </EditFormSettings>
                <PagerStyle AlwaysVisible="True"></PagerStyle>
            </MasterTableView>
        </telerik:RadGrid>

And my table 
ID : int
IDCate: int
Name: nvarchar(50)
Pic: image (I try varbinary, text but it's not working)

P/S sorry for my english.
Do Xuan
Top achievements
Rank 1
 answered on 27 Oct 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?