Questions on UI for ASP.NET AJAX Forum

1 answer

367 views

RadGrid Model Binding for Custom Edit Forms

Hi,

Trying to gather some info on how to bind the model to a RadGrid when in Edit mode for a dropdown list (or even a RadDropDownList).

I have the following markup:

<telerik:RadGrid ID="rgTest" runat="server"

AutoGenerateColumns="false"

AllowPaging="true"

AllowSorting="true"

ClientSettings-EnableRowHoverStyle="true"

OnItemCommand="rgTest_ItemCommand"

OnDeleteCommand="rgTest_DeleteCommand"

OnItemDataBound="rgTest_ItemDataBound"

PageSize="10" >

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView AutoGenerateColumns="false"

DataKeyNames="Id"

SelectMethod="GetData"

UpdateMethod="UpdateData"

ItemType="Model.TestData"

CommandItemDisplay="Top">

<CommandItemSettings ShowAddNewRecordButton="false" />

<Columns>

<telerik:GridButtonColumn

UniqueName="EditItem"

CommandName="Edit"

ItemStyle-Width="40"

ItemStyle-HorizontalAlign="Center"

ItemStyle-ForeColor="White"

Text="Edit"

ButtonType="LinkButton"

ButtonCssClass="btn btn-primary btn-sm">

</telerik:GridButtonColumn>

<telerik:GridTemplateColumn UniqueName="Id" HeaderText="ID">

<ItemTemplate>

<asp:Label ID="lblID" runat="server" Text='<%# Item.Id %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="TestTitle" HeaderText="Title">

<ItemTemplate>

<asp:Label ID="lblTestTitle" runat="server" Text='<%# Item.TestTitle %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="TestType" HeaderText="Type">

<ItemTemplate>

<asp:Label ID="lblTestType" runat="server" Text='<%# Item.TestType %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<FormStyle />

<FormTemplate>

<label for="txtTestTitle" class="col-md-4 control-label">Title</label>

<asp:TextBox ID="txtTestTitle" runat="server" ClientIDMode="Static" Text='<%# BindItem.TestTitle %>' CssClass="form-control" autocomplete="off"></asp:TextBox>

<label for="ddlType" class="col-md-4 control-label">Type</label>

<asp:DropDownList ID="ddlType" runat="server" Width="100%" CssClass="form-control" >

</asp:DropDownList>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

My code behind as follows:

public IQueryable<Model.TestData> GetData()

{

DbContext ctx = new DbContext();

return (from c in ctx.TestData

select c).OrderBy(a => a.Id);

}

public void UpdateWebProjectRequest(int Id)

{

using(DbContext ctx = new DbContext())

{

Model.TestData td = ctx.TestData.Where(a => a.Id == Id).FirstOrDefault();

TryUpdateModel(td);

if (ModelState.IsValid)

{

ctx.SaveChanges();

}

protected void rgTest_ItemDataBound(object sender, GridItemEventArgs e)

{

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

{

GridEditableItem editItem = (GridEditableItem)e.Item;

// Populate the DropdownList here.

DropDownList ddlType = (DropDownList) editItem.FindControl("ddlType");

// Some method here to load the dropdownlist.

var list = new List<Models.TestTypes>();

ddlType.DataSource = lst;

ddlType.DataValueField = "TypeId";

ddlType.DataTextField = "TypeName";

ddlType.DataBind();

ddlType.SelectedValue = DataBinder.Eval(editItem.DataItem, "TestType").ToString();

}

The issue I am having is that when I changed the value in the dropdownlist and invoke an update command, the new value selected on the dropdownlist is not being propagated to the model, hence, the correct data is not being saved.

I've looked at the article in this link:

http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/custom-edit-forms

But I am not able to figure out how to bind the dropdownlist value properly.

Any suggestions or ideas would be appreciated.

Thanks.

~A

Grid

answered on 08 Jul 2016

3 answers

171 views

TreeList TemplateColumn RadioButtons

Three questions:

1) How do I set a group of radio buttons to allow only one to be checked at a time without checking and unchecking them in codebehind?

2) How do I set a different checked and unchecked image for each radiobutton? i.e. radiobutton1 checked image=image1_Color, radiobutton1 unchecked image=image1_BlackWhite, radiobutton2 checked image=image2_Color, radiobutton2 unchecked image=image2_BlackWhite, etc.

3) When a user clicks above radiobutton in TreeList Template Column (I assume this is the proper column for this type of control...???) how would I capture that click/toggle event to update a value in my sql?

I attached a mock-up of what I am trying to accomplish.

TreeList

answered on 08 Jul 2016

4 answers

130 views

RadGrid Drag and Drop to Multiple Divs

I need some help please..

Example..

I have a grid with data and I need to have the ability to drag that data to 3 different folders [Keep] - [Delete] - [Hold]

I have looked at the Radgrid drag and drop Demo.. I noticed that the javascript has a lot of stuff hardcoded, so how would I be able to use the sample code to accomplish the task above?

Thanks

Ajax

answered on 08 Jul 2016

1 answer

89 views

Update AjaxPanel content only

Hi, in my default.aspx I have 4 tabs (jquery).

Each tabs contains a user control.

In this user control I have an ajaxpanel with a rad grid, some filters and a button.

How can I update only the ajaxpanel? With the following code it always pass through the default.aspx Page_load

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="SubmitButton">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="AlarmHistoryRadGrid" LoadingPanelID="RadAjaxLoadingPanelMain" />

<telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

thank you

AjaxPanel

answered on 08 Jul 2016

3 answers

622 views

Soft hyphens in HTML mode are invisible

Steps to reproduce:

1. Go to http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx;

2. Select the HTML view mode;

3. Add the (soft hyphen- ) symbol in the text;

4. Select the Design mode;

5. Select the HTML view mode;

Actual result:  is not displayed.

Expected result:  is present and displayed.

Editor

answered on 08 Jul 2016

0 answers

106 views

ProgressArea will not get updated from WebMethod

I seem to have problems using a RadProgressArea together with a webservice method called from client side.

If I on the other hand use a code behind function as the way of updating the progress, the updating of the progress works.
Why?
I will start with describing the working approach with code behind and then the client side calling a webservice approach.

Working setup
In the webpage, I have a telerik:RadProgressArea and a RadProgressManager:

<telerik:RadProgressArea ID="progressArea"

ProgressIndicators="TotalProgressBar,TotalProgressPercent" Skin="Metro"

HeaderText="Please wait!" runat="server"/>

<telerik:RadProgressManager ID="progressManager" runat="server"/>

I also have an asp:Button like:

OnClick="Button1_Click"

In that code behind eventhandler I perform a lot of work. It has a loop where it performs some tasks. Before the loop, I have this code:

var progress = RadProgressContext.Current;

var num = 0;

var maxnum = tasks.Count();

progress.PrimaryPercent = 0;

progress.PrimaryValue = 0;

progress.PrimaryTotal = maxnum;

After every task, in other words in the end of the loop, I update PrimaryPercent and PrimaryValue like:

num++;

progress.PrimaryPercent = num * 100 / maxnum;

progress.PrimaryValue = num; <br>

and after that loop, the eventhandler ends with

rapMain.ResponseScripts.Add("CloseWindow()");

and that javascript function closes the window.
This setup works, the progressbar gets updated as it should.

Here is the a response to Telerik.RadUploadProgressHandler.ashx?RadUrid=22b0e25c-69c9-4be7-8d7e-33b818854f35&RadUploadTimeStamp=1467900709164&:

var rawProgressData = {InProgress:true,ProgressCounters:true,PrimaryPercent:'81',

PrimaryValue:'111',PrimaryTotal:'136'};

The non working setup (using a WebService)
I have an aspx file with an identical setup as in the working case.

I call the web method with javascript:

var progressBar = $find(progressAreaId);

progressBar.show();

var pm = getRadProgressManager();

pm.startProgressPolling();

$.ajax({

type: "POST",

url: "Foobar.asmx/Methodname",

data: {id:2343},

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(msg)

{

progressBar.hide();

alert("done!");

}

}); <br>

(If I do not call pm.startProgressPolling, the ashx will not be called frequently to get the progress values).

The web method looks like this:

[WebMethod(EnableSession = true)]

public bool MethodName(int id)

{

var progress = RadProgressContext.Current;

/* some code that retrieves an array of tasks */

var maxnum = tasks.Count;

progress.PrimaryPercent = 0;

progress.PrimaryValue = 0;

progress.PrimaryTotal = maxnum;

foreach (var task in tasks)

{

/* code that performs task */

result++;

progress.PrimaryPercent = result * 100 / maxnum;

progress.PrimaryValue = result;

}

return true;

}

It seems like RadProgressContext.Current contains the expected data. If I manipulate RadProgressContext.Current.CurrentOperationText in the code behind (in Page_Load), the web service will be able to read that string.

However, the progress will never be updated and then the web service method has run, the progressbar will dissapear as it should.

The polling will not get the expected data but say that InProgress is false.

Here is the a response to Telerik.RadUploadProgressHandler.ashx?RadUrid=a1dcfc89-bd8c-43d3-b88f-718890d7fc04&RadUploadTimeStamp=1467898578437&:

var rawProgressData = {InProgress:false,ProgressCounters:false};

This is a copy of a stackoverflow posting at http://stackoverflow.com/questions/38248183/progressarea-will-not-get-updated-from-webmethod

ProgressArea

asked on 08 Jul 2016

2 answers

142 views

Disable column drag/drop targets

We have several locked columns in one of our grids which we would like to disable as drag targets. Anybody know how to do that?

Grid

answered on 07 Jul 2016

2 answers

200 views

Can't remove token of an AutoCompleteBox

Hello,

I can't remove token from their autocompletebox,when the token is too long (see the picture attached).

Here is my code :

<telerik:RadAutoCompleteBox runat="server" ID="radAutoCompleteBoxSelectionSite"
DropDownAutoWidth="Enabled" Filter="Contains" Visible="True" CausesValidation="False" AutoPostBack="True"
Width="100%" EmptyMessage="<%$ Resources:Language, SelectSite%>" InputType="Token"
OnEntryAdded="radAutoCompleteBoxSelectionSite_EntryAdded" TextSettings-SelectionMode="Single" OnClientLoad="onLoadAutoComplete" MinimumPrefixLength="0" >
</telerik:RadAutoCompleteBox>

And here is my script :

</script>

I would like to stay in token mode and not in text mode. They still can delete the element with the keyboard but it's not enought clear. Is there any solution ?

Thanks

AutoCompleteBox

answered on 07 Jul 2016

6 answers

366 views

Save Button

How do I use my own save button vs the save in the toolbar? The save button in the toolbar works perfectly but does not fit the theme of our application as we have save button on all other areas and want to make this one the same. The toolbar save button can remain there too.

ImageEditor

answered on 07 Jul 2016

3 answers

279 views

Preventing Postback If No File is Selected

I think I'm doing something wrong here. I have a RadAsyncUpload control and a submit button on the page to cause the postback. All I want to do is prevent the postback if no file has been selected, or have the submit button disabled until a file is selected. If it makes any difference this is all inside of a RadWindow.

Here's the markup for the RadAsyncUpload

<div class="formRow" id="divAttachFile" runat="server" style="height: 60px;">

<div class="floatLeft">

<label for="asyncFlUpldAttachment"><span id="spnUploadFileMark" runat="server" class="validator">*</span> Upload File: </label>

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MaxFileSize='<%$ AppSettings:MAXATTCHFILESIZE %>'

MultipleFileSelection="Disabled" MaxFileInputsCount="1" AllowedFileExtensions='<%$ AppSettings:ATTCHFILEEXTNS %>'

EnableInlineProgress="true" TemporaryFileExpiration="36000"

OnClientValidationFailed="validationFailed"

OnClientFileUploading="fileUploading"

OnClientFileUploadFailed="fileUploadFailed"

PostbackTriggers="lnkBtnAttachmentCancel"

TabIndex="100">

</telerik:RadAsyncUpload>

<span id="ErrorHolder" style="display: none" class="validator"></span>

</div>

Here's the current JavaSrcipts, pretty much straight from your samples

<script type="text/javascript">

var pageIsValid = true;

function validationFailed(sender, args) {

$("#ErrorHolder").show();

var fileExtention = args.get_fileName().substring(args.get_fileName().lastIndexOf('.') + 1, args.get_fileName().length);

if (args.get_fileName().lastIndexOf('.') != -1) {//this checks if the extension is correct

if (sender.get_allowedFileExtensions().indexOf(fileExtention) == -1) {

$("#ErrorHolder").html("Wrong Extension! Verify file.");

}

else {

$("#ErrorHolder").html("The file size exceeds the limit");

}

else {

$("#ErrorHolder").html("Wrong Extension! Verify file");

}

sender.deleteFileInputAt(0);

}

function fileUploading(sender, args) {

$("#ErrorHolder").hide();

}

function fileUploadFailed(sender, args) {

$("#ErrorHolder").show();

$("#ErrorHolder").html("File upload failed for:" + args.get_fileName());

sender.deleteFileInputAt(0);

}

</script>

Thanks

Rodney

AsyncUpload

answered on 07 Jul 2016