Questions on UI for ASP.NET AJAX Forum

2 answers

313 views

Batch Edit - Keyboard Navigation with Arrow Keys

I'm now being told by my users that it's imperative to be able to navigate the batch edit using the up and down arrows. Essentially they are looking for the functionality of Excel in a webpage. Up and Down should go to the next or previous row, and left and right should be the same as tab / shift + tab.

Does this functionality exist? And if so how would I activate it?

Thank you.

Grid

answered on 19 Apr 2018

3 answers

1.0K+ views

How to have dropdownlist and textbox inside a radgrid

Hello Guys,

I am new to Telerik Controls and my question is

How do i embed dropdownlist ( Or radcombobox ) and editable text box indise a radgrid ?

Please refer to attachment

( Dropdownlist or radgrid should populate from datasource)

I have already written the logic for edit delete save commands but to display them inside the grid is my doubt

Grid

answered on 19 Apr 2018

2 answers

182 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

147 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

167 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

280 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

803 views

[Solved] 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

401 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

203 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

96 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