Questions on UI for ASP.NET AJAX Forum

1 answer

148 views

Parent-Child Hierarchy grid from same table

Hi Telerik team,

Currently I am having the parent - child data in the same table in the below format.

My Data...

Id | ParentId |score
2 | 1 | 56
3 | 1 | 98
4 | 2 | 75
5 | 2 | 75
6 | 2 | 99
7 | 5 | 73

Now I want to build the hierarchy grid using that single table. without defining separate detail table for each level

Note that the level is not limited. it can be extended to many level.

I want the grid to be like below

id | score
>1 | 100
>2 | 56
>4 | 75
>5 | 75
>7 | 73
>6 | 99
>3 | 98

Please help how to do this

Thanks

Alex

Grid

answered on 11 Dec 2015

1 answer

189 views

Error on saveTableChanges

Greetings,

I wanted to use the saveTableChanges(tableViews) method for my RadGrids in BatchEdit mode. I have 3 different grids and I want to save their changes in one postback with my own Save button that is external to the grid. The saveBatchChanges function below is fired on save:

function saveBatchChanges() {

var grid1 = $find("<%=RadGridApprovalsequence1.ClientID %>");

var grid2 = $find("<%=RadGridApprovalsequence2.ClientID %>");

var grid3 = $find("<%=RadGridApprovalsequence3.ClientID %>");

var tableView1 = grid1.get_masterTableView();

var tableView2 = grid2.get_masterTableView();

var tableView3 = grid3.get_masterTableView();

var tableViews = [];

tableViews.push(tableView1);

tableViews.push(tableView2);

tableViews.push(tableView3);

var batchManager1 = grid1.get_batchEditingManager();

var batchManager2 = grid2.get_batchEditingManager();

var batchManager3 = grid3.get_batchEditingManager();

var grid1Updated = batchManager1._extractChangesString(tableView1) === "" ? false : true;

var grid2Updated = batchManager2._extractChangesString(tableView2) === "" ? false : true;

var grid3Updated = batchManager3._extractChangesString(tableView3) === "" ? false : true;

// changes in 1 grid (grid 1)

if (grid1Updated == true && grid2Updated == false && grid3Updated == false) {

batchManager1.saveTableChanges(tableViews);

}

// changes in 1 grid (grid 2)

else if (grid2Updated == true && grid1Updated == false && grid3Updated == false) {

batchManager2.saveTableChanges(tableViews);

}

// changes in 1 grid (grid 3)

else if (grid3Updated == true && grid1Updated == false && grid2Updated == false) {

batchManager3.saveTableChanges(tableViews);

}

// changes in 2 grids (grids 1 and 2)

else if (grid1Updated == true && grid2Updated == true && grid3Updated == false) {

batchManager1.saveTableChanges(tableViews); // THIS FAILS!

}

// changes in 2 grids (grids 1 and 3)

else if (grid1Updated == true && grid2Updated == false && grid3Updated == true) {

batchManager1.saveTableChanges(tableViews);

}

// changes in 2 grids (grids 2 and 3)

else if (grid1Updated == false && grid2Updated == true && grid3Updated == true) {

batchManager2.saveTableChanges(tableViews);

}

// changes in all 3 grids

else {

batchManager1.saveTableChanges(tableViews);

}

};

For some reason, if only 1 grid is updated, the batchManager1.saveTableChanges(tableViews) method works, but not when more than 1 grid is updated. In IE I noticed a JavaScript error on the call to saveTableChanges ("Unable to get property 'cell' of undefined or null reference"). It does not do the postback for me and my handler on the server side (RadGridApprovalsequence1_BatchEditCommand) is never triggered. Below is the handler:

protected void RadGridApprovalsequence1_BatchEditCommand(object sender, GridBatchEditingEventArgs e)

{

BatchEditCommand(sender, e);

}

protected void RadGridApprovalsequence2_BatchEditCommand(object sender, Telerik.Web.UI.GridBatchEditingEventArgs e)

{

BatchEditCommand(sender, e);

}

protected void RadGridApprovalsequence3_BatchEditCommand(object sender,Telerik.Web.UI.GridBatchEditingEventArgs e)

{

BatchEditCommand(sender, e);

}

protected void BatchEditCommand(object sender, GridBatchEditingEventArgs e)

{

// Save logic here

}

Here is the one of the grids (the other 2 are similar):


<telerik:RadGrid ID="RadGridApprovalsequence1" ToolTip="Grid 1 Approval Flow" GridLines="None" runat="server"  
PageSize="12" AllowPaging="True" AutoGenerateColumns="False"
OnItemDataBound="RadGridApprovalsequence1_ItemDataBound"
OnItemCommand="RadGridApprovalsequence1_ItemCommand"
AllowAutomaticUpdates="False" AllowAutomaticInserts="False" OnBatchEditCommand="RadGridApprovalsequence1_BatchEditCommand" Width="450px">
    <PagerStyle Mode="NextPrevAndNumeric" />
    <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" CommandItemSettings-AddNewRecordText="Add New Step" DataKeyNames="TaskStageDisplayName,ApprovalStep,SubRole,DaysToApprove"
        AutoGenerateColumns="False"
        EditMode="Batch">
        <BatchEditingSettings EditType="Cell" /> 
        <CommandItemSettings ShowSaveChangesButton="false" ShowCancelChangesButton="false"/>          
        <Columns>
            <telerik:GridTemplateColumn HeaderText="Task Stage" UniqueName="TaskStage" Visible="false">
                <ItemTemplate>
                    <%# DataBinder.Eval(Container.DataItem, "TaskStageDisplayName")%>
                </ItemTemplate>
                <HeaderStyle Font-Bold="True" Font-Names="Arial" Width="150px" />
                <ItemStyle Font-Names="Arial" />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Step" UniqueName="ApprovalStep">
                <ItemTemplate>
                    <%# DataBinder.Eval(Container.DataItem, "ApprovalStep")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ToolTip="Approval Step" Type="Number" Value="1" runat="server" MaxLength="2" NumberFormat-DecimalDigits="0"
                        ID="txtApprovalSteps" Skin="Windows7" Width="30px">
                    </telerik:RadNumericTextBox>
                    <span style="color: Red">
                        <asp:CompareValidator ID="CompareValidator1" runat="server"
                            ControlToValidate="txtApprovalSteps"
                            ErrorMessage="*"
                            Operator="GreaterThanEqual" Type="Integer"
                            ValueToCompare="1"></asp:CompareValidator>
                    </span>
                </EditItemTemplate>
                <HeaderStyle Font-Bold="True" Font-Names="Arial" Width="60px"/>
                <ItemStyle Font-Names="Arial"/>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Approver Role" UniqueName="SubRole">
                <ItemTemplate>
                    <%# DataBinder.Eval(Container.DataItem, "SubRole")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox runat="server" ID="RadComboBoxSubRoles"
                        Width="190px" OnClientDropDownOpening="getGrid1SubRoles" MaxHeight="200px">
                        <ExpandAnimation Type="none" /> 
                        <CollapseAnimation Type="none" /> 
                    </telerik:RadComboBox>
                    <span style="color: Red">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                            ControlToValidate="RadComboBoxSubRoles" ErrorMessage="*Required" runat="server" Display="Dynamic">
                        </asp:RequiredFieldValidator>
                    </span>
                </EditItemTemplate>
                <HeaderStyle Font-Bold="True" Font-Names="Arial" Width="200px" />
                <ItemStyle Font-Names="Arial" />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Days to Approve" UniqueName="DaysToApprove"  DataField="DaysToApprove" DataType="System.Int16">
                <ItemTemplate>
                    <%# DataBinder.Eval(Container.DataItem, "DaysToApprove")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ToolTip="Days To Approve" Type="Number" Value="0" runat="server" MaxLength="2" NumberFormat-DecimalDigits="0"
                        ID="txtDaysToApprove"  Skin="Windows7" Width="30px">
                    </telerik:RadNumericTextBox>
                    <span style="color: Red">
                        <asp:CompareValidator ID="CompareValidator2" runat="server"
                            ControlToValidate="txtDaysToApprove"
                            ErrorMessage=">= 0"
                            Operator="GreaterThanEqual" Type="Integer"
                            ValueToCompare="0"></asp:CompareValidator>  
                    </span>                               
                </EditItemTemplate>
                <HeaderStyle Font-Bold="True" Font-Names="Arial" Width="80px" />
                <ItemStyle Font-Names="Arial" />
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn ConfirmText="Delete this Approval Step?" ConfirmDialogType="RadWindow"
                ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" ImageUrl="~/_layouts/images/DeleteRed20.png"
                UniqueName="DeleteColumn" >
                <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"/>
                <HeaderStyle Width="30px"/>
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
    <FilterMenu EnableImageSprites="False"> </FilterMenu>
</telerik:RadGrid>

Question 1: Does it matter which manager I use to save changes happening in more than 1 grid? Question 2: Is my implementation of the saveTableChanges(tableViews) method correct? If so, why is it not firing my handler while making changes in multiple grids vs. only 1 grid? Thank you so much!

Grid

answered on 11 Dec 2015

18 answers

1.0K+ views

Unable to download file using AsyncPostBackTrigger in RadGrid

Hi all I am using RadGrid in my application, as I want my RadGrid not to refresh I had my RadGrid in an Update Panel as follows

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

<Triggers>

<asp:AsyncPostBackTrigger ControlID="RadGrid1" EventName="ItemCommand" />

<%--<asp:PostBackTrigger ControlID="RadGrid1" />--%>

</Triggers>

<ContentTemplate>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnItemCommand="RadGrid1_ItemCommand"

OnNeedDataSource="RadGrid1_NeedDataSource">

<MasterTableView Width="950" AutoGenerateColumns="false" DataKeyNames="EmpID" GridLines="None"

TableLayout="Auto">

<Columns>

<telerik:GridBoundColumn DataField="EmpID" HeaderText="Emp ID" ReadOnly="true" HeaderStyle-HorizontalAlign="Left"

ItemStyle-HorizontalAlign="Left" UniqueName="EmpID" FilterControlWidth="30px"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" />

<telerik:GridButtonColumn DataTextField="ButtonName" ItemStyle-ForeColor="Blue" CommandName="Generate"

ConfirmTextFields="ButtonName" ConfirmTextFormatString="Would you like to {0} ACH file ?"

ConfirmDialogType="RadWindow" Reorderable="false" UniqueName="ButtonName" ConfirmTitle="ACH File">

</telerik:GridButtonColumn>

<telerik:GridBoundColumn DataField="EmployeeName" HeaderText="Employee Name" ReadOnly="true"

HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" UniqueName="EmployeeName"

FilterControlWidth="60px" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</ContentTemplate>

</asp:UpdatePanel>

When I click on download button I am unable to download the file this is my code in Itemcommand

protected void RadGrid1_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)

{

if (e.CommandName == "Generate")

{

Response.ContentType = "text/plain";

Response.AppendHeader("Content-Disposition", "attachment;filename= errorLog.txt");

Response.AddHeader("content-length", "0");

Response.Flush();

Response.End();

}

Can some one help me how can I work out this using AsyncPostBackTrigger

Grid

answered on 11 Dec 2015

1 answer

205 views

Editor ContentFilters not working as expected

I'm having an issue where, as far as I can tell, the ContentFilters aren't working. For my test content, I'm using:

<p onclick="alert('p-fired')">test text</p>
<script>
alert("fired");
</script>

My editor declaration looks like this:

<telerik:RadEditor runat="server" ID="reNewComment" ContentAreaMode="Div" StripFormattingOnPaste="MSWord,ConvertWordLists,Css"
Width="100%" ToolTip="New Comment" Height="300px" EnableResize="True" AllowScripts="False"
ContentFilters="StripDomEventAttributes,StripCssExpressions,RemoveScripts" EditModes="Design">

Now, my text is reaching the server as:

<p onclick="alert('p-fired')">test text</p>
<script>
alert("fired");
</script>

This is getting saved this way, and when the page is reloaded both events work. Am I declaring my content filters incorrectly? I figured they would strip out the script stuff client side, before reaching the server. Any help is appreciated, thanks.

Editor

answered on 11 Dec 2015

3 answers

215 views

RadUpload in RadGrid has UploadedFiles.Count always 0

I am attempting to upload files to a database via a RadGrid. I have "ajaxified" the RadGrid and I have added a "conditionalPostback" javascript function as recommended in the documentation. The functionality works as expected when I go to my page and the first thing I do is click "Add New Record" on the grid, select a file and insert it. When I click the "Insert" button in the grid, the conditionalPostback function fires and disables Ajax to allow the upload to occur as expected (radUpload.UploadedFiles.Count = 1).

My problem is that our application page has an "Edit" button on it. The idea is that when a user navigates to an "Edit" page all the contents of the page are disabled. The user needs to click the "Edit" button which puts the page in "edit" mode (enables all the controls including the RadGrid that will be used to upload files). Clicking the "Edit" button causes the "conditionalPostback" function to fire. Once the page is in "edit" mode I try to insert a file via the RadGrid and the conditionalPostback does not occur when I click the Insert button (radUpload.UploadedFiles.Count = 0).

Do I somehow need to "reset" the ClientEvents-OnRequestStart event on my RadAjaxManager in this scenario?

Does anyone know what's going wrong here and how to fix this problem?

Below is the aspx code:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="radScriptManager" runat="server" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function conditionalPostback(sender, args) {

alert('conditionalPostback');

var theRegexp = new RegExp("\.RadButtonInsert$", "ig");

if (args.get_eventTarget().match(theRegexp)) {

var upload = $find(window['UploadId']);

if (upload.getFileInputs()[0].value != "") {

args.set_enableAjax(false);

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="radAjaxManager" runat="server" ClientEvents-OnRequestStart="conditionalPostback">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="radGridAttachments">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="radGridAttachments" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="radButtonEdit">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panelToolbar" />

<telerik:AjaxUpdatedControl ControlID="panelContent" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="radButtonSave">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panelToolbar" />

<telerik:AjaxUpdatedControl ControlID="panelContent" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Panel runat="server">

<asp:Panel ID="panelToolbar" runat="server">

<telerik:RadButton ID="radButtonEdit" runat="server" Text="Edit" CausesValidation="false" OnClick="radButtonEdit_Click" />

<telerik:RadButton ID="radButtonSave" runat="server" Text="Save" CausesValidation="true" OnClick="radButtonSave_Click" />

</asp:Panel>

<asp:Panel ID="panelContent" runat="server">

<telerik:RadPanelBar ID="radPanelBarAttachments" runat="server" Width="100%">

<Items>

<telerik:RadPanelItem Text="Attachments" Expanded="true">

<ContentTemplate>

<telerik:RadGrid ID="radGridAttachments" runat="server" AutoGenerateColumns="false" Enabled="false"

OnNeedDataSource="radGridAttachments_NeedDataSource" OnItemDataBound="radGridAttachments_ItemDataBound"

OnInsertCommand="radGridAttachments_InsertCommand" OnDeleteCommand="radGridAttachments_DeleteCommand" OnItemCommand="radGridAttachments_ItemCommand">

<MasterTableView CommandItemDisplay="Top" DataKeyNames="ID">

<CommandItemTemplate>

<telerik:RadButton ID="radButtonAdd" runat="server" Text="Add New Record" CommandName="InitInsert" Visible='<%# !radGridAttachments.MasterTableView.IsItemInserted %>' ButtonType="LinkButton">

</telerik:RadButton>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="ID" HeaderText="ID" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="FileName" DataField="FileName" HeaderText="File Name" ReadOnly="true" />

<telerik:GridTemplateColumn HeaderText="Attachment">

<ItemTemplate>

<asp:LinkButton ID="ViewAttachmentLinkButton" runat="server" CommandName="ViewAttachment">View</asp:LinkButton>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn UniqueName="DeleteColumn" ButtonType="PushButton" Text="Delete" CommandName="Delete" />

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<telerik:RadUpload ID="RadUpload1" runat="server" InitialFileInputsCount="1" MaxFileInputsCount="1" ControlObjectsVisibility="None" />

<telerik:RadButton ID="RadButtonInsert" runat="server"

Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />

<telerik:RadButton ID="RadButtonCancel" runat="server" Text="Cancel" CausesValidation="false" CommandName="Cancel" />

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</asp:Panel>

</form>

</body>

</html>

Here is the code behind for the grid's ItemDataBound event:

protected void radGridAttachments_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridEditableItem && e.Item.IsInEditMode)

{

RadUpload radUpload = (RadUpload)e.Item.FindControl("RadUpload1");

radAjaxManager.ResponseScripts.Add(String.Format("window['UploadId'] = '{0}';", radUpload.ClientID));

}

Upload (Obsolete)

answered on 11 Dec 2015

14 answers

264 views

Adding new row with total of appointments

Hi,

I have a request from a client that I show the total time for each day in week view. This can either be done externally by looping through the appointments and displaying external to the scheduler.

A neater way to do this is to add a row in scheduler and displaying the totals in that row, is this possible?

Thanks,
Daryl

Scheduler

answered on 11 Dec 2015

9 answers

269 views

Combo Problems with JAWS

We have noticed that when using the JAWS screen reader the users cannot properly use the RadComboBox.

Obviously these users do not use a mouse and find then when using the cursor keys (with JAWS running) to navigate through combo boxes it allows you to go down a few entries and then stops doing anything.

Has anyone else experienced this problem?

Regards
ADe

ComboBox

answered on 11 Dec 2015

1 answer

99 views

How to set popupCollision configuration property of Kendo Menu using Asp.Net Mvc HtmlHelper?

The example for Kendo Menu documentation here sets the popupCollision property in Javascript. How can this property be set using Asp.Net MVC HtmlHelpers for Kendo Menu?

Menu

answered on 11 Dec 2015

1 answer

174 views

Hierarchy grid using parent id in the same table

Hi Telerik team,

Currently I am having the parent - child data in the same table in the below format.

My Data...

Id | ParentId |score

2 | 1 | 56

3 | 1 | 98

4 | 2 | 75

5 | 2 | 75

6 | 2 | 99

7 | 5 | 73

Now I want to build the hierarchy grid using that single table. without defining separate detail table for each level

Note that the level is not limited. it can be extended to many level.

I want the grid to be like below

id     | score

>1       | 100

>2      | 56

  >4     | 75

  >5     | 75

    >7 | 73

  >6     | 99

>3       | 98

Please help how to do this

Thanks

Alex

Grid

answered on 11 Dec 2015

1 answer

41 views

Clicking task causes auto-postback to re-load grid

We have a gantt control on a web page that is using a custom provider. Our custom provider handles a project with various project tasks.

When I click on a task in the gantt provider I capture the id of the task via javascript and populate a form (div tag) and display it beneath my gantt control.

The problem I have is that a project could contain hundreds of tasks. If the user wants to select a task and then perhaps edit it and do this over for several other tasks it becomes time consuming. This is because clicking in the task list inside the gantt control causes all the code utilized to build the data for the control to be executed. (postback.. database call.. custom gantt provider dataType conversions.. etc..) Is there any way to prevent a complete regeneration of the gantt control when all I want to do is capture the id of the task selected and populate a <div> with the information about the task?

Thanks!

Julian

Gantt

answered on 11 Dec 2015