I want to select a row from my igGrid and when submit button is clicked, I want that entire row to be passed down to the action method of the submit button. How can I do that ?
I have set features.Selection().Mode(SelectionMode.Row);
Is there a way to pass the entire row which was seleected to the action method or could i atleast get the id of the row selected.
Also is there a way other than using Jquery, Is there a .feature=> property through which we can pass the row or row id on button click. If not then please tell me how to do it through Jquery.
I need to know this urgently. Any help would be appreciated. also I have read the IgnitUi's website demo but still i cannot seem to achieve what i want .
If you could provide a short working sample , that would be great.
Thanks.
Hello zeppelin led,
Thank you for posting in our forums!
I see you have posted this question in another forum thread. Please see my response to this issue in your forum post here:
https://ko.infragistics.com/community/forums/f/ignite-ui-for-javascript/89745/post-selected-row-or-row-id-to-server-on-button-click
Yes your provided solution worked for me, thanks alot.
Can you please tell me how can i persist the selected item of igCombo on MVC's postback. When I select an option from the igCombo and click the submit button the combo loses the selected item on postback. I think this has something to do with model binding but i am not sure. Is there a property of igCombo to persist the the selected value on postback or is this an Asp.Net MVC query?
Well I have similar issues regarding the igCombo. If you could please tell me how to resolve , that would be great,
Question1: When i hover over my igCombo the textfield which is visible disappears leaving behind the white space , when I remove the cursor from the igCombo the text field appears again, why is this happening.
Question2: Normally when I have to open the combo drop down I have to click on the "down" arrow on the igCombo to list down the items , Is there a feature in igCombo, that instead of only drawing out after being click on the "downward" arrow the list gets drawn out if I click on any part of the comboBox or maybe if I doube click on any part of the combo, If there isnt , then can I atleast increase the area of the downward arrow button? Its too small to be easily aimed at while in a hurry (dropDownOnFocus: true will solve this hopefully)
Question3: Is there an autoPostback feature of igCombo? which I am sure there is, Can you please share the MVC code snippet. I think this is achievable in jquery through this -> selectionChanged: function (e, args) { //code } but how would i do this in mvc?
Question4: How to configure the combo in such a way that a default entry is selected everytime the page is rendered. In Jquery this would be achieved like this-> selectedItems: [{ index: 1 }] . How to do it using mvc helper.
Question5: How can I put a placeholder on my igCombo? for example "Select an item" which also acts as an invalid item on postback or while validation. If this would be achieved after hardcoding an entry on its first index, How would this be possbile if the combobox is bound to a datasource? how to append a "select an item" entry on top of the datasource items using mvc chaining or helper.
Please try to give the code snippets using mvc chaining syntax or mvc helpers, I am not using Jquery to render the elements & the igniteUI website contains almost all the examples in Jquery which is why i am having these many issues.
Well I hope you are not regretting the decision to take a follow up on my issue :) , I know i am bothering you too much but I am completely new to this & googling IgniteUi doesnt help much. If you think these issues need another thread then please tell me I will make a new one for it, but I dont want to flood the board with too many minor issues.
Thanks in advance.
Hi zeppelin led,
We do prefer to have individual questions asked per forum thread. Doing this allows other forum users to quickly find an answer if they have similar questions.
For now, please see below for my responses to your questions.
1. I do not see this behavior. It may be possible that you do not have all the required styling for the control. Do you see this in the sample I provided earlier? Please see the following documentation for more information on including the required files:
https://www.igniteui.com/help/14.1/deployment-guide
2. Please let me know if setting dropDownOnFocus solves this.
3. In MVC, there's no real concept of a postback in the sense that WebForms has. You are on the right track that you would have to handle the igCombo's events and you would want to make $.ajax calls to your Controllers' actions in the handler. You could still use jQuery to hook to events or through using the wrapper's AddClientEvent method. Please see the following documentation for more information on this:
https://www.igniteui.com/help/14.1/using-events-in-netadvantage-for-jquery
https://www.igniteui.com/help/14.1/infragistics.web.mvc~infragistics.web.mvc.combowrapper~addclientevent
4. To achieve this, you would set the same ViewBag member during the initial GET request of the page. Try modifying my previous example's HomeController with the following:
[code] // // GET: /Home/ public ActionResult Index() { // This will select the items in the igCombo that have the following values. ViewBag.ProductComboSelectedItems = new int[] {1, 16}; return View(); } [/code]
5. You can set a null text for when the igCombo does not have any items selected. You can set this on the MVC Wrapper with the NullText() method. If you want to add an empty item to the selection list, you would need to add that to your datasource and handle it appropriately. For more information on the available methods on the igCombo's MVC Wrapper, please see the following documentation:
https://www.igniteui.com/help/14.1/infragistics.web.mvc~infragistics.web.mvc.combowrapper_members
Question 2: Solved
-----------------------------------------------------------------
Question3: I have added the addclientevent like this :
.AddClientEvent("selectionChanged","comboSelectionHandler") Is this syntax alright?
And i have added the follwoing BLOCKED SCRIPT
// function comboSelectionHandler(evt, ui) { console.log(evt); $.post("/Dashboard/Listing", { entityValue: document.getElementByName("EntityValue").val() //What do I write here? How to pass the selected item value to my POST method? }); } // ]]>
How to get the value of my combo box whose properties are the following:
.InputName("EntityValue").ID("listingCombo")
.ValueKey("EntityName").TextKey("EntityName")
.AddClientEvent("selectionChanged","comboSelectionHandler") // Please check the syntax.
This code is not working .. Please point out the mistakes. What am i doing wrong.
-----------------------------------------------------------------------------------
Question 4: I will test it , hopefully this will also be solved.
Question 5: Solved
After some research, the issue with the text disappearing is related to including bootstrap. From my initial tests it looks like the hover style somewhere within bootstrap may be setting the text color to white, which matches the background. I will need some more time to look into this.
You are using the correct syntax for the AddClientEvent() method. To pass the selected value to the controller action, you can either use the events arguments, or the combo's methods. You can find more information on this in our documentation here:
https://www.igniteui.com/help/api/2014.1/ui.igcombo#methods
https://www.igniteui.com/help/api/2014.1/ui.igcombo#events
The issues with using "document.getElementByName("EntityValue").val()" is that:
1. document.getElementByName() does not return a jQuery object. You would need to wrap this in a jQuery object to call .val().
2. The jQuery val() method, while it will work on getting the input's value, it does not access through our API. For this reason, we recommend using our API methods, which you can find more information from the links above.
Please see my modified sample I have attached to this post for a demonstration of these solutions.
I will have another update on my findings with the bootstrap text issue for you tomorrow.
Thanks I will try to implement AddClientEvent method later after i finish my current work.
Regarding the bootstrap issue and hovering , If you find a fix please let me know, I also excluded the bootstrap reference and the issue was resolved but the thing is , I cannot exclude bootstrap , my whole website is built using bootstrap. Please let me know if you find a fix for it.
These posts are really helpful, thanks
Please let me know if you need further assistance with this issue.
One solution for the text issue is to add the following styling which should overwrite the bootstrap styling on the input with the default styling's color.
.ui-state-hover input, .ui-widget-content .ui-state-hover input, .ui-widget-header .ui-state-hover input { color: #666; }
If you have any further questions or concerns with this, please let me know.