Hello all,
I am new to both Telerik and MVC and need help desperately.
I have built a grid that is populated by data query upon load. I added a custom column with a button (Create Affidavit) to my grid with a .Click command pointing to jquery function sendVisibleRows.
Upon clicking the row’s “Create Affidavit” button, I wish to capture all the data in the “clicked” row and pass each column value and format them separately to local variables that I use to dynamically populate a form.
I’ve tried numerous methods but I cannot seem to be able to capture the data in the clicked row. No matter what I do, I seem to only be able to capture the columns in the very first row.
I also tried without success:
var row =
this.select();
var id =
row.data("id");
Any help is extremely welcome. Thank you!
<div class=
"container"
>
<div class=
"col-lg-6"
>
@(Html.Kendo().Grid<IntranetPolice.Models.AffDataTbl>()
.Name(
"Grid"
)
.Columns(columns =>
{
columns.Bound(p => p.inci_id).Title(
"Svc Number"
).Width(80);
columns.Bound(p => p.arr_chrg).Title(
"Charge"
).Width(80);
columns.Bound(p => p.lastname).Title(
"Last Name"
).Width(80);
columns.Bound(p => p.firstname).Title(
"First Name"
).Width(80);
columns.Bound(p => p.street).Title(
"Street"
).Width(80);
columns.Command(command => command.Custom(
"Create Affidavit"
).Click(
"sendVisibleRows"
)).Width(80);
})
.HtmlAttributes(
new
{ style =
"height: 550px;"
})
//.Pageable(pageable => pageable
// .Input(true)
// .Numeric(false)
// )
.Sortable()
.Scrollable(scr => scr.Height(430))
//.Filterable()
.DataSource(dataSource => dataSource
// Configure the grid data source
.Ajax()
// Specify that ajax binding is used
.Read(read => read.Action(
"Affidavit_Read"
,
"Home"
).Data(
"sendAddtionalData"
))
)
)
</div>
<div class=
"col-lg-6"
>
<div class=
"panel"
align=
"center"
>
@using (Html.BeginForm(
"Affidavit_PDF"
,
"Home"
, FormMethod.Post,
new
{ target =
"_blank"
}))
{
@Html.AntiForgeryToken()
<form id=
"arraignmentForm"
>
<ul id=
"fieldlist"
>
<li><center><h4>Arraignment Form</h4></center></li>
<li>
<p>
@Html.TextBoxFor(m => m.inci_id,
new
{ id =
"inci_id"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextBoxFor(m => m.lastname,
new
{ id =
"lastname"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextBoxFor(m => m.firstname,
new
{ id =
"firstname"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextBoxFor(m => m.chrgdesc,
new
{ id =
"chrgdesc"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextBoxFor(m => m.statute,
new
{ id =
"statute"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextAreaFor(m => m.supplement,
new
{ id =
"supplement"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
</p>
@Html.HiddenFor(m => m.date_occu,
new
{ id =
"date_occu"
})
@Html.HiddenFor(m => m.armainid,
new
{ id =
"armainid"
})
@Html.HiddenFor(m => m.archrgArmainid,
new
{ id =
"archrgArmainid"
})
@Html.HiddenFor(m => m.archrgid,
new
{ id =
"archrgid"
})
@Html.HiddenFor(m => m.chargetype,
new
{ id =
"chargetype"
})
@Html.HiddenFor(m => m.arr_chrg,
new
{ id =
"arr_chrg"
})
@Html.HiddenFor(m => m.bondamt,
new
{ id =
"bondamt"
})
@Html.HiddenFor(m => m.fel_misd,
new
{ id =
"fel_misd"
})
@Html.HiddenFor(m => m.race,
new
{ id =
"race"
})
@Html.HiddenFor(m => m.sex,
new
{ id =
"sex"
})
@Html.HiddenFor(m => m.dob,
new
{ id =
"dob"
})
@Html.HiddenFor(m => m.height,
new
{ id =
"height"
})
@Html.HiddenFor(m => m.weight,
new
{ id =
"weight"
})
@Html.HiddenFor(m => m.hair,
new
{ id =
"hair"
})
@Html.HiddenFor(m => m.eye,
new
{ id =
"eye"
})
@Html.HiddenFor(m => m.streetnbr,
new
{ id =
"streetnbr"
})
@Html.HiddenFor(m => m.street,
new
{ id =
"street"
})
@Html.HiddenFor(m => m.city,
new
{ id =
"city"
})
@Html.HiddenFor(m => m.state,
new
{ id =
"state"
})
@Html.HiddenFor(m => m.zip,
new
{ id =
"zip"
})
@Html.HiddenFor(m => m.dr_lic,
new
{ id =
"dr_lic"
})
@Html.HiddenFor(m => m.dl_state,
new
{ id =
"dl_state"
})
@Html.HiddenFor(m => m.name_id,
new
{ id =
"name_id"
})
@Html.HiddenFor(m => m.ofcName,
new
{ id =
"ofcName"
})
@Html.HiddenFor(m => m.selectCounty,
new
{ id =
"selectCounty"
})
</li>
<li class=
"confirm"
>
<button class=
"k-button k-primary"
type=
"submit"
>Arraignment Form</button>
</li>
</ul>
</form>
}
</div>
</div>
</div>
<script>
function
sendAddtionalData() {
var
caseNum =
'@(ViewBag.caseNum)'
;
return
{
caseNum: caseNum,
};
}
function
sendVisibleRows(e) {
var
grid = $(
"#Grid"
).data(
"kendoGrid"
).dataSource.get();
//pulling data from selected grid column
//var t = grid.dataItem(grid.select());
var
jgrid = JSON.stringify(grid);
//converting the data received into JSON format
var
jgrid_obj = eval(
"("
+ jgrid +
")"
)
//creating object with JSON datafields
$.ajax({
type:
"POST"
,
dataType:
"json"
,
contentType:
"application/json; charset=utf-8"
,
url:
'@Url.Action("Affidavit_Create", "Home")'
,
async:
true
,
processData:
false
,
data: jgrid,
//JSON.stringify(grid),
success:
function
(json) {
if
(json.pass) {
var
ofcName =
'@(ViewBag.ofcname)'
;
var
selectCounty =
'@(ViewBag.selectCounty)'
;
var
inci_id = jgrid_obj.inci_id;
var
date_occu = jgrid_obj.date_occu;
var
armainid = jgrid_obj.armainid;
var
archrgArmainid = jgrid_obj.archrgArmainid;
var
chrgdesc = jgrid_obj.chrgdesc;
var
archrgid = jgrid_obj.archrgid;
var
chargetype = jgrid_obj.chargetype;
var
arr_chrg = jgrid_obj.arr_chrg;
var
bondamt = jgrid_obj.bondamt;
var
fel_misd = jgrid_obj.fel_misd;
var
statute = jgrid_obj.statute;
var
lastname = jgrid_obj.lastname;
var
firstname = jgrid_obj.firstname;
var
race = jgrid_obj.race;
var
sex = jgrid_obj.sex;
var
dob = jgrid_obj.dob;
var
height = jgrid_obj.height;
var
weight = jgrid_obj.weight;
var
hair = jgrid_obj.hair;
var
eye = jgrid_obj.eye;
var
streetnbr = jgrid_obj.streetnbr;
var
street = jgrid_obj.street;
var
city = jgrid_obj.city;
var
state = jgrid_obj.state;
var
zip = jgrid_obj.zip;
var
dr_lic = jgrid_obj.dr_lic;
var
dl_state = jgrid_obj.dl_state;
var
name_id = jgrid_obj.name_id;
var
supplement = jgrid_obj.supplement;
/////sending variables to Form
$(
"#ofcName"
).val(ofcName);
$(
"#selectCounty"
).val(selectCounty);
$(
"#inci_id"
).val(inci_id);
$(
"#lastname"
).val(lastname);
$(
"#firstname"
).val(firstname);
$(
"#supplement"
).val(supplement);
$(
"#chrgdesc"
).val(chrgdesc);
$(
"#statute"
).val(statute);
$(
"#date_occu"
).val(date_occu);
$(
"#armainid"
).val(armainid);
$(
"#archrgArmainid"
).val(archrgArmainid);
$(
"#archrgid"
).val(archrgid);
$(
"#chargetype"
).val(chargetype);
$(
"#arr_chrg"
).val(arr_chrg);
$(
"#bondamt"
).val(bondamt);
$(
"#fel_misd"
).val(fel_misd);
$(
"#race"
).val(race);
$(
"#sex"
).val(sex);
$(
"#dob"
).val(dob);
$(
"#height"
).val(height);
$(
"#weight"
).val(weight);
$(
"#hair"
).val(hair);
$(
"#eye"
).val(eye);
$(
"#streetnbr"
).val(streetnbr);
$(
"#street"
).val(street);
$(
"#city"
).val(city);
$(
"#state"
).val(state);
$(
"#zip"
).val(zip);
$(
"#dr_lic"
).val(dr_lic);
$(
"#dl_state"
).val(dl_state);
$(
"#name_id"
).val(name_id);
}
},
error:
function
(XMLHttpRequest, textStatus, errorThrown) {
alert(
"Error"
);
}
});
}
</script>
I want to create my own action buttons for each row in the grid using gylypicon images. I've used previous posts in this forum as a guideline for what to do,but the solutions offered (here and here) appear to be no longer supported. I can get the custom buttons to appear without any issue, but there's no icon (when a name value is specified), nor does there seem to be a way to just show an icon (we're using Bootstrap gylphicons and want to use them for the action buttons as well).
Here's how I'm creating the rows in the grid (I have additional command buttons, but they're the same as that below):
01.
columns: [
02.
{ field:
"id"
, title:
"Id"
, hidden:
false
},
03.
{ field:
"parentId"
, hidden:
true
},
04.
{ field:
"Title"
, hidden:
false
},
05.
{ field:
"Body"
, hidden:
false
},
06.
{ field:
"NoteCreator"
, hidden:
true
},
07.
{ field:
"CreatedBy"
, title:
"Created By"
, hidden:
false
},
08.
{ field:
"CreatedDate"
, title:
"Created On"
, hidden:
false
},
09.
{ field:
"Replies"
, hidden:
true
},
10.
{ field:
"IsRoot"
, hidden:
true
},
11.
{ field:
"Token"
, hidden:
true
},
12.
{
13.
field:
"Actions"
, hidden:
false
,
14.
command: [{
15.
name:
" "
,
16.
click:
function
(e) {
17.
// e.target is the DOM element representing the button
18.
var
tr = $(e.target).closest(
"tr"
);
19.
// get the data bound to the current table row
20.
var
data =
this
.dataItem(tr);
21.
alert(
"View for id "
+ data.id +
"."
);
22.
}
23.
}]
24.
],
The first file (action-buttons-no-icons.png) shows what it looks like; the second file (action-buttons-icons-only.png) shows what I *want* it to look like.
I have this code for an autocomplete for possible recomendations, but when I want type a custom name, the plugin delete my characteres
@(Html.Kendo().MultiSelect()
.Name("EmailInvited")
.AutoClose(false)
.Placeholder("Write the name or email")
.BindTo(Model.RecomendationList)
.DataTextField("Invited")
.DataValueField("Email")
)
I want to create a bound form with next/prev/first/last/delete/new buttons.
Is there any sample code or demos out there on how to implement this? Even better would be samples that also show a linked subgrid, a la invoice details/Line Items.
Thanks,
Brad
If the grid column re-size is enabled and the user re-sizes one or more column in the grid. Is there any way to restore those column sizes automatically later? I've found several posts on the subject but none seem to work.
The last attempt was made using the "element" object to restore the grid column sizes:
$(
"#grid-id .k-grid-header-wrap"
).find(
"colgroup col"
).eq(xx).width(yy);
$(
"#grid-id .k-grid-content"
).find(
"colgroup col"
).eq(xx).width(yy);
Hello,
I have a tooltip like so:
.Tooltip(tt => tt.Visible(
true
).Template(
"#= kendo.format('{0:p}', percentage)#"
)))
This is great and gives me the percentage of the values in the charts fine...EXCEPT, I would like the percentages to have no decimal points, i.e: 23% instead of 22.80% for example.
Is there any way Telerik can do that for me?
IF NOT:
Can I at least get 22.8%
Thanks.
Here is my code:
@(Html.Kendo().Grid<TelerikMvcApp1.Models.UserViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName)
.Filterable(f => f
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts With")
.EndsWith("Ends With")
.IsEqualTo("Is Equal To")
.IsNotEqualTo("Is Not Equal To")
)
)
)
.Title("First Name")
.Width(200);
columns.Bound(p => p.LastName)
.Filterable(f => f
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts With")
.EndsWith("Ends With")
.IsEqualTo("Is Equal To")
.IsNotEqualTo("Is Not Equal To")
)
)
)
.Title("Last Name")
.Width(200);
columns.Bound(p => p.Email)
.Filterable(f => f
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts With")
.EndsWith("Ends With")
.IsEqualTo("Is Equal To")
.IsNotEqualTo("Is Not Equal To")
)
)
)
.Title("Email ID")
.Width(200);
columns.Bound(p => p.Status)
.Title("Status")
.Filterable(ftb => ftb
.Cell(c => c
.ShowOperators(false)
)
)
.Width(200);
columns.Bound(p => p.LastAccess)
.Filterable(true)
.Title("Last Access")
.Format("{0:MM/dd/yyyy}")
.Width(200);
})
.AutoBind(true)
.Pageable(pageable => pageable
.PageSizes(true)
)
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row)
)
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.SingleColumn))
.Scrollable(a => a.Height(100))
.Filterable(f => f
.Mode(GridFilterMode.Row)
.Extra(false)
)
.Reorderable(reorder => reorder.Columns(true))
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = "height:720px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(25)
.Read(read => read.Action("Details_Read", "Grid"))
)
)
In the blocked letter lines is the part where i cannot customize the filter. So, please anyone tell me how to create a custom filter when using .Mode(GridFilterMode.Row) and i have tried using template within the cell(in 'status' column) to create a drop down list, but it is also not working. There are no good examples on this custom filter in MVC razor syntax. In this custom filter i want to keep two options, so please anyone tell me how can i do that!
Hi,
Can we have any sample for Bar chart with Scatter Line...
I define a batch editing grid with the wrapper ASP.NET MVC, exactly like the demo : http://demos.telerik.com/aspnet-mvc/grid/editing
But the result is different. Fields that appear when editing a cell are not kendo widget.
By example, the unit price field is a simple input tag with the class "text-box". It's not a kendo widget numerictextbox.
I make a sample project with exactly the same file editing.cshtml.