We Keep Coding

Adding data-* attributes to a DevExpress MVC gridview cell

I have a standard DevExpress MVCxGridView bound to a DataTable, which is just a bunch of boolean values with the first column "SS" being a string code which is the datakey. I loop through all the columns and dynamically create the gridview columns. The grid that is displayed is a bunch of checkboxes which are options that can be configured.
I have a jquery js file that requires the data-* attributes to be set for these cells in order to inject the necessary functionality. I want to know how to add "data-*" attributes to each of the TD cells. "data-ss" being the datakey in the first column, and "data-wm" being the workmode in the column.
My Razor view code is as follows:
#model System.Data.DataTable
#{
var gv = Html.DevExpress().GridView(
settings =>
{
settings.Name = "gv";
settings.Enabled = true;
settings.KeyFieldName = "SS";
settings.CallbackRouteValues = new { Controller = "Test", Action = "DataBindingPartial" };
settings.Settings.HorizontalScrollBarMode = ScrollBarMode.Auto;
settings.Settings.VerticalScrollBarMode = ScrollBarMode.Auto;
settings.Settings.VerticalScrollableHeight = 200;
settings.SettingsPager.Mode = DevExpress.Web.ASPxGridView.GridViewPagerMode.ShowAllRecords;
MVCxGridViewBandColumn currentBand = null;
foreach (System.Data.DataColumn c in Model.Columns)
{
if (c.ColumnName == "SS")
{
DevExpress.Web.ASPxGridView.GridViewColumn column = settings.Columns.Add(c.ColumnName);
column.Caption = "SS";
column.CellStyle.CssClass = "ss_head";
column.HeaderStyle.CssClass = "ss_head_caption";
column.HeaderStyle.Cursor = "pointer";
}
else
{
// Get Column Definition retreives information based on the column name
// definition.ActivityType = "act" if activity or "dg" if DataGathering
// definition.WorkMode = abbreviated name of activity
// definition.Description = long description of activity
var definition =
TestModel.DefinitionColumn.GetColumnDefinition(c.ColumnName);
if (currentBand == null || currentBand.Name != definition.ActivityType)
{
currentBand = settings.Columns.AddBand();
currentBand.Name = definition.ActivityType;
currentBand.Caption = definition.ActivityType == "act" ? "Activity" : "Data Gathering";
currentBand.HeaderStyle.CssClass = String.Format("workmode_col workmode_{0}", definition.ActivityType);
}
DevExpress.Web.ASPxGridView.GridViewColumn column =
currentBand.Columns.Add(c.ColumnName, MVCxGridViewColumnType.CheckBox);
column.Caption = definition.WorkMode;
column.ToolTip = definition.Description;
column.Visible = true;
column.HeaderStyle.Cursor = "pointer";
column.CellStyle.CssClass = String.Format("workmode_{0} workmode_selectable workmode_col", definition.ActivityType);
column.HeaderStyle.CssClass = String.Format("workmode_{0} workmode_col", definition.ActivityType);
column.Width = 35;
}
}
});
var gvBound = gv.Bind(Model);
gvBound.Render();
}
Thank you Mikhail.
Using this I was able to add a settings configuration to set the data-* attributes:
settings.HtmlDataCellPrepared = (sender, e) =>
{
e.Cell.Attributes.Add(
"data-wm",
e.DataColumn.Caption
);
e.Cell.Attributes.Add(
"data-ssco",
e.KeyValue.ToString()
);
};

It is possible to use GridViewSettings.HtmlDataCellPrepared event to assign the required attributes. Check this SO thread.

TreeViewId.SelectedNode.Depth Equivalent in Javasacript

In C# page i am getting TreeViewId.SelectedNode.Depth, while in javascript when i am trying to get depth of same treeView i am not getting the depth.
var treeViewData = window["<%=TreeViewMerchantId.ClientID%>" + "_Data"];
if (document.getElementById(treeViewData).selectedNodeID.value != "")
{
var selectedNode = document.getElementById(treeViewData).selectedNodeID.value;
var text = selectedNode.innerHTML;
var Depth = selectedNode.depth;
var Lable = selectedNode.level;
}

Setting Values of textboxes that were created using Javascript

I had a form in which I made some textboxes using javascript. Basically I gave a button and Onclick of that button I add a Textbox using Javascript.
These values were then taken in a string on the server side and stored in different List columns.
Now I want to create Edit Functionality. So I have to retrieve values from the List COlumns and Insert it in the Textboxes.
This was easy when my controls were server controls but How can I do this for textboxes that were created using Javascript.
I am new to client side scripting. Any help will be appreciated.
All I need is a way to get the values from the List COlumn and then create those textboxes again with those values.
PS: Please advise if you wana see the code for how I have created the textboxes and got those values on the server side.
Thanks!
Javascript Code to create Textboxes:
<script type="text/javascript">
function GetDynamicTextBoxB(value)
{ return '<input name = "DynamicTextBoxB" type="text" value = "' + value + '" />' + '<input type="button" value="Remove" onclick = "RemoveTextBoxB(this)" />' }
var y = 0;
function AddTextBoxB() {
if (y < 10) {
var div = document.createElement('DIV'); div.innerHTML = GetDynamicTextBoxB(""); document.getElementById("TextBoxContainerB").appendChild(div);
}
else {
alert("Only 10 CSPs can be added")
} y++
}
function RemoveTextBoxB(div)
{ document.getElementById("TextBoxContainerB").removeChild(div.parentNode); }
function RecreateDynamicTextboxesB() {
var values = eval('<%#Values%>');
if (values != null) {
var html = ""; for (var i = 0; i < values.length; i++)
{ html += "<div>" + GetDynamicTextBoxB(values[i]) + "</div>"; } document.getElementById("TextBoxContainerB").innerHTML = html;
}
}
$("#tabs-1").ready(RecreateDynamicTextboxesB);
// // window.onload = RecreateDynamicTextboxesB;
</script>
Code Behind to Get these values on the server side and storing in List COlumns
string PartyACSP1 = string.Empty, PartyACSP2 = string.Empty, PartyACSP3 = string.Empty, PartyACSP4 = string.Empty, PartyACSP5 = string.Empty, PartyACSP6 = string.Empty, PartyACSP7 = string.Empty, PartyACSP8 = string.Empty, PartyACSP9 = string.Empty, PartyACSP10 = string.Empty;
if (textboxValues != null)
{
PartyACSP1 = safeGetString(textboxValues, 0);
PartyACSP2 = safeGetString(textboxValues, 1);
PartyACSP3 = safeGetString(textboxValues, 2);
PartyACSP4 = safeGetString(textboxValues, 3);
PartyACSP5 = safeGetString(textboxValues, 4);
PartyACSP6 = safeGetString(textboxValues, 5);
PartyACSP7 = safeGetString(textboxValues, 6);
PartyACSP8 = safeGetString(textboxValues, 7);
PartyACSP9 = safeGetString(textboxValues, 8);
PartyACSP10 = safeGetString(textboxValues, 9);
}
newISDAAgreement[Constants.PartyACSPColumn] = PartyACSP1;
newISDAAgreement[Constants.PartyACSP2Column] = PartyACSP2;
newISDAAgreement[Constants.PartyACSP3Column] = PartyACSP3;
newISDAAgreement[Constants.PartyACSP4Column] = PartyACSP4;
newISDAAgreement[Constants.PartyACSP5Column] = PartyACSP5;
newISDAAgreement[Constants.PartyACSP6Column] = PartyACSP6;
newISDAAgreement[Constants.PartyACSP7Column] = PartyACSP7;
newISDAAgreement[Constants.PartyACSP8Column] = PartyACSP8;
newISDAAgreement[Constants.PartyACSP9Column] = PartyACSP9;
newISDAAgreement[Constants.PartyACSP10Column] = PartyACSP10;

while retrieving data from list column you must have a map of the data for which you want to create an edit functionality. for e.g.
suppose you have the data
listcolumn = {'data1': 123, 'data2': 234, 'data3': 345}
so just you can loop into that data and create the textboxes with its value in it.
for(key in listcolumn){
create a textbox and its value from listcolumn[key] (this will give you the value for that particular textbox)
}
or if are not comfortable with the dictionary thing
you can use the either way i.e. data is list form
listcolumn = [123,234,345]
for(data in listcolumn){
create a textbox and insert value in it.
}
but i would be preffered that you use JSON format from server side to front end
and you can parse the data using JSON.parse(data). And will get the dictionary as an object.

I would suggest to use a different architecture:
knockout.js - for a client-sisde, where you could develop your MVVM,
MVC - as the app type,
Ajax to send the queries to the server side for your ops like Loading,Saving, etc.

How to get the value of the textbox which created dynamically with the Raduploader in code behind?

I use the AsyncUpload
<telerik:RadAsyncUpload runat="server" ID="rada_attach" OnClientFileUploaded="onClientFileUploaded"
MultipleFileSelection="Disabled" InitialFileInputsCount="1" MaxFileInputsCount="1"
Width="100%" />
function onClientFileUploaded(radAsyncUpload, args) {
var row = args.get_row(),
inputName = radAsyncUpload.getAdditionalFieldID("TextBox"),
inputType = "text",
inputID = inputName,
input = createInput(inputType, inputID, inputName),
label = createLabel(inputID),
br = document.createElement("br");
row.appendChild(br);
row.appendChild(input);
row.appendChild(label);
}
function createInput(inputType, inputID, inputName) {
var input = document.createElement("input");
input.setAttribute("type", inputType);
input.setAttribute("id", inputID);
input.setAttribute("name", inputName);
return input;
}
I want to access the textbox (which created dynamically) in .cs.
How to do that ?
The Full Answer :
var $ = $telerik.$;
function onClientFileUploaded(radAsyncUpload, args) {
var $row = $(args.get_row());
var inputName = radAsyncUpload.getID("TextBox");
var inputType = "text";
var inputID = inputName;
var input = createInput(inputType, inputID, inputName);
var label = createLabel(inputID);
$row.append("<br/>");
$row.append(label);
$row.append(input);
}
function createInput(inputType, inputID, inputName) {
var input = '<input type="' + inputType + '" id="' + inputID + '" name="' + inputName + '" />';
return input;
}
function createLabel(forArrt) {
var label = '<label for=' + forArrt + '>info: </label>';
return label;
}
foreach (UploadedFile UF in rada_attach.UploadedFiles)
{
if (UF.GetFieldValue("TextBox") != null)
{
OBJ.File_name = UF.GetFieldValue("TextBox");
}
else
{
OBJ.File_name = UF.GetName();
}

In my opinion documentation is well clear. Check the Description tab on page you refer on. You can access value of dynamic textboxes with code below on postback:
if (rada_attach.UploadedFiles.Count > 0) {
for (var index = 0; index < rada_attach.UploadedFiles.Count; ++index) {
var textBoxValue = rada_attach.UploadedFiles[index].GetFieldValue("TextBox");
}
}
BTW, this scenario is well-dcoumented here: Adding Information to Uploaded Files

You need to check the Request.Form values (that were in the posted form) on postback and perform a check on all the fields that were posted back.
I am guessing that you won't know the name/id of the textbox if it was created on the client-side dynamically? Note that it would be the name of the form field that the Request object in .cs would see.
Only once you have posted back can you access that value in the .cs

How can i set up all the data's in the textbox

first of all there is a searchbox form and a view form. after passing the value of the id in the searchbox, it should return all the values that matches with the id of that person after the textchange method occured. but it doesn't display a single value on the textboxes. here is my code
public void first_tab_search(string key)
{
key = txtSearch.Text;
var first = from a in dbcon.personal_informations where a.last_name == key select a;
foreach (var setThem in first)
{
txtsurname.Text = setThem.last_name;
txtfirstname.Text = setThem.first_name;
txtmiddlename.Text = setThem.middle_name;
txtID.Text = setThem.userid;
txtweight.Text = setThem.weight;
txttin.Text = setThem.tin;
txtsss.Text = setThem.sss;
txtaeno.Text = setThem.agency_employee_no;
txtbloodtype.Text = setThem.blood_type;
txtcitizenship.Text = setThem.citizenship;
txtcivilstatus.Text = setThem.civil_status;
txtcpno.Text = setThem.cell_no;
txtdob.Text = setThem.datetime_of_birth.ToString();
txtemail.Text = setThem.email_address;
txtgender.Text = setThem.sex;
txtgsis.Text = setThem.gsis_id;
txtheight.Text = setThem.height;
txtnameext.Text = setThem.name_ext;
txtpagibig.Text = setThem.pagibig_id;
txtpermaaddr.Text = setThem.permanent_address;
txtpermatelno.Text = setThem.permanent_telno;
txtpermazip.Text = setThem.permanent_zipcode;
txtphilhealth.Text = setThem.philhealth;
txtpob.Text = setThem.place_of_birth;
txtresidentialaddr.Text = setThem.residential_address;
txtresitelno.Text = setThem.residential_telno;
txtresizip.Text = setThem.residential_zipcode;
txtweight.Text = setThem.weight;
}
}

You have a whole host of problems going on here.
You pass a key into the method, and then immediately overwrite it with the contents of your search box.
Your search could return more than one result, and therefore your code is looping through each result and overwriting the output values with the last returned row. Use += rather than + in your loop, i.e.
txtsurname.Text += setThem.last_name;
Your code is currently case sensitive, this may be the desired approach but might not be.