I have below kendo grid. I want remove 'Tick mark' and 'Done' after asyn upload.
How to do that? Following code removes the text 'Done' but tick mark is still visible.
Kendo upload control:
#(Html.Kendo().Upload()
.Name("files")
.Messages( m => m.Select("Browse"))
.Async(a => a
.Save("SaveAttachment", "Document")
.Remove("Remove", "Document")
.AutoUpload(true)
)
.Events(events => events
.Success("onSuccess")
)
.Multiple(false)
)
$("#files").kendoUpload({
multiple: true,
async: {
saveUrl: "...",
removeUrl: "...",
autoUpload: false
},
localization: {
// Override built-in text "Done"
headerStatusUploaded:"",
statusUploaded:""
}
...
});
To hide all messages ('Uploading...' and 'Done') and icons you can use simple css:
.k-upload .k-upload-status.k-upload-status-total {
display: none;
}
If you want to hide just 'Done' and tick icon as you said - you can do it by using javascript events:
#(Html.Kendo().Upload()
.Name("files")
.Messages(m => m.Select("Browse"))
.Async(a => a
.Save("Submit", "Watchdog")
.AutoUpload(true)
)
.Events(events => events
.Success("onSuccess")
.Select("onSelect")
.Complete("onComplete")
)
.Multiple(false)
)
<script>
function onSelect(e) {
e.sender.element.closest('.k-upload').find('.k-upload-status.k-upload-status-total').show();
}
function onComplete(e) {
e.sender.element.closest('.k-upload').find('.k-upload-status.k-upload-status-total').hide();
}
</script>
Related
I'm trying to select antd table row onClick...
I managed to set the "selectedRowKeys" on the click of the row...and the row is getting selected
<Table onRow={(record: any, rowIndex: number) => ({
onClick: () => {
setSelectedKeys([record.key]);
},}...
the problem is that the onChange and onSelect for the "rowSelection" object are not firing on row click (only on direct radio button select) ...am I doing something wrong?!
const rowSelection = {
selectedRowKeys: selectedKeys,
onSelect: (record: T, selected: boolean) => {console.log("on select");},
onChange:.....
sandbox:
https://codesandbox.io/s/row-selection-events-not-firing-in-antd-table-zus9x
I just added console.logs in onRow>onClick and if I use this code:
console.log(selectedKeys);
return (
<Table
rowSelection={{
type: "radio",
...myRowSelection
}}
columns={myColumns}
dataSource={data}
onRow={(record, rowIndex) => ({
onClick: () => {
console.log("Row onclick");
console.log(record);
setSelectedKeys([record.key]);
}
})}
/>
);
Then it seems like your row onclick is being called and it's setting the correct selected keys. It's also selecting the correct row.
The below code only refers to the radio button so it's only impacted by the radio button onSelect and onChange
const myRowSelection = {
selectedRowKeys: selectedKeys,
onSelect: (record, selected) => {
console.log(record);
},
onChange: (selectedRowKeys, selectedRows) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
}
};
See here is where you link that code to the radio button
rowSelection={{
type: "radio",
...myRowSelection
}}
If you want to trigger the onChange by selecting a row, I recommend you call an onChange() function inside onRow onClick like so:
onRow={(record, rowIndex) => ({
onClick: () => {
//CALL THE ONCHANGE FUNCTION HERE AND IT WILL BE TRIGGERED ON ROW SELECTION
onChange([record.key]);
//and then do whatever you want in the onChange function
}
})}
const myRowSelection = {
selectedRowKeys: selectedKeys,
onSelect: (record) => {
console.log('selected', record);
setSelectedKeys([record.key]);
},
selectedRowKeys: selectedKeys, };
<Table
rowSelection={{
type: "radio",
...myRowSelection
}}
columns={myColumns}
dataSource={data}
onRow={(record) => ({
onClick: () => {
console.log('click', record);
setSelectedKeys([record.key]);
}
})}
/>
it's work for me
It is intended behavior as this issue states:
antd issue 30538
Screen
Code
In this screen, we have used kendo treelist. I need to implement autocomplete dropdown in CODE column. How can i do that?
Try this
var ac = Html.Kendo()
.AutoComplete()
.Name("CodeAutoComplete")
.DataSource(ds =>
{
ds.Read(read =>
{
read.Url("youraction");
});
ds.ServerFiltering(true);
});
var treeGrid = Html.Kendo()
.TreeList<YourModel>()
.Name("SomeTreeList")
.Columns(columns =>
{
columns.Add().Field(t => t.YourProperty).Editor(ac.ToHtmlString());
});
I solve my above problem as per given below jquery code.
var input2 = jQuery('<input id="WEIGHT_UOM" value="' + e.model.WEIGHT_UOM + '">');
input2.appendTo($(".k-grid-edit-row").find("[data-container-for='WEIGHT_UOM']"))
//create AutoComplete UI component
$("#WEIGHT_UOM").kendoAutoComplete({
dataTextField: "ProjectDesc",
// template: '${ data.ProjectDesc }' + '<span style="display:none;> ${ data.ProjectDesc }</span>',
select: function (org1) {
var dataItem1 = this.dataItem(org1.item.index());
// model.set("field1", dataItem.field1);
e.model.set("WEIGHT_UOM", dataItem1.ProjectID);
},
dataSource: {
type: "jsonp",
serverFiltering: true,
transport: {
read: "#Url.Action("GetISOUnitAutoComp",
"DashBoard")",
}
}
});
I have one requirement for asp.net MVC application and for that inside Kendo UI grid, I have customized one column with combo box and two buttons for performing adding or deletion of any user selected value or manual typed value from combo box control.
But I am not able to get how I can get button click information for any specific row of that column.
Kindly guide how I can achieve such kind of behavior.
Sample Code for Grid is below and I want to get clickable for Category Column.
#(Html.Kendo().Grid<GridHeaderTemplate.Models.ProductModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
.Title("Category").HtmlAttributes(new
{
#class = "templateCell"
}).ClientTemplate("<table cellspacing='0' class='data-row data-personal'><tr>" +
"<td>#=data.Category.CategoryName# <span class='custom-arrow k-icon k-i-arrow-s'></span></td>" +
"<td><button id='customButton'>Add</button> <span></span> <button id='customButton1'>Delete</button></td>" +
"</tr></table>")
.HeaderTemplate(
#<text>
<table cellspacing="0" class="data-header">
<tr>
<td colspan="2"><strong>Category</strong></td>
</tr>
<tr>
<td>Category Name</td>
<td>Settings</td>
</tr>
</table>
</text>
)
.Width(300);//.ClientTemplate("#=data.Category.CategoryName# <span class='custom-arrow k-icon k-i-arrow-s'></span>"); ;
columns.Bound(p => p.UnitPrice).Width(150);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolBar =>
{
toolBar.Save();
toolBar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Groupable()
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.CategoryID).DefaultValue(1);
})
Enter some code to help us helping you..
You need to have in your object the Id that you want to add or delete,
If you created a client template adding the two specific buttons and calling a javascript function, then you have acess to the properties of the row
for instance:
column.Bound(c=>c.Id).hidden(true);
column.Bound(c=>c.Name).ClientTemplate("<span onclick='AddToThisId(#=Id#)'>add</span>");
Edited:
CONTROLLER:
public ActionResult Delete(int id)
{
try
{
//Delete....
}
catch (Exception ex)
{
result.SetInsucess("Erro a apagar registo: " + ex.Message + ".");
}
return Json(true, JsonRequestBehavior.AllowGet);
}
VIEW
<script>
function AddSomethingBaseOnId(id){
$.ajax({
cache: false,
type: 'GET',
data: { Id: Id },
contentType: "application/json",
url: "Controller/AddAction",
success: function (data) {
alert("sucess");
},
fail: function (jqXHR, textStatus) {
alert("Ocorreu um erro: " + textStatus);
$("#" + uid).hide();
}
});
}
function DeleteSomethingBaseOnId(id){
$.ajax({
cache: false,
type: 'GET',
data: { Id: Id },
contentType: "application/json",
url: "Controller/DeleteAction",
success: function (data) {
alert("sucess");
},
fail: function (jqXHR, textStatus) {
alert("Ocorreu um erro: " + textStatus);
$("#" + uid).hide();
}
});
}
</script>
in your client template:
"<td>#=data.Category.CategoryName# <span class='custom-arrow k-icon k-i-arrow-s'></span></td>" +
"<td><button id='customButton' onclick="AddSomethingBaseOnId(#=data.Id#)">Add</button> <span></span> <button id='customButton1' onclick="DeleteSomethingBaseOnId(#=data.Id#)">Delete</button></td>" +
I am working on an MVC 4 application and I have used a Kendo UI grid on my view. This view has a command column which displays button. On click of this button, I should display a kendo window (popup) which displays a partial view.On clicking 'Close' button on this window, I should once again return back to the grid and the grid should refresh.
Now I have 2 issues with this,
Once I click the button on grid, it displays the window only
once.i.e. if it close the window and again try to click the button on
grid, none of the button responds!
After I click the close button on the window, though the window
closes, but the grid dows not refresh. Instead the entire page
refreshes.
I have used the below code,
#(Html.Kendo()
.Grid(Model)
.Name("DefectGrid")
.Columns(columns =>
{
columns.Bound(d => d.DefectId).Title("ID").Width("5%");
columns.Bound(d => d.Title).Title("Title").Width("20%");
columns.Bound(d => d.Severity).Title("Severity").Width("10%");
columns.Bound(d => d.Status).Title("Status").Width("10%");
columns.Bound(d => d.Description).Title("Description").Width("20%");
columns.Bound(d => d.LoggedBy).Title("LoggedBy").Width("10%");
columns.Bound(d => d.LoggedOn).Title("LoggedOn").Width("10%");
columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
})
.Pageable()
.Sortable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Scrollable(scr => scr.Height(200))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("LoadDefects", "Home").Data("refreshGrid").Type(HttpVerbs.Get))
.PageSize(20)
.ServerOperation(false)))
#(Html.Kendo()
.Window()
.Name("Details")
.Title("Defect Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(1000)
.Height(600)
.Events(ev => ev.Close("onClose"))
)
<script type="text/x-kendo-template" id="template">
<div id="defectDetails">
</div>
</script>
function showDetails(e) {
// e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
var defId = dataItem.DefectId;
var actionURL = '#Url.Action("DefectDetail", "Home")';
wnd.refresh({
url: actionURL,
data: { defectId: defId }
});
wnd.center();
wnd.open();
}
function onClose(e) {
if (!confirm("Are you sure you want to close window?"))
e.preventDefault();
}
Can anyone suggest where I am going wrong and how can I fix the issue!!!
Thanks in advance
Try like this, add script tag and it's working fine.
<script type="text/javascript">
function showDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
var defId = dataItem.DefectId;
var actionURL = '#Url.Action("DefectDetail", "Home")';
wnd.refresh({
url: actionURL,
data: { defectId: defId }
});
wnd.center();
wnd.open();
}
</script>
You may refresh the grid by calling dataSource.read() on the grid element
probably you may do in the onClose() event of the window,
$("#DefectGrid").data("kendoGrid").dataSource.read();
I have tried now the last 3 weeks to get a ajaxLink to work with a jQuery Dialog Box. I have a delete Bookmark Function and want that a dialog Box appears, where you have to confirm that you want to delete the Bookmark, before the Ajax Request is fired and deletes the Bookmark.
I assume that I have to add something to the beforeSend function, but I can not figure out what needs to be written in it. Could someone advice what I need to do? I hope someone knows the answer, I run out of ideas. Thank you very much in advance !
Here my sourcecode so far:
echo $this->ajaxLink("Remove Bookmark","/bookmark/remove/article ".$this->escape($entry->id),
array(
'id' => '',
'class' => 'btn orange delete dialog-confirm',
'dataType'=>'JSON',
'method' => 'post',
'update' => '.bookmark',
'beforeSend' => '????',
'complete' => '$("."+data+"").remove();if ($(".watchlist").length == 0){$(".watch").append("<p>No items watched</p>")}'
));
And my jQuery Dialog Box:
$('.dialog-confirm').click(function(e){
e.preventDefault();
var URL = $(this).attr("href");
$(this).css('display','block');
$('#dialogbox').dialog({
resizable: false,
height:180,
width:350,
modal: true,
closeOnEscape: true,
buttons: {
"Yes, delete bookmark": function() {
window.location.href = URL;
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
Your Ajax request must be triggered only if a user click on the "Yes, delete bookmark" button. Therefore, you need to add to this button function a jQuery ajax function and remove your first ajaxLink().
//in your view.phtml
<div id="dialogbox" style="display:none">Do you really want to remove this bookmark?</div>
<span style="cursor:pointer" class="btn orange delete dialog-confirm" id="1">Remove Bookmark</span>
<?php $this->jQuery()->addOnload('
$(function() {
var id;
$("#dialogbox").dialog({
resizable: false,
height:180,
width:350,
modal: true,
buttons: {
"Yes, delete bookmark": function() {
$.ajax({
type: "POST",
url: "/bookmark/remove/article",
dataType: "json",
data: "id="+id,
success: function(data, textStatus, jqXHR) {
$("."+data+"").remove();
if ($(".watchlist").length == 0) {
$(".watch").append("<p>No items watched</p>")
}
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
$(".delete").click(function(e) {
id = this.id;
console.log(id);
$( "#dialogbox" ).dialog( "open" );
});
});
'); ?>
Now, if you click on Remove Bookmark, it displays a jQuery Dialog with two buttons: Cancel and "Yes, delete bookmark", and once you click on yes, it calls an jQuery.ajax function and send the id to /bookmark/remove/article as a parameter.