Develop Reference

how to Disable / Enable button in datatable

I want to check the Article's Status, if true the Edit button will be disabled else the user can click and switch to the Edit page. How to use it?
return ' Edit ';
}}
],
order: [1, 'asc']
});

The column render function you are using:
render: function (data) { ... }
is capable of accessing all the data in the current row. Its full signature is:
render: function ( data, type, row, meta ) { ... }
So, you can use the row parameter to access other columns in that row, such as row.status:
{
data: 'id',
className: "center",
title: 'Actions',
render: function (data, type, row, meta) {
if (row.status === true) {
return ' Edit ';
} else {
return '<a href="Student/EditArticle/' + data + '" class="btn btn-success mr-1" disabled> Edit </a>';
}
}
}
You can see further details and examples here.
It is worth looking at why the type parameter is provided and how it is used. It basically helps you to provide multiple versions of a value - one value for the table display (the HTML link); a different value for sorting; another value for filtering, and so on.
So, for example, for your clickable link, you may prefer the sort and filter values to be simply the data value (without any of the extraneous HTML).
But this is completely optional - you don't have to use it. See orthogonal data for more info.
Update:
I forgot that a hyperlink cannot be disabled in the same way as a button (so you cannot use "disabled"). Instead, you can look at these approaches, or do what TimRoberts suggested in your question's comments. Having said that, the render function with the row parameter should be what you need.
else {
return 'Edit'; // or, alternatively: return ''
}

How do I add a radio button to HTML table via jquery

I'm using Jquery $.post to get string array from SQL based on selection from a drop-down that I'm then reading into an HTML table. Each time they change selection on drop down, it clears all but the header row from the table and reloads new values. That is working fine.
It is just a basic 3 row table; a unique identifier, a value and a count shown as string. Every record has all 3, so I'm just using for loop with counters to control start/end of rows. In my form it's header is defined as such:
<div class="col-md-10">
<table id="attEditTable" style="width:100%" cellpadding="0" cellspacing="0" border="1" class="row">
<tbody>
<tr style="background-color: #F0F8FF;">
<th></th>
<th>Attribute Value</th>
<th>Item Count</th>
</tr>
</tbody>
</table>
</div>
I'm now trying to change the 1st cell of each row to a radio button with the value set to the value I was displaying in that cell.
Currently when the view displayed it is showing [object Object] in the first cell of every row instead of a radio button.
Sorry I am a newb at this with no training on Java or MVC - so hoping just a simple syntax issue...
Trying this basic one returned syntax error on input:
<input type="radio" name="SelERow" value='+editValues[i]+' />
I've also tried (both had same result of [object Object]):
$("input:radio[name=\"SelERow\"][value="+editValues[i]+"]")
$('<input type="radio" id="ERow" name="SelERow" value='+editValues[i]+' />')
Per David's suggestions I've now also tried (both resulted in no data and no error):
'<input type="radio" name="SelERow" value='+editValues[i]+' />'
var tblCell = $('<td />'); // create an empty <td> node
if (x == 1 || (x - 1) % 3 == 0) {
var input = $('<input />', { type: 'radio', id: 'ERow', name: 'SelERow', value: editValues[i] });
tblCell.append(input); // append an <input> node to the <td> node
} else {
tblCell.text(editValues[i]); // or just set the text of the <td> node
}
With the 2nd one I also changed the line: tblRow = tblRow + ""; to instead be tblRow = tblRow + tblCell + "";
Current Script
<script>
$(function () {
$("#EditAttributeName").change(function () {
var selectedName = $(this).val();
// Delete all but first row of table
$("#attEditTable").find($("tr")).slice(1).remove();
var url2 = "EditDD2changed?selectedName=" + selectedName;
$.post(url2, function (editValues) {
var x = 0;
var tblRow = "<tr>";
for (var i=0; i < editValues.length; i++)
{
x++;
if (x == 1 || (x - 1) % 3 == 0) {
tblRow = tblRow + "<td>" + $('input:radio[name="SelERow"][value="' + editValues[i] + '"]');
}
else {
tblRow = tblRow + "<td>" + editValues[i] + "</td>";
}
if (x % 3 == 0)
{
tblRow = tblRow + "</tr>";
$("#attEditTable").append(tblRow);
tblRow = "<tr>";
}
}
})
});
});
</script>
Console is showing no error messages.

Looks like it's close. To start, there's an important difference in the two attempts. This is a jQuery selector syntax:
$('input:radio[name="SelERow"][value="' + editValues[i] + '"]')
So it's not creating an <input/>, but looking for an <input/>. Which isn't what you want in this case. Your other attempt uses the syntax for creating an element:
$('<input type="radio" id="ERow" name="SelERow" value=editValues[i] />')
Though an issue here (which may have just been a copy/paste error in posting the question? but for completeness and for future readers it may as well be addressed...) appears to be that the editValues[i] is just part of the string. You want to concatenate it into the string. There are a couple ways to do that. Either direct concatenation:
$('<input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" />')
Or string interpolation (take note of the different overall quotes, using back-ticks this time):
$(`<input type="radio" id="ERow" name="SelERow" value="${editValues[i]}" />`)
The latter is newer syntax but should be widely enough supported by now. (Though in any given business environment who knows what ancient browsers one may need to support.) Could just be personal preference between the two.
it is showing [object Object]
The main issue producing the result you've observing is that you're concatenating the result of that jQuery operation directly as a string:
tblRow + "<td>" + $('<input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" />')
(Coincidentally, whether you're creating an element or looking for an element, this observed output would be the same because both operations return an object.)
The result of an $() operation is not itself a string, but a more complex object. When concatenated with a string it has to be interpreted as a string, and unless the object has a meaningful .toString() implementation (this one doesn't appear to) then the default string representation of a complex object is exactly that: "[object Object]"
There are a couple approaches you can take here. One would be to just use strings entirely, you don't necessarily need a jQuery object here:
tblRow + '<td><input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" /></td>'
Since you're using jQuery later to append the result to the HTML, you can just build up all the HTML you like as plain strings and let jQuery handle turning them into DOM objects when you send them to .append().
The other option, if you definitely want to "use jQuery" in this situation or are otherwise being instructed to, would be to build the hierarchy of HTML elements as jQuery objects and then pass that hierarchy to .append(). Constructing such a hierarchy can look something like this:
var tblCell = $('<td />'); // create an empty <td> node
if (x == 1 || (x - 1) % 3 == 0) {
var input = $('<input />', { type: 'radio', id: 'ERow', name: 'SelERow', value: editValues[i] });
tblCell.append(input); // append an <input> node to the <td> node
} else {
tblCell.text(editValues[i]); // or just set the text of the <td> node
}
Note that each $() operation creates an HTML element node, and you can supply attributes for it as a second argument to the $() function. Then those nodes can be .append()-ed to each other just like you .append() the HTML string to $("#attEditTable").
In your particular case this may get a little more cumbersome because your loop isn't just looping through cells or just through rows, but through both and using a hard-coded count to determine whether it's reached the end of a row or not. So, as part of learning/practicing jQuery, it may be worth the effort to try this approach. But I suspect the shortest path to getting your code working with minimal changes would be the string concatenation approach above.
Side note: This code is using the same id value for the radio buttons created within this loop. The result is that there is expected to be multiple elements on the page with the same id. This is technically invalid HTML. If you ever try to use that id to reference an element, the resulting behavior will be undefined. (It might work in some cases, might not in others, purely coincidentally.) Though if you don't need to use that id to reference the elements, you may as well remove it entirely.

Extjs how to get specify element after render in grid panel

Hi I know this issue title is a little blurred.
I have a grid column and want to implement data rating.
I use renderer and return div but now I have no idea to get the elements.
My code is as below
{
text: 'rank',
dataIndex: 'rank',
flex: 1,
tdCls: 'column-rank',
renderer: function(value) {
return '<div class=rating>' +
'<div data-rating="1"></div>' +
'<div data-rating="2"></div>' +
'<div data-rating="3"></div>' +
'<div data-rating="4"></div>' +
'<div data-rating="5"></div>' +
'</div>'
}
}

I guess you have to take a look at rating widget as CD mentioned.
If you still want to implement rating on your own I guess you have to write custom component for it, setup it with rating data from grids store and reference to a certain row in renderer.
If you still want to implement rating on your own using divs you can do something like this to select data-rating divs:
Ext.query('div[data-rating="5"]', myRowComponent.getEl());

renderer function is passed several parameters when called.
One of them, as stated in the documentation is record.
You can use this parameter to extract record for the current row. You can access record fields just as you access model fields record.get('fieldName').
Example pseudo-code:
renderer: function(value, metaData, record, rowIndex, colIndex) {
var fieldValue1 = record.get('fieldName1');
return '<div class=rating>' +
'<div data-rating="1">' + fieldValue1 + '</div>' +
...
'</div>';
}

Dynamic jQuery Dialog passing JSON object from within loop

I'm wondering if there is a better (cleaner?) method than my current implementation. I'm currently encoding a PHP SimpleXMLObject (USPS Tracking API) to JSON and looping through said JSON object via Javascript to operate the front-end.
Examples from my current implementation below:
Function to display dialog implemented anonymously outside of .ready() :
var moreInfo_popup = function(i) {
$('#moreinfo'+i).dialog({
modal:false,
autoOpen:false,
height:555,
title: 'Detailed View',
width:500,
draggable:false,
buttons: {
Ok: function(){
$(this).dialog("close");
}
}
});
$('#moreinfo'+i).dialog('open');
}
Main loop for displaying Tracking ID, Most Recent Event, and Mail Class for each API response- I'm currently generating a content div appended to #modal_container, then calling moreInfo_popup() inline via <input onClick="">:
for(var key in obj) {
if(obj.hasOwnProperty(key)) {
if(key % 2 === 0) {
$('#page-nav').append("<div id=\"results_table\"><table class=\"data_table\"id=\"data_table_id\"border=\"0\"width=\"60%\"align=\"center\"><tr><td align=center width=20%>"+obj[key].TrackInfo.Attributes.ID+"</td><td align=\"center\"width=\"35%\">"+obj[key].TrackInfo.StatusSummary+"</td><td align=\"center\"width=\"20%\">"+obj[key].TrackInfo.Class+"</td><td align=\"center\"><input type=\"button\"class=\"moreInfo\"value=\"Detail\"id=\"_buttonMoreInfo\"onClick=\"moreInfo_popup("+key+")\"></td></tr></table></div>");
$('#modal_container').append("<div id=\"moreinfo" + key + "\"><table><tr><td>" + obj[key].TrackInfo.Attributes.ID +"</td></tr></table>").hide();
}
else {
$('#page-nav').append("<div id=\"results_table\"><table class=\"data_table_even\" id=\"data_table_id\" border=0 width=60% align=center><tr><td align=center width=20%>"
+ obj[key].TrackInfo.Attributes.ID + "</td><td align=center width=35%>" + obj[key].TrackInfo.StatusSummary + "</td><td align=center width=20%>"
+ obj[key].TrackInfo.Class + "</td><td align=\"center\"><input type=\"button\" value=\"Detail\" class=\"moreInfo\" id=\"_buttonMoreInfo\"onClick=\"moreInfo_popup("+key+")\"></td></tr></table></div>");
$('#modal_container').append("<div id=\"moreinfo" + key + "\"><table><tr><td>" + obj[key].TrackInfo.Attributes.ID +"</td></tr><tr><td> <button>OK</button></td></tr></table>");
}
}
$("#page-nav td:contains('undefined')").html("Invalid");
}
As I'm sure you can see, this feels like an incredibly tedious way of accomplishing the desired outcome, to which there is surely a better alternative. As a newcomer to JavaScript/jQuery, I've done plenty of searching on this subject, but haven't really understood much of what I found- If indeed I was asking the right questions in the first place.

I think you can use angular and data bind:
So you can just use a directive and automatically bind your JSON object from the server side easily to the html elements.
However you should start studying angular.
you can start looking for your elegant way of doing stuffs here:
https://docs.angularjs.org/tutorial/step_04
I hope it was useful.

How to Add a Drop Down List in a Kendo UI Grid

Using Kendo UI and a Row Template, I have a grid started like the following:
http://jsfiddle.net/xF4CK/
I'm wanting to alter the Actions column to contain a drop down list populated by the actions object. The actions object contains display text and a relative url path like the following example:
var actions = [
{ name: "edit", url: "reports/report/1" },
{ name: "delete", url: "reports/delete/1" }
];
This actions object is on each row of the grid and may vary per row/user/etc. The intended usage would be a user selects the drop down list and then chooses one of the options. On choosing the option the url value is posted.
I'm not sure where to begin, or if it is possible in the Row Template. Any help is greatly appreciated.

I was able to get it figured out. In the row template I am calling a js function and returning html markup for the list. Then setting the .kendoDropDownList on all items based on a class attribute. I have updated the jsfiddle here but it doesn't seem to work in jsfiddle. It is working when I test in IE10 and Chrome on my dev machine.
Here's the relevant code changes:
In the rowTemplate, changed
#: actions #
to
#= renderDropDown(actions) #
This "=" displays the literal text which renders the html as html whereas the ":" encodes the html.
The renderDropDown function:
function renderDropDown(actions) {
var dropDownList = "<select class=\"insight-dropdown\">";
dropDownList = dropDownList + "<option value=\"default\" disable=\"disabled\">...</option>";
for (var i = 0; i < actions.length; i++) {
dropDownList = dropDownList + "<option value=\"" + actions[i].url + "\">" + actions[i].name + "</option>";
}
dropDownList = dropDownList + "</select>";
return dropDownList;
}
To the dataBound event of the grid, I added this function to turn the html into a drop down list:
// Set the drop down lists
$(".insight-dropdown").kendoDropDownList({
select: onDDLSelect
});
To handle the selection of an action:
function onDDLSelect(e) {
var dataItem = this.dataItem(e.item.index());
alert(dataItem.value);
}