Develop Reference

how can i get dynamic value input and store it into the state

I am using react js. I am trying to get the dynamic input values from a modal, the problem is I am not able to get the input values in a proper way. I am trying to get when the user selects the size the state will save only one value small or extra-large also user can select multiple values in extra ingredirents which will store in the state.
The above image is my UI, as you can see I can select multiple values in the radio button which I don't want. I know where the problem is but didn't get any solution. I have commented on my jsx code where the problem is.
Here is the radio button and checkbox jsx code. the input values are dynamic I have hardcoded the values
// Radio buttons
{products.options.map((product, i) => {
return (
<li onChange={(e) => getItemValues(e.target, product)}>
<label className="container_radio">
Medium size
<span>+ $5.00</span>
<input
type="radio"
value={5.00}
name={options.title} // Here i have added dynamic value that is why the radio button is selecting multiple
/>
<span className="checkmark"></span>
</label>
</li>
<li onChange={(e) => getItemValues(e.target, product)}>
<label className="container_radio">
Extra Largse size
<span>+ $8.00</span>
<input
type="radio"
value={8.00}
name={'Extra Largse size'} // If I wrote like this the radio button are selecting only one
/>
<span className="checkmark"></span>
</label>
</li>
);
})}
// checkboxes, checkboxes will be more I just hardcoded only one
{product.ingredients.map((ingredient) => {
return (
<li onChange={(e) => getItemValues(e.target, product)}>
<label className="container_check">
Extra Tomato
<span>+ $2</span>
<input
type="checkbox"
value={2}
name={'Extra-Tomato'}
/>
<span className="checkmark"></span>
</label>
</li>
);
})}
Here is the function where I am trying to store the data
const [itemDetail, setItemDetail] = useState([]);
const getItemValues = (e, product) => {
setItemDetail((prevValue) => {
const existingProduct = prevValue.find(
(item) => item.title === product.title
);
if (existingProduct) {
existingProduct.options = {
...existingProduct.options,
[e.name]: e.value,
};
return prevValue;
} else {
/* new entry */
return [
...prevValue,
{ title: product.title, options: { [e.name]: e.value } },
];
}
});
};
If I select extra large and ketchup the output looks like the below code: as you can see I am getting only one value which is ketchup, I should get also the extra large value maybe there is a problem with my function.
[{options: {ketchup: '1'}
title: "ketchup}]
My expected output is:
[{title: 'Barnes Chapman', options:{extra large: '8.0', ketchup: '1.00' } }]
Also, i want if unselect the ketchup the ketchup value will be removed from the state also for the radio buttons.

Kendo Grid ASP.Net Updating wrong row

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>

Is there a javascript/jquery function to Submit a Razor Form?

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

How do you manually sort a Kendo UI Grid in ASP MVC page?

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.

Inline markup blocks (#<p>Content</p>) cannot be nested. Only one level of inline markup is allowed

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>);