Iam new to telerik controls.I have anchor tag of "Show all Account.. " in footer template of radcombobox
<telerik:RadComboBox runat="server" ID="rcmdExpAc" TabIndex="22" EmptyMessage="" HighlightTemplatedItems="true"
AllowCustomText="true" Width="235" OnClientDropDownOpening="OnClientDropDownOpeningExpAc" OnClientDropDownClosing="OnClientDropDownClosingExpAc">
<ItemTemplate>
<div class="combo-item-template">
<table>
<tr>
<td style="width: 40px;">
<span> <%# Eval("colAccCode")%> </span>
</td>
<td style="width: 400px;">
<span> <%# Eval("colAccName")%> </span>
</td>
<td style="width: 110px;">
<span> <%# Eval("colAcTypeName")%></span>
</td>
</tr>
</table>
</div>
</ItemTemplate>
<FooterTemplate>
<a id="ExpenseAccount" class="blue" style="text-decoration: underline;" href="#signup" name="signup" rel="leanModal">New Account...</a>
<a id="ElnkShowIncomeAccount" class="blue" style="text-decoration: underline; cursor: pointer;" onclick="EShowAllOrPaymentAccount(this);" >Show All Accounts...</a>
</FooterTemplate>
</telerik:RadComboBox>`
On show all accounts click the ajax call is called and it is rebind with combobox but the combo box only bind one column from database ...here is the code for ajax call.....
function EShowAllOrPaymentAccount(event) {
var dropDown = $find("rcmdExpAc");
if (event.innerHTML == "Show All Accounts...") {
$.ajax({
url: "../Handlers/Expense.ashx",
type: 'GET',
data: {
rType: "GetAllPaymentAccRecord",
CompanyID: $('#compid').val()
},
dataType: 'json',
success: function (data) {
dropDown.clearItems();
$.each(data, function (indx, itm) {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_value(itm.colAccId);
comboItem.set_text(itm.colAccCode);
dropDown.trackChanges();
dropDown.get_items().add(comboItem);
dropDown.commitChanges();
});
},
error: function (a, b, c) {
alert(a + " " + b + " " + c);
}
});
}
}
I want to bind Eval("colAccName")%>,Eval("colAccCode")%>,Eval("colAcTypeName")%> are earlier defined in radcombo . but i only find a way of binding one column against colAccID... Please guide me how to bind 3 column from database which are defined in template in this javascript code.
You should define a ClientItemTemplate as shown in this demo.
It is used when you create your combo items client-side.
You can also use Attributes to store additional info about the item (text, value + AccountType, AccountCode, etc.). The syntax can be also seen in the documentation.
Related
I have a question about repeater objects in asp.net.
In html and script parts I have this code below.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyEdit);
function MyEdit() {
jQuery(function($) {
//editables on first profile page
$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.loading = "<div class='editableform-loading'><i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'></i></div>";
$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>' +
'<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>'
//editables
//text editable
$('#rptQuestionTitle')
.editable({
type: 'text',
name: 'username'
});
$('#rptQuestionDescription')
.editable({
type: 'text',
name: 'username'
});
});
}
MyEdit();
<asp:Repeater ID="rptQuestionRepeater" runat="server">
<HeaderTemplate>
<table class="table table-bordered">
<tr>
<th style="width: 50px">No</th>
<th style="width: 200px; height: auto">Question</th>
<th style="width: 400px; height: auto">Description</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%#Eval("Sort")%>
</td>
<td><span class="editable editable-click" runat="server" id="rptQuestionTitle"><%#Eval("Text") %></span></td>
<td><span class="editable editable-click" runat="server" id="rptQuestionDescription"><%#Eval("Description") %></span></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
I am trying to do an editable table. I have to be able to edit each row. But as you can see my script codes, I can only assign id's to be editable. I need to have class editable.
In ASP.NET repeater each element has different Id's thanks to the repeater. My edit JS code works just for one row because I've assigned the id's by myself as in the JS and Repeater.
But after second row the ID's are automatically changed into something like repeater's counter.
So my real question is, apart from editing with equal ID's in the script, how can I edit my rows in repeater which they will have different ID's. I think I need to use foreach() but not sure how to do it.
I want to have my all rows editable when I just type their class ".editable" or I can create another class, it doesn't really matter. All I want is an ID free solution.
I wasn't able to run your code at the snippet. Bu try using $('.editable') instead of the id $('#rptQuestionTitle'). If the plugins is ready to receive an array and work with it, it'll work.
Here is the c# file code in which i want to get radio button to every out put so that i can chosen option as we do in "mcqs".
public HtmlString questions_sec1()
{
int userid = Convert.ToInt32(Session["USERID"]);
List<DAO_getQuestiones> get_question_sec1 = new List<DAO_getQuestiones>(DAO_getQuestiones.get_question_sec1(userid)); // data to fech first section
string content = "";
HtmlString theEnvelopePlease = null;
try
{
foreach (var obj in get_question_sec1)
{
content = content + "<tr><td> " + obj.get_question_id + "</td> <td>" + obj.get_answer_question + "</td><td>"+ <input type="radio" name="d" value="data"> DATA +"</td></tr>";
}
theEnvelopePlease = new HtmlString(content);
return theEnvelopePlease;
}
catch (Exception ex)
{
content = content + ex;
theEnvelopePlease = new HtmlString(content);
return theEnvelopePlease;
}
}
Here is the code of html call which is returning the function of cs file for rendering:
<table>
<thead>
<tr>
<th>Sr.</th>
<th>Questions</th>
<th>Answers</th>
</tr>
</thead>
<tbody>
< %:questions_sec1() % >
</tbody>
</table>
Question: I want the radio button to every out put of answer so that i can chose one option and one more thing.
It is difficult to add form element with HTML string into ASP.NET form.
Instead, I suggest you to use a 'Repeater':
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate>
<table>
<thead>
<tr>
<th>Sr.</th>
<th>Questions</th>
<th>Answers</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td> <%#Eval("get_question_id ") %> </td>
<td> <%#Eval("get_answer_question ") %> </td>
<td> <asp:RadioButton ID="RadioButton" runat="Server" Text="DATA" /> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
And in your .cs file, bind the data to the Repeater like this:
Repeater1.DataSource = get_question_sec1;
Repeater1.DataBind();
Here is the MSDN link of Repeater: https://msdn.microsoft.com/en-US/library/system.web.ui.webcontrols.repeater.itemtemplate(v=vs.110).aspx
Thanks for your responce but i dn't want to you built in control from the tool box of asp.net.
i'm a newbie to ajax and jquery
im loading jquery tabs using a function
$(function() {
$("#tabs").tabs({active: '<s:property value="tabIndex" />'});
});
// this tab index I set from backend
and my ajax post function is something like
function loadTabs() {
var selectId = document.getElementById("sId").value;
$.ajax({
type: "post",
url: "loadTabsForPage.action?pageName=" + selectId,
cache: false,
data: {},
success: function(data, textStatus, xhr) {
alert(data);
if (data != null) {
$('#ajaxDiv').html(data);
}
},
error: function(xhr, textStatus, errorThrown) {
alert('Error while request..' + textStatus + " " + errorThrown);
}
});
}
the above both functions will be in my javascript. The jsp content will be something like:
<table>
<tr>
<td align="left">Select Page:
<s:select list="pageList" listKey="pageKey" listValue="pageValue" name="pageName" id="selectedField" headerKey="-1" headerValue="Select Page" onchange="loadTabs();" />
</td>
</tr>
</table>
the jsp contents after performing onchange from my jsp ajax post will be triggered and contents will be loaded as below
<div id="ajaxDiv">
<table>
<tr>
<td><s:property value="tabLabel" />
</td>
<td style="text-align: center;"><s:property value="orderLabel" />
</td>
<td style="text-align: center;"><s:property value="activeLabel" />
</td>
<td style="text-align: center;"><s:property value="defaultLabel" />
</td>
</tr>
</table>
// underneath this i display my ajax tabs
<s:if test="tabsList != null">
<div id="tabs">
<ul>
<s:iterator value="tabsList" status="tabLoopCounter">
<li>
<a id="<s:property value='tabPkey' />TabId" href="#<s:property value='tabPkey' />DivId">
<s:property value="tabName" />
</a>
</li>
</s:iterator>
</ul>
</div>
</s:if>
</div>
So with this scenario the table contents are loaded perfectly but im unable to load the tabs. I can see only hyperlinks.
is it possible to set an index inside post method of ajax or can i publish two divs in a post method
can i get any solution for this
I'm presenting data in a table by calling an Action(that returns a list in Json) through an AJAX call.
Output:
http://imageshack.com/a/img673/3484/zxZIqy.png
What i would like to do is to make each user (rows in table) linkable to an edit page (Admin/Edit/Id). Either by simply clicking on them, or by having an Edit-link at the end of each row.
I don't know how to achieve this. It would be easy with ordinary razor syntax. But this template seams to be nice to work with to achieve this sort of dynamic datatable.
I'm working with a template called KODataTable to make this table with both searching and sorting ability.
View..
<div id="kodt">
<div>
<input type="text" data-bind="value: searchText, valueUpdate: 'afterkeydown'" />
<select data-bind="value: selectedColumn, options: columns"></select>
<button data-bind="click: search">Search</button>
</div>
<div>
<table class="table table-striped table-hover">
<thead>
<tr data-bind="foreach: columns">
<th data-bind="text: $data, click: function() { $parent.sort($index()) }" style="cursor: pointer"></th>
</tr>
</thead>
<tbody data-bind="foreach: currentRows">
<tr data-bind="foreach: $parent.columns, click: function () { $root.selectRow($data); }, css: { 'success': $root.selectedRow() == $data }">
<td data-bind="text: $parent[$data]" style="cursor: pointer; text-align: center"></td>
</tr>
</tbody>
</table>
</div>
<div>
<button data-bind="click: firstPage">First</button>
<button data-bind="click: prevPage">Prev</button>
Page <span data-bind="text: currentPage() + 1"></span> of <span data-bind="text: pageCount"></span>
<button data-bind="click: nextPage">Next</button>
<button data-bind="click: lastPage">Last</button>
</div>
</div>
Script..
<script>
var users = new Object();
$.getJSON("/Admin/GetUsers", function (data) {
users = data;
var TableDataVM = new KODataTable({
columns: ["Id", "Username", "RoleId", "CompanyId", ""],
rows: users,
});
ko.applyBindings(TableDataVM, document.getElementById("kodt"));
});
</script>
Right now, it looks like when a user clicks a row, $root.selectRow($data); is invoked, which passes the row object's data over to some function in the ViewModel called selectRow(). If this function exists, you could use it to $.post the row (representing the user object) to the MVC controller in this function, and use the response to redirect to the Edit view.
var vm = function() {
var self = this;
var selectRow = function(rowClicked) {
var data = {
Id = rowClicked.Id,
Username = rowCicked.Username,
// etc.
};
// post the data to some MVC controller - something remotely like this
$.ajax({
url: '/Admin/Edit/' + rowClicked.Id,
data: ko.toJSON(data),
type: 'POST',
success: function (result) {
window.location.href = result.url;
}
});
};
};
I want to apply one autocomplete extender for multiple textbox having same name attribute, For eg.
I just want to apply same autocomplete extender to all having name="txtQtyPkgs". How I can do this?
My html
<table cellspacing="0" cellpadding="0" border="0" style="" id="flex1">
<tbody>
<tr id="rowGH03013">
<td align="Left" class="sorted">
<div style="text-align: left; width: 150px;">
GH03013</div>
</td>
<td align="Left">
<div style="text-align: left; width: 150px;">
999</div>
</td>
<td align="Left">
<div style="text-align: left; width: 161px;">
<input align="right" type="text" width="30px" name="txtQtyPkgs" maxlength="3" onblur="IntegerOnly(this.id);"
id="QtyPkgs19523"></div>
</td>
<td align="Left">
<div style="text-align: left; width: 446px;">
<input align="left" type="text" width="300px" class="auto" maxlength="100" name="txtBuyerName"
id="Buyer19523"></div>
</td>
</tr>
<tr class="erow" id="rowGH03011">
<td align="Left" class="sorted">
<div style="text-align: left; width: 150px;">
GH03011</div>
</td>
<td align="Left">
<div style="text-align: left; width: 150px;">
999</div>
</td>
<td align="Left">
<div style="text-align: left; width: 161px;">
<input align="right" type="text" width="30px" name="txtQtyPkgs" maxlength="3" onblur="IntegerOnly(this.id);"
id="QtyPkgs19521"></div>
</td>
<td align="Left">
<div style="text-align: left; width: 446px;">
<input align="left" type="text" width="300px" class="auto" maxlength="100" name="txtBuyerName"
id="Buyer19521"></div>
</td>
</tr>
</tbody>
</table>
my xml data
<table>
<userid>23</userid>
<userdispname>GUJARAT PACKERS LTD</userdispname>
<usercode>GTPL</usercode>
</table>
<table>
<userid>26</userid>
<userdispname>Lipton India Limited</userdispname>
<usercode>Lipton</usercode>
</table>
<table>
<userid>27</userid>
<userdispname>TOSH LTD.</userdispname>
<usercode>ATosh</usercode>
</table>
<table>
<userid>28</userid>
<userdispname>SERVICES INDIA PVT. LTD.</userdispname>
<usercode>TSI</usercode>
</table>
<table>
<userid>29</userid>
<userdispname>Parekh Company</userdispname>
<usercode>Parekh</usercode>
</table>
<table>
<userid>30</userid>
<userdispname>SHREE BALAJI CO.</userdispname>
<usercode>Balaji</usercode>
</table>
<table>
<userid>31</userid>
<userdispname>Kesaria Company</userdispname>
<usercode>Kesaria</usercode>
</table>
my javascript
$(document).ready(function () {
AuctoCmplBuyer();
$(".auto").autocomplete({ source: [AuctoCmpData] });
});
function AuctoCmplBuyer() {
$.ajax({
type: "POST",
url: "../service/WebService.asmx/XmlData",
data: "{strData:'BuyerList'}",
contentType: "application/json; charset=UTF-8",
dataType: "xml",
success: function (msg) {
$(msg).find('Table').each(function () {
if (StrData.length != 0) {
StrData = StrData + ",";
}
StrData = '{"id":"' + $(this).find('UserID').text() + '","label":"' + $(this).find('UserDispName').text() + '","value":"' + $(this).find('UserDispName').text() + '"}';
});
}
});
AuctoCmpData = StrData;
}
Please put a common class name for all your textbox and using jQuery autocomplete you can do it.
$(".auto").autocomplete({
source: "../Ajax/AjaxGetData.ashx,
minLength: 2,
select: function(event, ui) {
$(this).val(ui.item.value);
}
});
Please refer for more.
http://jqueryui.com/demos/autocomplete/#remote
What I am doing is to make a class called auto and assign it to all of the text box. so when ever the user enters the value it will be going to the handler page (asp.net) or u can use a .php page. In that handler page I am selecting data from database using the like operator of Sql.After selecting the values just Response.Write() (in asp.net) or echo(in php please refer) to send the data.The data is send in the JSON format
[ { "id":"XYZ" , "label":"XYZ" , "value": "XYZ"}]
The above is the format of JSON
For all auto suggest you might have a lot of data.To do so you have to get the total number of results returned after the execution of the query and make a loop.Initialize a string variable with the default value as "[" to the start and append the string with {"id":"Data","label:Data","value":"data"}(this constitutes a JSON object).If it is having more than you just add a , and do looping at the end add "]" to string.
So ur array will be in the format of
[ { "id":"XYZ1" , "label":"XYZ1" , "value": "XYZ1"}, { "id":"XYZ2" , "label":"XYZ2" , "value": "XYZ2"}]
The [' denotes the starting of array and ']' denotes the end
The{` denotes the starting of object and '}' denotes the end
Pls refer JSON to know more
$(document).ready(function () {
AuctoCmplBuyer();
Auctocomplete functionality to each textbox
$(".auto").autocomplete({ source: AuctoCmpData });
});
function AuctoCmplBuyer() {
$.ajax({
type: "POST",
url: "../service/TWWebService.asmx/XmlData",
data: "{strData:'BuyerList'}",
contentType: "application/json; charset=UTF-8",
dataType: "xml",
success: function (msg) {
$(msg).find('Table').each(function () {
rowObj = new Object();
rowObj.col1 = $(this).find('UserDispName').text() + '-' + $(this).find('UserID').text();
AuctoCmpData.push(rowObj);
});
}
});
}
i am doing in this way ...i am not getting the way you said "harie"