Questions on UI for ASP.NET AJAX Forum

2 answers

144 views

radorgchart does not fully render until second execution

I have a page on which a user enters a few search criteria via drop down lists, and then searches for org chart results based on those criteria. I am having a strange issue in which the first time the search button is clicked, the org chart is displayed, but the formatting is wrong, and it's flowing off the screen.

See included screen shots of the first time the search button is clicked, and the second time. Second (and subsequent) search executions all render correctly.

<telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart1" OnDataBound="radOrgChartDataBound" Orientation="Vertical" EnableCollapsing="true" EnableDrillDown="false" EnableDragAndDrop="false" EnableGroupCollapsing="true">

<ItemTemplate>

<asp:Label runat="server" ID="lblEmployee" Text='<%# DataBinder.Eval(Container.DataItem, "Employee") %>' />

<asp:Label runat="server" ID="lblAlternate" Text='<%# DataBinder.Eval(Container.DataItem, "ALternate") %>' />

<asp:HiddenField runat="server" id="hfLead" Value='<%# DataBinder.Eval(Container.DataItem, "TeamLead") %>' />

<strong><%# DataBinder.Eval(Container.DataItem, "Payroll") %></strong>

</ItemTemplate>

<GroupEnabledBinding>

<NodeBindingSettings DataFieldID="ID" DataFieldParentID="ParentID" />

<GroupItemBindingSettings DataFieldID="ID" DataFieldNodeID="NodeID" DataTextField="Employee" />

</GroupEnabledBinding>

<RenderedFields>

<NodeFields>

<telerik:OrgChartRenderedField DataField="Text" Label="" />

</NodeFields>

</RenderedFields>

</telerik:RadOrgChart>

protected void loadOrgChart()

{

try

{

DataTable dtNodes = new DataTable();

DataTable dtItems = new DataTable();

if (cnn.State == ConnectionState.Closed) { cnn.Open(); }

sqlStr = " *** long sql query string here *** ";

SqlCommand cmd = new SqlCommand(sqlStr, cnn);

dtNodes.Load(cmd.ExecuteReader());

cnn.Close();

if (cnn.State == ConnectionState.Closed) { cnn.Open(); }

sqlStr = " *** long sql query string here *** ";

cmd = new SqlCommand(sqlStr, cnn);

dtItems.Load(cmd.ExecuteReader());

cnn.Close();

RadOrgChart1.GroupEnabledBinding.NodeBindingSettings.DataSource = dtNodes;

RadOrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataSource = dtItems;

RadOrgChart1.GroupColumnCount = 1;

for (int i = 0; i < dtNodes.Rows.Count; i++)

{

bool hasParent = false;

string parentID = dtNodes.Rows[i]["ParentID"].ToString();

for (int j = 0; j < dtNodes.Rows.Count; j++)

{

if (dtNodes.Rows[j]["ID"].ToString() == parentID)

{

hasParent = true;

}

if (!hasParent)

{

dtNodes.Rows[i]["ParentID"] = DBNull.Value;

}

RadOrgChart1.DataBind();

}

catch (Exception ex)

{

lblError.Text = ex.ToString();

}

editSection.Visible = true;

upEditarea.Update();

}

protected void radOrgChartDataBound(object sender, EventArgs e)

{

RadOrgChart orgChart = RadOrgChart1;

foreach (OrgChartNode node in orgChart.GetAllNodes())

{

foreach (OrgChartGroupItem item in node.GroupItems)

{

Label lblEmployee = (Label)item.FindControl("lblEmployee");

Label lblAlternate = (Label)item.FindControl("lblAlternate");

HiddenField hfLead = (HiddenField)item.FindControl("hfLead");

if (lblEmployee.Text == "Vacant Position")

{

lblEmployee.ForeColor = System.Drawing.Color.Red;

}

if (hfLead.Value == "True")

{

lblAlternate.Visible = true;

if (lblAlternate.Text == "No Alternate")

{

lblAlternate.ForeColor = System.Drawing.Color.Red;

}

else

{

lblAlternate.Visible = false;

}

int nodeLevel = node.Level;

if (nodeLevel > 0)

{

node.Collapsed = true;

}

I'm new to the radorgchart function and using telerik tools in general, so any advice on where I should be looking for the source of this issue is greatly appriciated.

OrgChart

answered on 19 Apr 2018

2 answers

104 views

Error when loading second grid on a same page

Hi telerik team:

I'm having one issue not being able to find a solution on internet and forum.

I have two grids, the first one is loaded on server side, and the second one I want it to be loaded on client-side.

I use this code, fired on "Edit" of the first grid:
function editPTOP(PTOPlanId) {
$("#dialogPTOP").dialog({
autoOpen: true,
title: "New PTO Plan",
width: "600px",
//position: [350,0],
modal: true
});
updateGrid();
}

function updateGrid() {
var data = [{ "ID": "1", "Rate": "1", "StartYear": "1998", "EndYear": "1999" }, { "ID": "2", "Rate": "2", "StartYear": "2005", "EndYear": "20018" }];
var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
masterTable.set_dataSource(data);
masterTable.dataBind();
}

After I click on "Edit", appears a strange error when the debbuger wants to get_masterTableView():

ScriptResource.axd?d=ZIWSWn7AfUG8H7B191NUVuhgr7Xdz_smdgrZb9SKzD12EnEoJyUju6SX4JZ76NMPNQnLq61DdmGW9saKWN8tyqr7W0klndxIZ4odb1TwK30RJlLRQOeRyKNmtEfetDV-C1YTrbIXaDJtI5D7mUsEqir_Ifu50e5_zNkLMil_FmOCnsAWWY052_vxtv0cMCik0&t=72fc8ae3:237 Uncaught Error: Sys.ArgumentNullException: El valor no puede ser nulo. (value can not be null)
Nombre del parámetro: id

I'm using AjaxControlToolkit. dll version: 3.0.930.0

How can I attach files here? (not a picture, code files)

Thanks a lot,

Diego

Grid

answered on 18 Apr 2018

0 answers

138 views

RadGridView: Show Header when no data

Hi;

I would always like to show Column Head even there is not data. I am using RadGridView.

I tried with ShowColumnHeaders but it doesn't work.

Thanks for help.

Grid

asked on 18 Apr 2018

0 answers

235 views

Import XLS files

Hi.

In your page 'https://demos.telerik.com/aspnet-ajax/spreadsheet/examples/import-export/defaultvb.aspx',

I can't import a xls file.

I export yours example from the page with name 'Workbook.xlsx'. Then I convert this file to 'Workbook.xls'. In this new file I had removed all formats to avoid problems with compatibility. Finally I import file in your page and I export it. I can open this file in excel.

¿Your spreadsheet runs with xls files?

My goal is to export xls files to PDF, either directly or by converting them previously to xlsx files.

Thanks in advance

Spreadsheet

asked on 18 Apr 2018

3 answers

717 views

Export to Excel with filterable columns does not work?

Hello!

Installed products are Telerik UI for ASP.NET + Kendo UI for jQuery. Version R1 2018 (Version number: 2018.1.117)

I'm trying to use embedded Export to Excel function and... possible I'm wrong but it looks like this function does not support columns filtering in the right way.

I have not so simple grid, ny grid has dynamic columns, as we can see below 'columns' - is incoming parameter for grid creation.

You can see my examplebelow (with most important functions)

function createGrid(columns) {

$("#contactsGrid").empty();

var gridElement = $("#contactsGrid");

var pagingIncrement = 20;

var scrollbarWidth = kendo.support.scrollbar();

SetFieldTypesForDefaultColumns(columns);

var gridModel = generateModel(columns);

var gridColumns = generateGridColumns(columns);

gridElement.kendoGrid({

dataSource: {

type: (function () {

if (kendo.data.transports['aspnetmvc-ajax']) {

return 'aspnetmvc-ajax';

} else {

throw new Error('The kendo.aspnetmvc.min.js script is not included.');

}

})(),

transport: {

read: {

url: "contacts/getcontacts",

data: additionalData,

prefix: ""

}

},

requestEnd: function (e) {

if (e.response) {

var rows = e.response.Data;

for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {

convertTimeColumnsToDate(rows[rowIndex]);

}

manageButtonsVisibility(gridColumns.length > 0 && rows && rows.length > 0);

} else {

manageButtonsVisibility(false);

}

},

pageSize: pagingIncrement,

serverPaging: true,

serverSorting: true,

sort: ({ field: "UpdatedDate", dir: "desc" }),

schema: {

model: gridModel,

data: "Data",

total: "Total",

errors: "Errors"

}

},

resizable: true,

pageable: {

refresh: false,

pageSizes: [10, 20, 50, 100],

buttonCount: 20

},

sortable: {

mode: "single",

allowUnsort: false

},

dataBound: function () {

},

columns: gridColumns,

columnMenu: {

sortable: false,

filterable: true,

columns: false,

messages: {

settings: "Filter",

filter: "Apply Filter",

}

},

filterable: {

mode: "menu"

},

reorderable: true,

excel: {

allPages: true,

filterable: true

},

excelExport: function (e) {

e.workbook.fileName = getExcelFileName();

},

messages: {

commands: {

excel: "Export All"

}

},

toolbar: ["excel",

{ template: kendo.template($("#gridColumnsTemplate").html()) }

],

});

createGridTooltips(gridElement.data("kendoGrid")); // standard 'grid.thead.kendoTooltip'

columnMenuManage(gridColumns.length > 0); // just visibility of 'kendoColumnMenu' which hides/shows columns

clearFiltersManage(false); // just visibility of template button which clean all applied columns filters

gridFilterEventHandler(); // the same but when filter is applied

gridColumnFilterInit(); // some additions for my fields of types date/time/dateTime

}

function generateModel(columns) {

var model = {};

model.id = "ContactID";

var fields = {};

for (var index in columns) {

if (columns[index].Visible) {

var columnName = columns[index].Name;

var typeName = columns[index].FieldTypeName;

if (typeName == "Currency" || typeName == "Number") {

fields[columnName] = { type: "number" };

} else if (typeName == "Boolean") {

fields[columnName] = { type: "boolean" };

} else if (typeName == "Date" || typeName == "Time" || typeName == "Date and Time") {

fields[columnName] = { type: "date" };

} else {

fields[columnName] = { type: "string" };

}

model.fields = fields;

return model;

}

function generateGridColumns(columns) {

var result = []

if (columns.length == 0) return result;

var i = 0;

for (var index in columns) {

if (columns[index].Visible) {

var columnTitle = columns[index].DisplayName;

var columnName = columns[index].Name;

var columnType = columns[index].Type;

var column = {};

column.title = columnTitle;

column.field = columnName;

column.encoded = true;

column.headerAttributes = {

"data-field": columnName,

"data-title": columnTitle

};

if (columns[index].FieldTypeName === "Date")

{

column.format = "{0:dd/MM/yyyy}";

column.filterable = {

ui: function (element) {

element.kendoDatePicker({

format: "dd/MM/yyyy",

parseFormats: [ "dd/MM/yyyy", "ddMMyyyy", "dd MM yyyy" ]

});

}

};

}

if (columns[index].FieldTypeName === "Date and Time") {

column.format = "{0:dd/MM/yyyy HH:mm}";

column.filterable = {

ui: function (element) {

element.kendoDateTimePicker({

format: "dd/MM/yyyy HH:mm",

parseFormats: [ "dd/MM/yyyy", "ddMMyyyy", "dd MM yyyy" ]

});

}

};

}

if (columns[index].FieldTypeName === "Time")

{

column.format = "{0:HH:mm}";

column.filterable = {

ui: function (element) {

element.kendoTimePicker({

format: "HH:mm",

parseFormats: [ "HH:mm", "HHmm", "HH mm" ]

});

}

};

}

if (columns[index].FieldTypeName === "Currency") {

column.format = "{0:n2}";

}

if (columns[index].FieldTypeName === "Number") {

column.format = "{0:n0}";

}

if (columns[index].FieldTypeName === "Boolean") {

var boolTmpl = function (dataItem) {

var val = dataItem[this.column];

var isEmpty = val === undefined || val === null || val === "";

return isEmpty ? "" : dataItem[this.column] ? "True" : "False";

}.bind({ column: columns[index].Name });

column.template = boolTmpl;

}

column.width = 125;

result[i++] = column;

}

var column = {};

column.title = "";

// 'actions' column there on the last position

result[i] = column

return result;

}

And when I have grid data and trying to apply just some simple filter, for example - by simple text field 'Surname', grid filters my records and this is absolutly Ok.

But when I press 'Export All' button - generated file is not correct. It generates either just only header or quite 'random' result, but not the correct one ... which is presented on UI.

Can you suggest something?

ps I've attached 2 images to do my question more clear.

1st: if I play with columns visibility and try to export -> all is ok

2nd: if I play with column filter and try to export -> unexpected result

General Discussions

answered on 18 Apr 2018

6 answers

352 views

Problem with "show" method

Hi,

am using telerik notification for client-side validation. i have a rad button in my aspx page like this:

<telerik:RadButton ID="testButton" runat="server" Text="Click Me!" OnClientClicking="ValidateJScript();"></telerik:RadButton>

and a telerik notification like this:

<telerik:radnotification id="notification" runat="server"> </telerik:radnotification>

i'm trying to validate my fields one by one in a JScript file. but for simplicity let's say i just want to display "Hello World" in the telerik notification using the "ValidateJScript()" Java Script function like this:

function ValidateJScript() {

var notification = $find( '<%=RadNotification.ClientID %>');

var message = 'Hello World';

notification.text = message;

alert(notification.text);

notification.show();

first problem i encountered was that "set_text" method didn't work, and so i used ".text =" and that worked. Same goes for "set_title".
i made sure that ".text =" worked using the "alert(notification.text); statement. However,"notification.show();" never got executed at all, and i was never able to show the notification at all. moreover, if i add some test alert message after the "notification.show();" statement it never gets executed either. so can anyone help me and tell me how to get the notification to show using javascript in my scenario, and why did the "set_text" and "set_title" methods never worked here? thanks!

Notification

answered on 18 Apr 2018

0 answers

170 views

RadGrid InPlace Update and Insert Cells are empty

I am trying to use the InPlace EditMode to on a small RadGrid. I have the AddNewRecord in the command bar and an Edit link in each column. When I click the Edit link the row opens in edit mode but all of the cell values are blank. I do not want a blank record how can I keep those values to be edited?

<telerik:RadGrid ID="UserGrid" runat="server" RenderMode="Auto"

OnInsertCommand="UserGrid_InsertCommand"

OnUpdateCommand="UserGrid_UpdateCommand"

OnItemDataBound="UserGrid_ItemDataBound"

AllowAutomaticDeletes="false"

AllowAutomaticUpdates="true"

AllowAutomaticInserts="false"

OnNeedDataSource="UserGrid_NeedDataSource"

AutoGenerateColumns="false"

AllowPaging="true">

<MasterTableView AutoGenerateColumns="false"

CommandItemDisplay="Top"

NoDetailRecordsText=" No Users Added"

DataKeyNames="UserID"

Font-Size="Medium"

EditMode="InPlace">

<Columns>

<telerik:GridEditCommandColumn />

<telerik:GridBoundColumn HeaderText="UserId" DataField="UserID" ReadOnly="true" Visible="false"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="Active" HeaderText="Active">

<ItemTemplate>

<asp:Label runat="server" Text ='<%# DataBinder.Eval(Container.DataItem,"Active") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<asp:CheckBox runat="server" ID="chkActive" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Role" HeaderText="Role">

<ItemTemplate>

<asp:Label runat="server" Text ='<%# DataBinder.Eval(Container.DataItem,"Role") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<asp:DropDownList runat="server" ID="ddlRoles">

<asp:ListItem Text ="Admin" Value ="Administrator"></asp:ListItem>

<asp:ListItem Text ="User" Value ="User"></asp:ListItem>

</asp:DropDownList>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="FirstName" HeaderText="First Name">

<ItemTemplate>

<asp:Label runat="server" Text ='<%# DataBinder.Eval(Container.DataItem,"FirstName") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtFirstName"></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="LastName" HeaderText="Last Name">

<ItemTemplate>

<asp:Label runat="server" Text ='<%# DataBinder.Eval(Container.DataItem,"LastName") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtLastName"></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="UserName" HeaderText="User Name">

<ItemTemplate>

<asp:Label runat="server" Text ='<%# DataBinder.Eval(Container.DataItem,"UserName") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtUserName"></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Email" HeaderText="Email">

<ItemTemplate>

<asp:Label runat="server" Text ='<%# DataBinder.Eval(Container.DataItem,"EmailAddress") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtEmail"></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

Grid

asked on 17 Apr 2018

0 answers

76 views

radwindow size after destroyOnClose

I have a radwindow defined with a height and width. The first time I open the window it displays as expected.

Subsequently, it seems to ignore the height and width. If I remove DestroyOnClose, it behaves as expected.

I'm at a loss as to why that would happen.

Window

asked on 17 Apr 2018

4 answers

1.6K+ views

How to set border color from code behind?

Hi All,

I am looking for a way to set the border color of ComboBox from code behind using PreRender handler of the ComboBox. I have tried the following code and it does not work. Can someone please help me with this?

protected void rcbMyCombo_PreRender(object sender, EventArgs e)

{

rcbMyCombo.BorderColor = System.Drawing.Color.Red;

rcbMyCombo.ToolTip = "Error occurred with the data of the control.";

}

Regards,
Prasad

ComboBox

answered on 17 Apr 2018

1 answer

104 views

How do I render a control in a group header?

I have an chart (sparkline) I am trying to render into a group header.

I have no problems accessing the group header and pushing text to it, but have no idea how to render a control and reading through all the documentation I haven't found out how to do it.

Simple rendering of text example:

RadGrid1.MasterTableView.ColumnGroups.FindGroupByName("TrendChartHeader").HeaderText = "Hello World.";

Thanks for any assistance anyone can provide.

~T

Grid