Using the sample index.cshtml found on the Kendo UI demos for ASP.NET MVC, how can I check if the row I selected has certain contact title?
E.g. if I select a row and I want to see if that row contains contact title 'Sales Representative'? How can I do this in javaScript?
I understand that I can bind an event to the grid but I'm not sure how to get the specific row value/id and check if the contact title is sales representative?
Here's the code snippet:
<div id="clientsDb">
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ContactName).Width(140);
columns.Bound(c => c.ContactTitle).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country).Width(110);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Grid"))
)
)
</div>
<style>
#clientsDb {
width: 952px;
height: 396px;
margin: 20px auto 0;
padding: 51px 4px 0 4px;
background: url('#Url.Content("~/content/web/grid/clientsDb.png")') no-repeat 0 0;
}
</style>
I would give the grid an Id and use the following:
Add this to your grid:
.Events(events => events.Change("gridClick"))
then use this function:
function gridClick(){
var grid = $("#gridIdHere").data("kendoGrid");
var selectedRow = grid.dataItem(grid.select());
if(selectedRow.contactTitle == "Sales Representative"){
..Do stuff here
}
}
selectedRow will contain all of the fields in your model.
Related
Sorry, very new here to most front end stuff being used here. I have a Kendo Grid, displaying nicely. In my example I have 2 people being displayed in the grid. When I click on the first one, it makes the ajax call, gets the line items, and displays them in an expanded way perfectly. However, when I click on the 2nd person (with person 1 still expanded) it makes the ajax call and gets the data, however, it puts the data under Person1, not person 2, overwriting Person 1's data and leaving person 2's data blank.
<div class="col-lg-12">
<div class="panel panel-default">
#(Html.Kendo().Grid<PersonRollUp>()
.Name("gridview-PersonResults")
.Columns(columns =>
{
columns.Bound(e => e.PersonName).Width(80);
columns.Bound(e => e.NumberNew).Width(50);
columns.Bound(e => e.DollarNew).Width(50);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("headerstemplate")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetPerson", "Controller").Data("persoinRequestData"))
));
<script type="text/x-kendo-tmpl" id="headerstemplate">
#(Html.Kendo().TabStrip()
.Name("tabStrip_detail)
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Person Details").Content(#<text>
#(Html.Kendo().Grid<PersonVm>()
.Name("grid_person")
.Columns(columns =>
{
columns.Bound(o => o.Person).Title("Person Name");
columns.Bound(o => o.ShortCode).Title("Loc").Width(80);
columns.Bound(o => o.CustFullName).Title("Customer").Width(180);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => { model.Id(o => o.Person); })
.PageSize(5)
.Read(read => read.Action("PersonData", "Dashboard", new{ personName = "#=Person#" }).Data("personRequestData")))
.Pageable()
.Sortable()
.PersistSelection()
.ToClientTemplate())</text>);
}).ToClientTemplate())
</script>
</div>
DontVoteMeDown's comment is right - and I do that in my ASP.NET Kendo code when using client detail template grids. You may need to do it for your tabstrip too.
Try updating your tabstrip and grid template code like so:
<script type="text/x-kendo-tmpl" id="headerstemplate">
#(Html.Kendo().TabStrip()
.Name("tabStrip_detail#=Person#") //not sure if you'll have access to Person here, but this ID/Name should be unique if multiple templates can be displayed at the same time
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Person Details").Content(#<text>
#(Html.Kendo().Grid<PersonVm>()
.Name("grid_person#=Person#") //Better to use an ID field than name if you have it since the name could have duplicates
.Columns(columns =>
{
columns.Bound(o => o.Person).Title("Person Name");
columns.Bound(o => o.ShortCode).Title("Loc").Width(80);
columns.Bound(o => o.CustFullName).Title("Customer").Width(180);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => { model.Id(o => o.Person); })
.PageSize(5)
.Read(read => read.Action("PersonData", "Dashboard", new{ personName = "#=Person#" }).Data("personRequestData")))
.Pageable()
.Sortable()
.PersistSelection()
.ToClientTemplate())</text>);
}).ToClientTemplate())
</script>
I have kendo grid with checkbox selection column and I customized these checkboxes but now checkboxes are not clickable, cannot be unchecked or checked
How do I solve this?
Here is my code
#( Html.Kendo().Grid<MockUpForeNet.Controllers.CardDetailController.Days>()
.Name("timegrid")
.DataSource(d => d.Ajax().Read("TimeGridBinding", "CardDetail").Model(keys =>
{
keys.Id(k => k.DayId);
keys.Field(c => c.DayName).Editable(false);
keys.Field(c => c.DayId).Editable(false);
}).PageSize(7))
.Columns(c =>
{
c.Bound(p => p.DayId).Width(100).Title(" ").ClientTemplate("#= chk2(data) #").Sortable(false);
c.Bound(e => e.DayName).Width("auto").Title("Day");
})
.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
.Sortable()
.ColumnMenu()
)
here my checkbox template
function chk2(data) {
return '<input id="masterCheck' + data.DayId + '" class="k-checkbox" type="checkbox" checked="checked" /><label for="masterCheck" class="k-checkbox-label"></label>';
}
You have an error in your template: label for="masterCheck" is missing data.DayId .
Also note that checkboxes have changed in version 2020.1.114 and don't need the empty label anymore. See examples on https://demos.telerik.com/kendo-ui/checkbox/index . Remember to provide an aria-label for accessibility reasons.
DayId should be made editable in the DataSource
keys.Field(c => c.DayId).Editable(true);
I have a Razor form and I would prefer to not have to use a button to submit the information.
#using (Html.BeginForm("SubmitYearDept", "Request", FormMethod.Post, new {
id = "SubmitYearDeptForm" }))
{
<div class="aidYearDiv" style="float: left; margin-right: 1em">
#(Html.Kendo().DropDownListFor(m => m.AidYear)
.Name("AidYear")
.HtmlAttributes(new { #class = "aidYearList" })
.DataTextField("Name")
.DataValueField("Name")
.OptionLabel("Select a Year")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Filtering_AidYear", "Request");
});
})
.Events(e =>
{
e.Change("onAppChange");
}))
</div>
<div class="departmentDiv">
#(Html.Kendo().DropDownListFor(m => m.DeptCode)
.Name("DeptCode")
.HtmlAttributes(new { #class = "departmentList" })
.DataTextField("DeptName")
.DataValueField("DeptCode")
.OptionLabel("Select a Department")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Filtering_Dept", "Request");
});
})
.Events(e =>
{
e.DataBound("onDataBound");
e.Change("onAppChange");
}))
<input type="submit" id="SubmitNomineeBtn" name="SubmitNomineeBtn" class="submitButton" value="Submit" />
</div>
}
I would like that if both drop downs have a value then submit the form. The reason I would prefer to not use a drop down is because I want information to change based on the values of the drop downs and allow the user to not have to hit a submit button every time they change the value of one of the drop downs.
What I ended up doing is if my condition is true I'm just going to simulate a button click for the user. And so the user doesn't see the button I just made changed the style of the button to be display: none
I have a grid which is seen below.
I have already made it Sortable as you can see. But when someone clicks search I want the grid sorted by a particular field - the SurveyDueDate.
How do I set the field the grid is sorted by and if it is ascending or descending from the javascript call in the search button click event?
Everything I look at on the grid only shows how to make it Sortable and doesn't say how to explicitly set the sort.
#(Html.Kendo().Grid<SurveyMaintenance.Models.StoreSurveyList>()
.Name("idGridStoreSurveyList")
.HtmlAttributes(new { ID = "idGridStoreSurveyList", Class = "k-grid-header" })
.Columns(columns =>
{
columns.Bound(p => p.IsSelected)
.ClientTemplate("<input type='checkbox' class='StoreSurveyListDeleteItemRequest' #= (IsSelected === true) ? checked='checked' : '' # onclick='StoreSurveyListFunctions.toggleStoreSurveyListDeleteItemRequestSelection(this)' />")
.HeaderTemplate("<input type=\"checkbox\" id=\"toggleAllStoreSurveyListDeleteItems\"/>")
.Width(40)
.Filterable(false)
.Sortable(false);
columns.Bound(p => p.SurveyDueDate)
.Template(#<text></text>)
.ClientTemplate("#= kendo.toString(SurveyDueDate,'MM/dd/yyyy') #")
.Width(130);
columns.Bound(p => p.StoreCompleted)
.Width(110);
columns.Bound(p => p.SurveyName);
columns.Bound(p => p.DeliveryDate)
.Template(#<text></text>)
.ClientTemplate("#= kendo.toString(DeliveryDate,'MM/dd/yyyy') #")
.Width(130);
columns.Bound(p => p.SupplierName)
.Width(200);
})
.Sortable()
.Filterable()
.Navigatable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(500)
.ServerOperation(false)
.Events(events => events.Error("grid_error_handler"))
.Model(model => { model.Id(p => p.SurveyID); })
.Read(
read => read.Action("GetStoreSurveyList", "StoreSurveyList").Data("additionalDataStoreSurveyList")
)
)
)
I figured it out.
Inside the javascript call I put the following code:
var kendoGrid = $("#idGridSurveyList").data("kendoGrid");
var dsSort = [];
dsSort.push({ field: "DeliveryDate", dir: "desc" });
kendoGrid.dataSource.sort(dsSort);
There is a sort method for the datasource of a kendo grid and you can pass it an array that holds the field and direction of the sort.
Hello I am getting the error:
Inline markup blocks (#<p>Content</p>) cannot be nested. Only one level of inline markup is allowed.
Using a Kendo UI tabstrip and MultiSelectBoxes with a Razor View and MVC4
I have tried implementing the helper class, but I am still getting the error
Here is my code, am I missing a step? I moved the 3 multiselects out and called them with the helper!
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("One")
.Content(#<div>
#RenderSelect()
</div>;);
tabstrip.Add().Text("Two")
.Content("Two");
tabstrip.Add().Text("Three")
.Content("Three");
})
.SelectedIndex(0)
)
#helper RenderSelect()
{
<h2>MyList</h2>
<label>One</label>
#(Html.Kendo()
.MultiSelect()
.Name("One")
.AutoBind(true)
.Placeholder("Select Clients...")
.DataTextField("hname")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Client", "Dist");
})
.ServerFiltering(true);
})
)
<label>Two</label>
#(Html.Kendo()
.MultiSelect()
.Name("Two")
.AutoBind(true)
.DataTextField("gname")
.Placeholder("Select Recipients...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Client", "Dist");
})
.ServerFiltering(true);
})
)
<label>Three</label>
#(Html.Kendo()
.MultiSelect()
.Name("Three")
.AutoBind(true)
.DataTextField("id")
.Placeholder("Select CLL...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Codes", "Dist");
})
.ServerFiltering(true);
})
)
}
I figured it out.
I have to chain the helpers.
So One helper class for each of the multi-selects.
Follow This:
http://www.aspnetwiki.com/telerik-mvc:nested-container-controls-and-razor-helper
Then If you want multiple MultiSelects In One Tab You will need to have a helper for each multiselect like this:
Here is the helper, just copy this for the second third and fourth and change the names etc...
#helper RenderMultiFirstBox()
{
#(Html.Kendo()
.MultiSelect()
.Name("First")
.AutoBind(true)
.Placeholder("Select First...")
.DataTextField("name")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Index", "Something");
})
.ServerFiltering(true);
})
)
}
Then Call the helpers in the TabStrip 'Content' like this:
.Items(tabstrip =>
{
tabstrip.Add().Text("One")
.Content(#<text>
#RenderMultiSelectFirstBox()
#RenderMultiSelectSecondBox()</text>);