Radgrid, RadTextbox

[anna]

Hello.

Attacted File : Res27_aspx.txt, Res27_aspx_cs.txt, Problem.png

I wrote the code as you taught me. 

But, I wrote the code as you taught, But it doesn't work.

I have attached the file in question.

 

Question 1 ) Click the link below.

https://www.telerik.com/forums/in-radgrid-backcolor-of-selected-cell#1550610

I wrote the code as you taught me.
However, if I write the code as you taught, it doesn't work.
Please check the attached files Res27.aspx and Res27.aspx.cs to see what the problem is.
In Res27.aspx, The code below is written.
html body .RadGrid .pinkCell{
        background-image:none;
        background-color: lightpink;
    }
In Res27.aspx.cs, The code below is written.
item.CssClass = "pinkCell";

 

Question 2) Click the link below.

https://www.telerik.com/forums/radgrid#1552730

Please check the attached file (Res27.aspx, Res27.aspx.cs)

setTimeout(function() {  sender.get_masterTableView().fireCommand("cellSelected", output);})

In Attached file Res27.aspx, There is function cellSelected(sender, args).

In Attached file Res27.aspx.cs , There is if (e.CommandName == "cellSelected").

Please check the attached file Res27.aspx , Res27.aspx.cs.

 

Question 3) Click the link below.

https://www.telerik.com/forums/gap-between-radgrid-and-radtextbox#1553328

There is a gap between the Radgrid and RadTextbox.

I want there to be no gap between the grid and the box.

In Attached file Res27.aspx , There is 

<telerik:GridTemplateColumn DataField="D0_T1" HeaderText="1T"  Visible="true" ColumnGroupName="D0">
                                        <HeaderStyle Width="65px" CssClass="main_column_header2"  HorizontalAlign="Center" VerticalAlign="Middle" Font-Size="11px"/>
                                 <ItemStyle Width="65px"  CssClass="rgAltRow" HorizontalAlign="Center" VerticalAlign="Middle" Height="22px" BackColor="White" />
                                        <ItemTemplate> 
                                            <telerik:RadTextBox ID="D0_T1" runat="server" Text='<%#Bind("D0_T1")%>' MaxLength="4" Style="text-align: center" Width="60px" ></telerik:RadTextBox> 
    </ItemTemplate>
                                    </telerik:GridTemplateColumn>

 

 

Still not resolved.
Telerik is so inconvenient.
keep waiting for an answer.

 

[Attila Antal]

Hello Anna,

Below I will share answers to your questions. Just have in mind that if you have a Forum thread opened for an issue, you should use that thread until the issue is resolved instead of opening new threads for the same problem. That way we can help much better.

 

Question 1

Since the embedded skins and stylesheets apply color to the Table Cell (TD) element, the BackColor will not always work if applied to the item (TR) element. The Cell (TD) will cover it.

So you can either apply the background to the Cell (TD) like this:

foreach (GridDataItem item in gv.Items)
{
    if (item.Cells[2].Text == "합계")
    {

        //item.BackColor = System.Drawing.Color.LightPink;

        foreach (TableCell cell in item.Cells)
        {
            cell.BackColor = System.Drawing.Color.LightPink;
        }

        item.CssClass = "pinkCell";
        break;
    }
}

 

Or use the "pinkCell" CSS class that you have assigned to the item (TR) to target the TD element of those rows with this class.

.RadGrid tr.pinkCell td {
    background-color: pink;
}

 

Question 2

You can test the fireCommand function by Commenting out everything and only calling the fireCommand() method with a simple string.

If this works, then you will need to debug the JavaScript code. Something along the lines does not work.

function cellSelected(sender, args) {
    //var selectedRow = args.get_row();
    //var selectedColumn = args.get_column();
    //var dataItem = args.get_gridDataItem();
    //var tableView = args.get_tableView();
    //var cellIndex = args.get_cellIndexHierarchical();

    //var output = String.format("Row:" + dataItem.get_itemIndexHierarchical() + ",Col:" + selectedColumn.get_uniqueName());

    //alert(output); //<============= I want to delete (alert(output);
                        //However, if I clear alert(output); , gv_ItemConmmand is not called.

    //sender.get_masterTableView().fireCommand("cellSelected", output);

    sender.get_masterTableView().fireCommand("cellSelected", "test"); 
}

 

I can offer to help you debug it, but I will require a Runnable sample project that I can run on my PC.

 

Question 3

The gap that I can see in the screenshot can occur due to multiple reasons. There is either a custom CSS on the page changing the width of the INPUT elements globally, or changing the style inline.

In this case, I see that the width of the TextBox is defined inline.

<telerik:RadTextBox ID="D0_T1" runat="server" Text='<%#Bind("D0_T1")%>' MaxLength="4" Style="text-align: center" Width="60px" ></telerik:RadTextBox> 

 

Remove that styling and the TextBox would then expand to fill the Table's Cell.

 

The embedded Skins/Styles of RadGrid by default do not cause such problems, and if you have written some custom CSS/styles to change the default behavior, you will need to debug which of those styles are breaking the appearance.

For more detail and instructions on debugging the CSS, you can check out the following resources.

To narrow down the issue, I would suggest inspecting the HTML elements and the styles applied to them. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

• Inspect the Generated HTML of a Control
• See the Applied Styles

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;
• CSS !important: Don’t Use It. Do This Instead

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

In any case, I would be glad to help if you can share a runnable example with me.

 

Regards,
Attila Antal
Progress Telerik

[anna]

hello

Please answer the questions in the link below.

No reply after two days.

I am waiting for a reply..

Please Help me

https://www.telerik.com/forums/radlistbox-i-want-to-insert-just-below-the-selected-index-in-radlistbox1

[anna]

The gap that I can see in the screenshot can occur due to multiple reasons. There is either a custom CSS on the page changing the width of the INPUT elements globally, or changing the style inline.

In this case, I see that the width of the TextBox is defined inline.

<telerik:RadTextBox ID="D0_T1" runat="server" Text='<%#Bind("D0_T1")%>' MaxLength="4" Style="text-align: center" Width="60px" ></telerik:RadTextBox> 

 Remove that styling and the TextBox would then expand to fill the Table's Cell.

 

 

====> I didn't understand what you explained.

please explain easily